Requiring MDC-Web (material-components-web) fails

[michel-zimmer]

Requiring a scss file coming from a Node.js module fails.

MCVE (updated version to show, that the problem lies in webpacker):

rails _5.1.0_ new webpacker-mdc-mcve --webpack --skip-git --skip-keeps --skip-action-mailer --skip-active-record --skip-action-cable --skip-sprockets --skip-spring --skip-listen --skip-coffee --skip-turbolinks
cd webpacker-mdc-mcve
yarn add @material/animation
echo "import './material.scss'" > app/javascript/packs/material.js
echo '@import "@material/animation/mdc-animation.scss"' > app/javascript/packs/material.scss
bin/webpack

Error message:

ERROR in ./~/css-loader?{"minimize":false}!./~/postcss-loader!./~/sass-loader/lib/loader.js!./app/javascript/packs/material.scss
Module build failed: 
@import "@material/animation/mdc-animation.scss"
^
      File to import not found or unreadable: @material/animation/mdc-animation.scss.
Parent style sheet: stdin
      in /home/mzimmer/Desktop/webpacker-mdc-mcve/app/javascript/packs/material.scss (line 1, column 1)
 @ ./app/javascript/packs/material.scss 4:14-188

But the file (node_modules/@material/animation/mdc-animation.scss) exists.

Using a fully qualified relative path works:

rails _5.1.0_ new webpacker-mdc-mcve --webpack --skip-git --skip-keeps --skip-action-mailer --skip-active-record --skip-action-cable --skip-sprockets --skip-spring --skip-listen --skip-coffee --skip-turbolinks
cd webpacker-mdc-mcve
yarn add @material/animation
echo "import './material.scss'" > app/javascript/packs/material.js
echo '@import "../../../node_modules/@material/animation/mdc-animation.scss"' > app/javascript/packs/material.scss
bin/webpack

My expected behaviour is, that both cases do not fail. How do other people think about this? If it's not just me, than I would label this as a bug.

Following is the old example. It is still relevant, becaus it shows, how dependencies are specified in major packages (in the exact same way). Another indicator, that webpacker should be able to handle this case.

rails _5.1.0_ new webpacker-mdc-mcve --webpack --skip-git --skip-keeps --skip-action-mailer --skip-active-record --skip-action-cable --skip-sprockets --skip-spring --skip-listen --skip-coffee --skip-turbolinks
cd webpacker-mdc-mcve
yarn add material-components-web
echo "import 'material-components-web/material-components-web.scss';" > app/javascript/packs/material.js
bin/webpack

Resulting files: webpacker-mdc-mcve.zip

Error message (Full error message: webpack.log.txt):

ERROR in ./~/css-loader?{"minimize":false}!./~/postcss-loader!./~/sass-loader/lib/loader.js!./~/material-components-web/material-components-web.scss
Module build failed: 
@import "@material/animation/mdc-animation";
^
      File to import not found or unreadable: @material/animation/mdc-animation.
Parent style sheet: stdin
      in /home/mzimmer/Desktop/webpacker-mdc-mcve/node_modules/material-components-web/material-components-web.scss (line 17, column 1)
 @ ./~/material-components-web/material-components-web.scss 4:14-146
 @ ./app/javascript/packs/material.js

[gauravtiwari]

@michel-zimmer It seems like a bug with the module you are using - @import "@material/animation/mdc-animation"; It can't find this file. Perhaps you would like to ask this on the module repo?

Btw have you followed this guide? - https://github.com/material-components/material-components-web#installing-individual-components

[michel-zimmer]

@gauravtiwari Thank you, but unfortunately it is not a bug in the module. The file (node_modules/@material/animation/mdc-animation.scss) exists.

And I've followed the guide: The simplest way is to require the entire material-components-web package.
But to double check I've now also required @material/animation with the same result. (Which makes sense to me, because the specific package (and with it the "missing" file) was required anyway.)

To me it looks like the include paths in webpacker are not complete. Maybe node_modules is not included. If that's the case, then it looks like an actual bug to me, because I would expect that behavior.

[michel-zimmer]

@gauravtiwari I've updated the issue. It uses a more precise example now and shows (as far as I can tell) that the problem comes from webpacker.

[gauravtiwari]

@michel-zimmer Could you please change this in webpack/shared.js to this?

  resolve: {
    extensions: paths.extensions,
    modules: [
      resolve(paths.source),
      'node_modules' // this was absolute before
    ]
  },

[michel-zimmer]

@gauravtiwari Unfortunately it has the same result.

[michel-zimmer]

Using @import "node_modules/@material ... works fine (despite not being what we are looking for).
-suggested by @mspl13

MCVE:

rails _5.1.0_ new webpacker-mdc-mcve --webpack --skip-git --skip-keeps --skip-action-mailer --skip-active-record --skip-action-cable --skip-sprockets --skip-spring --skip-listen --skip-coffee --skip-turbolinks
cd webpacker-mdc-mcve
yarn add @material/animation
echo "import './material.scss'" > app/javascript/packs/material.js
echo '@import "node_modules/@material/animation/mdc-animation.scss"' > app/javascript/packs/material.scss
bin/webpack

[gauravtiwari]

Ohh I see, you would need to do this if you are importing within your sass files -

//  ~ to tell webpack that this is not a relative import:
@import '~@material/animation/mdc-animation.scss'

[michel-zimmer]

Ah, I see. Then it is the expected behaviour and not a bug in webpacker (or webpack itself). Heading over to MDC-Web people for a solution.

[michel-zimmer]

In the future, a solution could possibly be somewhere in here: material-components/material-components-web#351

For now my solution with a lot of warnings is the following:

diff --git a/config/webpack/loaders/sass.js b/config/webpack/loaders/sass.js
index faba9d5..33dd3a5 100644
--- a/config/webpack/loaders/sass.js
+++ b/config/webpack/loaders/sass.js
@@ -1,9 +1,15 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const { paths } = require('../configuration.js')
 
 module.exports = {
   test: /\.(scss|sass|css)$/i,
   use: ExtractTextPlugin.extract({
     fallback: 'style-loader',
-    use: ['css-loader', 'postcss-loader', 'sass-loader']
+    use: ['css-loader', 'postcss-loader', {
+      loader: 'sass-loader',
+      options: {
+        includePaths: [paths.node_modules]
+      }
+    }]
   })
 }

[gauravtiwari]

Document this in README/Guide - #372

[michel-zimmer]

Just in case, somebody looks here for a solution. With Webpacker 3 a similar fix might look like this:

diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index d16d9af..a5c26e4 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,3 +1,12 @@
 const { environment } = require('@rails/webpacker')
+const merge = require('webpack-merge')
+
+const sassLoaderOptions = {
+  includePaths: environment.toWebpackConfig().resolveLoader.modules
+}
+
+const CSSLoader = environment.loaders.get('style').use.find(el => el.loader === 'sass-loader')
+
+CSSLoader.options = merge(CSSLoader.options, sassLoaderOptions)
 
 module.exports = environment

For more details see here: https://github.com/rails/webpacker/blob/master/docs/webpack.md#overriding-loader-options-in-webpack-3-for-css-modules-etc