REACT with CRA incorrect webpack config for SCSS - loaders not working

[CasperGrey]

Hi,

I am currently using a CRA based app that im trying to use Material components web with. I have edited my dev config to include the suggested changes to the scss loaders but still i am getting the following compile error suggesting webpack is not able to find the correct modules..

./node_modules/@material/button/mdc-button.scss)
Module build failed:
undefined
^
File to import not found or unreadable: @material/ripple/common.
in C:\Users\johnstonb\Documents\Project\cloudify\node_modules@material\button\mdc-button.scss (line 23, column 1)

My webpack.config.dev.js and package.json

https://codepen.io/ben-johnston/pen/dggJPp

Can anyone assist in the correct config to make this work?

[jantimon]

material-components does not follow the webpack standard so it is not compatible with webpack unless you have access to the webpack config which might be difficult for large angular or react projects.

Without the loader option you would still be able to resolve packages from the node_modules folders using a ~.

@import "~@material/textfield/mdc-text-field";

However material-components is also using the node_modules alias internally so it will show error messages like:

@import "@material/animation/variables";
^
      File to import not found or unreadable: @material/animation/variables.
      in materialio-test/node_modules/@material/textfield/mdc-text-field.scss (line 23, column 1)

create react app uses the webpack standard for scss imports so you won't be able to combine create-react-app and material-components.

[williamernest]

You might be able to get everything working with CRA and MDC Web by following the getting started guide from the Material Components for React repo. I believe there's currently a way to do without ejecting.

Using our components with Angular is also pretty straightforward but does require you to manually edit the angular.json file to add the scss includePaths.

[jantimon]

Is there any chance to switch to the webpack standard and add that strange ~?

Then it would work without setting scss include paths

[williamernest]

We explored that option at one point but discovered the tilde (~) is node specific. It isn't recognized/supported everywhere (for example, ruby sass doesn't support the tilde since they also have to import from gems).

[CasperGrey]

You might be able to get everything working with CRA and MDC Web by following the getting started guide from the Material Components for React repo. I believe there's currently a way to do without ejecting.

Using our components with Angular is also pretty straightforward but does require you to manually edit the angular.json file to add the scss includePaths.

Already did that in the code and still didnt work

[jantimon]

@williamernest that's true but is ruby still used?
would it be possible to do a "search an replace" before you publish the code to npm (which is node specific)?

[williamernest]

Rails users still use npm to install their node dependencies and then use rubysass to compile their sass files. Rubysass doesn't support the tilde. We do have users that are using rails and our components.

@CasperGrey Can you tell me what you've tried or reproduce it in a separate repo? I'd like to get you working but it's sometimes easier to just look at the code.

[jantimon]

Here is the create-react-app (CRA) webpack.config.js (which can't be changed unless you eject):

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js

[williamernest]

Here's the MDC React workaround for compiling sass without ejecting.

https://github.com/material-components/material-components-web-react/blob/master/README.md#step-3-using-sass

[robcaldecott]

@CasperGrey Here is a sample ejected CRA2 project that uses MDC SASS/RMWC.

https://github.com/robcaldecott/rmwc-cra2-example

The trick is the following change to the webpack config to include appNodeModules

webpack.config.dev.js, line 62

if (preProcessor) {
    loaders.push({
      loader: require.resolve(preProcessor),
      options: { includePaths: [paths.appNodeModules] }
    });
  }

webpack.config.prod.js, line 87

if (preProcessor) {
    loaders.push({
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: shouldUseSourceMap,
        includePaths: [paths.appNodeModules]
      }
    });
  }

[robcaldecott]

FWIW I might publish a CRA2 react-scripts fork with this change so anyone can use it without ejecting.

[robcaldecott]

@CasperGrey here you go (forked CRA2):

yarn create react-app my-app --scripts-version mdc-react-scripts

You can import the Material SASS without it throwing errors. HTH.

[moog16]

@CasperGrey nice work! I tried it out and can confirm it works. Do you intend to open a PR to the official CRA?

[jantimon]

How will this work with mono repo approaches like lerna?
There you would have multiple node_modules directories.

[robcaldecott]

@moog16 Someone tried a similar PR for CRA2 but it was rejected and they cited the ~ syntax that people can use (which does not work with MDC, see above.)

@jantimon I've just pushed 2.1.0 of mdc-react-scripts that includes the latest create-react-app 2.1.0 features (TypeScript!) and adds support for yarn workspaces (where mdc-react-scripts ends up hoisted.) I have not tried lerna but it might work.

[robcaldecott]

@jantimon I just tried lerna (with and without --hoist) and it works.

[moog16]

@robcaldecott can you share the PR you're talking about?

[robcaldecott]

@moog16 This one: facebook/create-react-app#5011

However, there is a new PR in flight which prompted a discussion about supporting SASS_PATH (which I didn't know about until today!)

facebook/create-react-app#5599

It would be good to not have to eject or fork. Another option is react-app-rewired I guess.

[kfranqueiro]

There's also facebook/create-react-app#4494 which looks relevant.

On a quick glance it looks like node-sass does support SASS_PATH... interestingly, it looks like dart-sass might not currently? (Update: Logged sass/dart-sass#512)

I'm a tiny bit concerned of the usability of SASS_PATH if it needs to be absolute paths, when node_modules are installed locally to a given project, but it might be a start...

[robcaldecott]

@kfranqueiro I just tried the SASS_PATH trick in a vanilla CRA2 install (by modifying node_modules/react-scripts/config/env.js directly as mentioned in that PR) and it works. I set SASS_PATH to ./node_modules, so relative paths look OK.

It will be interesting to see what happens to that PR.

[moog16]

Closed this issue since we updated our guidelines in material-components/material-components-web-react#393. This is a step-by-step guide on how to setup CRA-2 on Linux, MacOSX, and Windows and use MDC Web and React Sass files.

Please find new steps in the React Repo's README.

Also Thanks @robcaldecott for figuring out the SASS_PATH! All the credit goes to you.