Error: resolve-url-loader cannot operate: CSS error base64 is not a function

[hashemian]

Hi there,

I have a webpack config which converts some scss files to css. The config was not done by me so I cannot describe the details, but here is how it looks like:

var styleModule = {
  context: __dirname,
  entry: {
    myStyle: './static/myStyle/myStyle.scss'
  },
  output: {
    filename: '[name].js',
    path: './static/css/',
    library: '[name]'
  },
  resolve: {
    extensions: ['', '.js']
  },
  devtool: '#source-map',
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!resolve-url!sass-loader?sourceMap')
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
      }
    ]
  },
  postcss: [autoprefixer({browsers: ['> 2%']})],
  plugins: [
    new ExtractTextPlugin('[name].css', {
      allChunks: true
    })
  ]
};

My installed npm packages are the following:

├── autoprefixer@6.7.7
├── bootstrap-sass@3.3.7
├── bower@1.8.4
├── css-loader@0.23.1
├── extract-text-webpack-plugin@1.0.1
├── file-loader@0.9.0
├── ng-annotate-webpack-plugin@0.1.3
├── node-sass@4.9.0
├── postcss-loader@0.10.1
├── resolve-url@0.2.1
├── resolve-url-loader@1.6.1
├── sass-loader@4.1.1
├── style-loader@0.13.2
├── webpack@1.15.0
└── webpack-dev-server@1.16.5

It used to work just fine, but now that I checked out the project again, did an npm install and a webpack --progress, here is my output:

Child extract-text-webpack-plugin:
        + 2 hidden modules

    WARNING in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./static/myStyle/myStyle.scss
      resolve-url-loader cannot operate: CSS error
      base64 is not a function
      at Function.from (native)

I could not find any base64 in the css files generated up to that point, in case it could be similar to this issue. I also checked this issue, and the related patch. But it seems all versions of postcss installed have this patch.

Any idea what might be the issue? Thanks a lot.

[hashemian]

I could resolve this issue by simply updating my node and npm. Before, I was using node 5.0.0 and npm 3.8.8. When I updated them to node 8.11.2 and npm 5.6.0, webpack works just as expected without any error. I'm unsure how updates to the node/npm helped though!

I do have package-lock.json, but I could not find using my npm (v3.8.8), how I can enforce installing only based on that. I'm thinking maybe updating npm led to package-lock.json being properly used and now things work again?

[bholloway]

@hashemian sorry for the delay.

Firstly I suggest that you change resolve-url to resolve-url-loader.

You are in the very common situation where you use package resolve-url and resolve-url-loader. This will break webpack. I realise you didn't originate this config but pro-tip: always specify the full name of the loaders.

This is the source of hard-to-diagnose problems. So please fix that first and eliminate that as the root cause.

[hashemian]

Thanks, Ben. I agree with your point. I read it elsewhere as well and changed the resolve-url to resolve-url-loader. But it didn't help. Eventualy, using a different node/npm version fixed the issue. Thanks for your comment.