Syntax error with file-loader when upgrading to Webpack 3

Question

I am in process of upgrading to from Webpack 2 to 3 and I'm running into a problem with [email protected]. Here is the error I'm getting:

You may need an appropriate loader to handle this file type.
| export default = __webpack_public_path__ + "foo.css"

(Omitted the full error details for brevity. This is the relevant part.)

Here is the Webpack config:

module: {
  rules: [{
    test: /\.scss$/,
    use: [{
      loader: 'file-loader',
      options: {
        name: '[name].css'
      }
    },
    'extract-loader',
    'css-loader',
    'sass-loader'
    fallback: 'style-loader/url'
  }
}

Before I was using 0.9.0 and there was no error. Looking at the difference between the two versions, I'm seeing that 0.9.0 returns a string that uses a CJS format instead of Harmony.

0.9.0

return "module.exports = " + publicPath + ";";

1.0.0-beta.1

return `export default = ${publicPath};`;

I tried putting babel-loader after file-loader but that didn't fix the issue. I can use 0.9.0 and everything works fine however I would hate to be stuck at that version.

Answer 1

This is a bug in the file-loader beta. The correct syntax for the default export is (the = is not valid in the default export):

export default "/public/path/to/file";

This bug has been fixed, which will be in the next (beta) version. For now, you should use the stable version. Currently, the latest version is 0.11.2.