Material-components-web: File to import not found or unreadable [Vue.js]

[BinaryShrub]

What MDC Web Version are you using?

0.38.1

What OS are you using?

macOS Sierra 10.12.6

What are the steps to reproduce the bug?

1. Create a .vue file and attempt to import @material

<style lang="scss">
@import '@material/list/mdc-list';
@import '@material/fab/mdc-fab';
[...]
</style>

1. Update webpack.config.js to include node_modules

// webpack.config.js
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            includePaths: ['./node_modules']
          }
        }
      ]
    }
  }
}

1. npm run build
   

   What is the actual behavior?

ERROR in ./src/pages/Home.vue?vue&type=style&index=0&id=5a90ec03&lang=scss&scoped=true& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Home.vue?vue&type=style&index=0&id=5a90ec03&lang=scss&scoped=true&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '@material/list/mdc-list';
^
      File to import not found or unreadable: @material/list/mdc-list.
      in [...]/src/pages/Home.vue (line 61, column 1)

Any other information you believe would be useful?

// package.json
{
  "vue-loader": "^15.4.1"
  "vue-style-loader": "^4.1.2",
  "node-sass": "^4.9.3",
  "sass-loader": "^7.1.0",
}

Related to 1175

I also filed an issue against vue-loader here

[BinaryShrub]

Here is a basic example of the problem: https://github.com/BinaryShrub/webpack-vue-mdc

In my repo I have two commits, the first is webpack + vue + scss, and the second is my attempt at using an mdc button: https://github.com/BinaryShrub/webpack-vue-mdc/commit/c9fff8c383d0ed1a02a0a60356af18f740d7c385

[fbarbare]

I'm facing the same issue using CRA, it seems the problem comes from the import because the package starts with an @ ...

[kfranqueiro]

I looked at the example repo, and while a couple of your sass-loader configs set includePaths, the others don't. When I configure includePaths for all of them, npm run build succeeds.

[BinaryShrub]

Can you share the webpack.config.js you used?

[kfranqueiro]

I replaced this:

      {
        test: /\.scss$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.sass$/,
        use: ["vue-style-loader", "css-loader", "sass-loader?indentedSyntax"]
      }

with this:

      {
        test: /\.scss$/,
        use: [
          "vue-style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              includePaths: ["./node_modules"]
            }
          }
        ]
      },
      {
        test: /\.sass$/,
        use: [
          "vue-style-loader",
          "css-loader",
          {
            loader: "sass-loader?indentedSyntax",
            options: {
              includePaths: ["./node_modules"]
            }
          }
        ]
      }

(FWIW I'm not sure you even need the .sass block, unless you're really using the old pre-scss format somewhere.)

[BinaryShrub]

Thanks for the help! I updated my repo and removed both the sass rule as well as the complexity in the vue rule.

Here is my full webpack.config.js for anyone else who may run into this same corner:

"use strict";

const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  mode: "development",
  entry: ["./app.js"],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"]
      },
      {
        test: /\.scss$/,
        use: [
          "vue-style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              includePaths: ["./node_modules"]
            }
          }
        ]
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
};

[vaaski]

this is how i did it for the vue-cli 3

// vue.config.js
module.exports = {
  configureWebpack: config => {
    config.resolve.alias["vue-mdc-adapter"] = "vue-mdc-adapter/dist/"
  },
  chainWebpack: config => {
    config.module
      .rule("scss")
      .oneOf("vue-modules")
      .use("sass-loader")
      .tap(args => {
        args.includePaths = ["./node_modules"]
        return args
      })
  },
  css: {
    loaderOptions: {
      sass: {
        includePaths: [path.resolve(__dirname, "node_modules")],
      },
    },
  },
}

[divee789]

what is the path definition

[divee789]

this is how i did it for the vue-cli 3

// vue.config.js
module.exports = {
  configureWebpack: config => {
    config.resolve.alias["vue-mdc-adapter"] = "vue-mdc-adapter/dist/"
  },
  chainWebpack: config => {
    config.module
      .rule("scss")
      .oneOf("vue-modules")
      .use("sass-loader")
      .tap(args => {
        args.includePaths = ["./node_modules"]
        return args
      })
  },
  css: {
    loaderOptions: {
      sass: {
        includePaths: [path.resolve(__dirname, "node_modules")],
      },
    },
  },
}

what is the path definition

[vaaski]

sorry, not sure what you mean.

[va3093]

what is the path definition

var path = require('path')

[anlexN]

includePaths: [path.resolve(__dirname, 'node_modules/@syncfusion')]