CODEWITHSUNDEEP
sasswebpack-2
piaaaac
piaaaac

Reputation: 61

webpack2 sass-loader – Module not found: Error: Can't resolve '' (empty string)

I'm having a hard time loading a sass file with webpack2. At least I think that's the problem because if I comment out the sass loading row the error doesn't appear.

This is how I load the sass file from App.jsx require('./../../style/style.scss')

I get the following error:

ERROR in ./src/components/App.jsx
Module not found: Error: Can't resolve '' in '/Users/user/code/my_site.com'
resolve '' in '/Users/user/code/my_site.com'
  using description file: /Users/user/code/my_site.com/package.json (relative path: .)
  after using description file: /Users/user/code/my_site.com/package.json (relative path: .)
    using description file: /Users/user/code/my_site.com/package.json (relative path: .)
      no extension
        /Users/user/code/my_site.com is not a file
      .js
        /Users/user/code/my_site.com.js doesn't exist
      .json
        /Users/user/code/my_site.com.json doesn't exist
      as directory
        existing directory
          using path: /Users/user/code/my_site.com/index
            using description file: /Users/user/code/my_site.com/package.json (relative path: ./index)
              no extension
                /Users/user/code/my_site.com/index doesn't exist
              .js
                /Users/user/code/my_site.com/index.js doesn't exist
              .json
                /Users/user/code/my_site.com/index.json doesn't exist
          use ./index.js from main in package.json
            using description file: /Users/user/code/my_site.com/package.json (relative path: .)
            after using description file: /Users/user/code/my_site.com/package.json (relative path: .)
              using description file: /Users/user/code/my_site.com/package.json (relative path: ./index.js)
                as directory
                  /Users/user/code/my_site.com/index.js doesn't exist
                no extension
                  /Users/user/code/my_site.com/index.js doesn't exist
                .js
                  /Users/user/code/my_site.com/index.js.js doesn't exist
                .json
                  /Users/user/code/my_site.com/index.js.json doesn't exist
[/Users/user/code/my_site.com]
[/Users/user/code/my_site.com.js]
[/Users/user/code/my_site.com.json]
[/Users/user/code/my_site.com/index]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.js]
[/Users/user/code/my_site.com/index.json]
[/Users/user/code/my_site.com/index.js.js]
[/Users/user/code/my_site.com/index.js.json]
 @ ./src/components/App.jsx 33:0-35
 @ ./src/index.jsx
 @ multi ./src/index.jsx ./src/index.jsx

My webpack.config:

var webpack = require("webpack")
var path = require("path")
module.exports = {
  entry: './src/index.jsx',
  output: { path: path.join(__dirname, "./build/"), filename: 'bundle.js' },
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /^((?!config).)*\.jsx?$/, loader: 'babel-loader',
        exclude: /node-modules/,
        query: { presets: ['es2015', 'react'] }
      },
      { test: /\.css$/, loader: 'style-loader!css-loader!' }, 
      { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader!?sourceMap=true' }, 
      { test: /\.(woff|woff2)$/,  loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf$/, loader: "file-loader" },
      { test: /\.eot$/, loader: "file-loader" },
      { test: /\.svg$/, loader: "file-loader" }
    ]
  }
}

I also tried using the new rules: ... - use: ... syntax but without luck. Maybe I'm missing something on how loaders work?

Upvotes: 1

Views: 5658

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32982

You can chain multiple loaders by separating them with a !. For instance style-loader!css-loader would pass it through both css-loader and style-loader. Note that there is no ! after the last loader. So by adding that trailing ! you tell webpack that whatever comes after it, is a loader, which is the empty string.

For your .css files it's immediately noticeable, but in your .scss config it is much more subtle because you add an option with the ?sourceMap=true. To fix your problem you need to remove the ! after the last loader:

{ test: /\.css$/, loader: 'style-loader!css-loader' }, 
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap=true' },

Webpack 2 now also provides the possibility to specify a list of loaders, which makes it much easier to read https://webpack.js.org/guides/migrating/#chaining-loaders

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, 
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader?sourceMap=true']
},

Additionally this allows you to specify options as a JavaScript object instead of having to convert it to a string. So your .scss loader can be written as:

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
},

As shown in https://webpack.js.org/guides/migrating/#what-are-options-

Upvotes: 9

Related Questions