Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support CSS Modules that are imported by JS modules in node_modules

See original GitHub issue

EDIT: This has started working on codesandbox without any edits, will try figure out why.

Is this a bug report?

Yes

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

N/A

Environment

codesandbox

Steps to Reproduce

Open: https://codesandbox.io/s/w0x8xk5lk

Or use the following code:

index.js

import React from "react";
import ReactDOM from "react-dom";
import Button from "./button";

function App() {
  return (
    <div>
      <Button>Test</Button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

button.js

import React from "react";
import styles from "./button.module.scss";
// import styles from "govuk-frontend/components/button/_button.scss";
// import styles from "@penx/govuk-frontend/components/button/_button.module.scss";

const Button = props => (
  <button className={styles["govuk-button"]} {...props} />
);

export default Button;

button.scss

@import "~govuk-frontend/components/button/button";

.govuk-button {
  composes: govuk-button;
}

Notice that

import styles from "./button.module.scss";

and

import styles from "@penx/govuk-frontend/components/button/_button.module.scss";

Will correctly import the CSS module.

2.

Open https://codesandbox.io/s/6yk2prz14w

Or use the following code:

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "govuk-frontend-react";

function App() {
  return (
    <div>
      <Button>Test</Button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Notice that

import { Button } from "govuk-frontend-react";

Throws the error:

Error: Could not find /node_modules/govuk-frontend/tools/exports
        on line 2 of node_modules/govuk-frontend/tools/_all.scss
>> @import "exports";
   --------^

Despite _exports.scss existing: https://github.com/alphagov/govuk-frontend/blob/master/src/tools/_exports.scss

These 2 sandboxes are doing more or less the same thing, but the second is doing it via a component library on npm https://github.com/penx/govuk-frontend-react

Expected Behavior

I would expect the 2 linked sandboxes above to exhibit the same behaviour, and for _exports.scss to be resolved.

Actual Behavior

The second sandbox fails, because it is importing a React component from npm, that in turn is importing a CSS module. I suspect that the webpack configuration means that @import "exports"; inside /node_modules/**/myfile.scss does not correctly resolve to /node_modules/**/_exports.scss