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.