Module build failed: Error: resolve-url-loader: CSS error

[netdjw]

Hi,

I have a strange malfunction with resolve-url-loader. I have this webpack.config.js:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: ['./src/main.js', './src/main.scss'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { minimize: true, sourceMap: true } },
            { loader: 'resolve-url-loader', options: { sourceMap: true } },
            { loader: 'sass-loader', options: { sourceMap: true } },
            
          ]
        })
      },

      {
        test: /\.(jpg|png|gif|ico|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {name: '[name].[ext]', publicPath: 'img/', outputPath: 'img/'}
        }]
      },

      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              interpolate: true
            }
          }
        ]
      }
    ]
  },
  plugins: [

    new ExtractTextPlugin({ // define where to save the file
      filename: 'style.css',
      allChunks: true,
    }),

    new HtmlWebpackPlugin({
      template: './src/main.html',
      filename: 'index.html'
    }),

    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })

  ],
};

this is the package.json file:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:watch": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "resolve-url-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^3.9.1"
  },
  "dependencies": {
    "bootstrap": "^4.1.3",
    "jquery": "^3.3.1",
    "owl.carousel": "^2.3.4",
    "popper.js": "^1.14.4"
  }
}

In the SCSS file I have this line what is the reason of the problem:

background-image: url('img/hero-slider-arrow.png');

I tried to change this line to this one:

background-image: url('data:image/png;base64,iVBORw0KGgoAAAA...==');

And in both case I got this error message:

ERROR in ./node_modules/css-loader??ref--0-1!./node_modules/resolve-url-loader??ref--0-2!./node_modules/sass-loader/lib/loader.js??ref--0-3!./src/main.scss
    Module build failed: Error: resolve-url-loader: CSS error
      source-map information is not available at url() declaration
      at file://d:\LARAVEL\Code\my-project\src\main.scss:7252:5
        at encodeError (d:\LARAVEL\Code\my-project\node_modules\resolve-url-loader\index.js:218:12)
        at onFailure (d:\LARAVEL\Code\my-project\node_modules\resolve-url-loader\index.js:175:14)
        at process._tickCallback (internal/process/next_tick.js:68:7)

Doublechecked the image file is on that path what is given. But if I use data:image/png solution... same error message. I don't understand what is the problem.

The other images working fine with similar url('img/filename.png') format.

Any idea?

[bholloway]

At first glance I see nothing wrong in your config. From memory that error implies the source map fails a lookup at that particular statement. But I am not sure that helps us. Data uris are not processed which implies the problem may not be that line. Try removing that line or at least that URL and make absolutely sure that’s the problem. Also try the debug option and see if that helps confirm your understanding of what urls are being considered. My apologies if you have already done this. Just my first thoughts.

[netdjw]

Thanks, I did these things, and nothing userful in debug mode.

I tried to turn off the sourceMap too, it isn't help.

[netdjw]

And one more thing: I use several background-images in several other files in this project, and those works fine. Those files hasn't any difference (except the file names of course).

I suspect a bug in resolve-url-loader, because this malfunction came out earlier but it was gone. I belived my colleges solved the problem, but now I asked them, and nobody solved it. Simply just gone. Strange.

[asbjornh]

I'm getting the same error after upgrading, but only on windows. on MacOS it builds just fine.

In my project i use import-glob. When I use a url() in the main SCSS entry point, this error doesn't occur when building on windows. It only happens when using url() in one of the files imported through import-glob. Don't know if that helps

Using resolve-url-loader@3.0.0, webpack@4.22.0 and sass-loader@7.1.0

[asbjornh]

(Also, downgrading to 2.3.1 solves the issue)

[bholloway]

"Simply just gone. Strange."

@netdjw I interpreted this as the problem went away. Is this still a problem with you? Is this a problem with your colleagues?

[bholloway]

Just reacquainting myself with the code. It looks like any url() will require the source-map to be valid at that location. See this code here.

This happens before we look further at the url() to see if we want to process it. So that would explain why @netdjw still gets the error with a data URI.

@asbjornh @netdjw I need some more data. Some ideas...

• I'm presuming you're working on closed source. Is there any chance you can construct a minimum failing example, open source?
• Can you try adjust-sourcemap-loader with debug mode in between sass-loader and resolve-url-loader. It will display the incoming source-map sources.

My current theory is that there is some upstream problem with the source-map sources. You should look to see it includes all the files you are compiling.

[asbjornh]

Yeah, I'll see if I get the time to create a minimum example during this week :)

[asbjornh]

Still working on narrowing this down, but it’s starting to look like an upstream error that’s not properly handled like you suggested. Right now I have a huge mixin (without any url calls), and when I remove it, the build runs fine. When it’s included, the build crashes with an error message from resolve-url-loader.

