resolve-url-loader cannot operate: CSS error Cannot read property 'forEach' of undefined

[uralbash]

I'm trying to use resolve-url-loader but get an error:

ERROR in /home/uralbash/Projects/pyramid_sacrud/~/css-loader!/home/uralbash/Projects/pyramid_sacrud/~/resolve-url-loader?fail!/home/uralbash/Projects/pyramid_sacrud/~/sass-loader?sourceMap!./css/materialize.scss
  resolve-url-loader cannot operate: CSS error Cannot read property 'forEach' of undefined

My webpack config:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var STATIC_PATH = path.join(__dirname, './pyramid_sacrud/static/');
var JS_PATH = path.join(STATIC_PATH, 'js');
var CSS_PATH = path.join(STATIC_PATH, 'css');
var NODE_PATH = path.join(__dirname, 'node_modules')                                                  

config = {
  debug: true,
  context: STATIC_PATH,
  include: [path.resolve(JS_PATH)],
  entry: path.join(JS_PATH, 'src', 'main.js'),
  output: {filename: path.join(JS_PATH, 'assets', '__[name].js')},
  resolveLoader: {                                                                                
    root: NODE_PATH,                                                 
  },   
  resolve: {
    unsafeCache: true,
    modulesDirectories: ['node_modules', 'bower_components'],
    alias: {
      'materialize-js': path.join(
        NODE_PATH, '/materialize-css/dist/js/materialize.min.js'
      ),
      'materialize-css': path.join(
        NODE_PATH, '/materialize-css/dist/css/materialize.min.css'
      )
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel?presets=es2015',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css')
      },
      {
        test: /\.scss$/, 
        loaders: ['style', 'css', 'resolve-url?fail', 'sass?sourceMap'],
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        loader: 'file',
        query: {
          name: path.join(STATIC_PATH, 'fonts', '/[name]-[hash].[ext]')
        }
      },
      {
        test: /\.(svg|png)$/,
        loader: 'file',
        query: {
          limit: 10000,
          name: path.join(STATIC_PATH, 'img') + '/[name]-[hash].[ext]'
        }
      }
    ]
  },
  resolveUrlLoader: {
    absolute: '/prefix'
  },
  plugins: [
    new ExtractTextPlugin(path.join(CSS_PATH, '__main.css')),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    })
  ]
}

if (process.env.NODE_ENV == 'production') {
  plugins = [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ]
  config['plugins'].concat(plugins);
  config['debug'] = false;
}
module.exports = config ;

scss file:

$roboto-font-path: "~materialize-sass/font/roboto/";
$icons-font-path: "~materialize-sass/font/material-design-icons/";
@import "~materialize-sass/sass/materialize.scss";

[bholloway]

Hoping this is a quick fix i can do now. Let me take a look.

[uralbash]

@bholloway Thanks for the quick response, I put the latest changes here https://github.com/ITCase/pyramid_sacrud/tree/materializecss

[bholloway]

could you please try 1.4.1 (just published) as it has a little more error logging

meanwhile I am installing from your link

[uralbash]

resolve-url-loader cannot operate: CSS error
Cannot read property 'forEach' of undefined
at visitor (/home/uralbash/Projects/pyramid_sacrud/node_modules/resolve-url-loader/index.js:138:9)

[bholloway]

minor note: missing some items in your package.json

• autoprefixer-loader
• hammerjs

only other error is scss is not found:

@import "~materialize-sass/sass/materialize.scss";

[bholloway]

Perfect stack trace on that error message.

However it indicates a cryptic problem. It means that rework-css visitor function is being presented with a degenerate declaration.

I think I am close to building your project so I will keep going on that track.

[uralbash]

I fixed requirements in last commit. But you can also fix it by hand:

npm i materialize-sass --save-dev

[bholloway]

nice

I'm seeing the error now.

I can spend some minutes on it now. Local time is late here so will have to resume tomorrow if it is not a quick fix.

[bholloway]

ok try 1.4.2 (just published)

Seems that it is possible for rework-visit to be called with missing declarations. I have not encountered that before.

However it seems too easy an explanation. I am concerned that your CSS builds correctly and that there is not some deeper issue.

[uralbash]

Now there is no any errors. As I understand it correctly, the output file __main.css should replace url(... on url(/prefix/filename) (I asked it here http://stackoverflow.com/a/33557469/1026990). But in the output file still full path, see example:

@font-face {
  font-family: "Roboto";
  src: url(/home/uralbash/Projects/pyramid_sacrud/pyramid_sacrud/static/fonts/Roboto-Thin.ttf);
  font-weight: 200;
}

@font-face {
  font-family: "Roboto";
  src: url(/home/uralbash/Projects/pyramid_sacrud/pyramid_sacrud/static/fonts/Roboto-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: "Roboto";
  src: url(/home/uralbash/Projects/pyramid_sacrud/pyramid_sacrud/static/fonts/Roboto-Regular.ttf);
  font-weight: 400;
}

[bholloway]

Will need to look at that link later but I will risk an answer in the mean time.

This loader will find the asset relative to the sass file with the URL statement and then write a URL relative to the compiled CSS file so that webpack can find the asset.

If webpack css loader is adding the asset files to your bundle then all is good. Absence of errors generally means yes.

However you may still need to tweak webpack output to get the final file structure you want.

[bholloway]

I've commented on your stackoverflow issue. Let me know how you are going.

[uralbash]

@bholloway Thanks a lot! output.publicPath was enough for me

[brunolucena]

Solution?