[asbjornh]

Ok this is quite weird. I've narrowed it down as far as I can I think. This setup fails with the above mentioned error on Windows 10, Node 8.11.4. The exact same setup builds fine on MacOS.

As you can see in style.scss below, there is a calc with a line break and extra parentheses inside of it. Remove the line breaks or the parentheses and the build succeeds. This is, of course, a really contrived example, but that calc originally contained some really verbose math. I use VS Code with autoFormat enabled, so a line break was inserted automatically.

I also tried downgrading to resolve-url-loader@2.3.1. The build succeeded (on Windows). The generated css file is at the very bottom of this post. Also, removing resolve-url-loader altogether makes the build succeed. When building without resolve-url-loader, the resulting css file is identical to the one with resolve-url-loader@2.3.1 in the build pipeline.

webpack.config.js

/* eslint-env node */
/* eslint-disable no-console */
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = () => {
  return {
    devtool: "source-map",
    entry: { style: "./style.scss" },
    output: {
      path: path.resolve(__dirname, "dist")
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: ExtractTextPlugin.extract([
            {
              loader: "css-loader",
              options: {
                importLoaders: 1,
                sourceMap: true
              }
            },
            { loader: "resolve-url-loader", options: { sourceMap: true } },
            { loader: "adjust-sourcemap-loader", options: { debug: true } },
            { loader: "sass-loader", options: { sourceMap: true } }
          ])
        },
        {
          test: /\.svg$/,
          use: { loader: "file-loader" }
        }
      ]
    },
    plugins: [new ExtractTextPlugin("[name].[chunkhash].css")]
  };
};

package.json

{
  "name": "example",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "webpack --mode=production"
  },
  "dependencies": {
    "adjust-sourcemap-loader": "^1.2.0",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.5.1",
    "resolve-url-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2"
  }
}

style.scss

body {
  font-size: calc(
    (1px)
  );
  background-image: url(./image.svg);
}

Shell output:

adjust-sourcemap-loader:
  ##path##\style.scss
        @ ##path##\node_modules\sass-loader\lib\loader.js??ref--4-4
    INPUT style.scss
 ABSOLUTE ##path##\style.scss

adjust-sourcemap-loader:
  ##path##\style.scss
        @ ##path##\node_modules\sass-loader\lib\loader.js?{"sourceMap":true}
    INPUT style.scss
 ABSOLUTE ##path##\style.scss
Hash: c18a8a717939eec50edc
Version: webpack 4.22.0
Time: 616ms
Built at: 2018-10-24 20:15:21
 2 assets
Entrypoint style = style.js style.js.map
[0] ./style.scss 1.69 KiB [built] [failed] [1 error]

ERROR in ./style.scss
Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration
  at file://##path##\style.scss:4:3
    at encodeError (##path##\node_modules\resolve-url-loader\index.js:218:12)
    at onFailure (##path##\node_modules\resolve-url-loader\index.js:175:14)
    at <anonymous>
    at runMicrotasksCallback (internal/process/next_tick.js:121:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at runLoaders (##path##\node_modules\webpack\lib\NormalModule.js:286:20)
    at ##path##\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at ##path##\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (##path##\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at onFailure (##path##\node_modules\resolve-url-loader\index.js:175:5)
    at <anonymous>
    at runMicrotasksCallback (internal/process/next_tick.js:121:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./style.scss

Generated css file with resolve-url-loader@2.3.1. The url points to the correct svg file in the build folder.

body {
  font-size: calc(
 (1px));
  background-image: url(7b56e1eab00ec8000da9331a4888cb35.svg);
}


/*# sourceMappingURL=style.9e5ee3d7a184f4b00938.css.map*/

[bholloway]

This is some really good work @asbjornh!

The resolve-url-loader@2.3.1 uses rework engine. So maybe also try resolve-url-loader@3.0.0 with engine:rework. That downgrades you from postcss back to rework but keeps the newly refactored/tested code.

🤔I guess the sources look normal. I suspect something to do with the different line break characters in Windows, CR and LF together unless I am mistaken.

I am wondering if @netdjw can point to similar code. Is the same problem you both have or 2 different problems.

For my part I will create a test case for this as soon as I get some time. In the mean time please let me know if the engine-only downgrade helps you for now.

[asbjornh]

Yep! engine: "rework" also solves this! :)

[bholloway]

@asbjornh as an outside chance take a look at the linefeed option in node-sass. You should be able to set this in sass-loader options. Default is lr so maybe try crlf (i.e. windows).

EDIT - although surely this must be something in postcss for this to not be an issue in rework.

[bholloway]

Looking at postcss tokenizer, it looks to me that CRLF (windows) would result in two line breaks instead of one.

But how this would make the source-map unusable I am unsure. 🤔