Unable to run loader - Githubissues

EnriqueVidal commented 8 years ago

Hi,

I just added resolve-url-loader into my webpack config to try and add images and fonts to my css, however when I run webpack my build fails (I can get it to pass by removing resolve-url-loader) this is the error I see:

/Users/enrique/Desktop/tkd-node/node_modules/webpack-core/lib/LoadersList.js:81
        r.forEach(function(r) {
          ^

TypeError: r.forEach is not a function
    at /Users/enrique/Desktop/tkd-node/node_modules/webpack-core/lib/LoadersList.js:81:5
    at Array.reduce (native)
    at LoadersList.match (/Users/enrique/Desktop/tkd-node/node_modules/webpack-core/lib/LoadersList.js:80:27)
    at /Users/enrique/Desktop/tkd-node/node_modules/webpack/lib/NormalModuleFactory.js:111:68
    at /Users/enrique/Desktop/tkd-node/node_modules/async/lib/async.js:726:13
    at /Users/enrique/Desktop/tkd-node/node_modules/async/lib/async.js:52:16
    at async.forEachOf.async.eachOf (/Users/enrique/Desktop/tkd-node/node_modules/async/lib/async.js:236:30)
    at _parallel (/Users/enrique/Desktop/tkd-node/node_modules/async/lib/async.js:717:9)
    at Object.async.parallel (/Users/enrique/Desktop/tkd-node/node_modules/async/lib/async.js:731:9)
    at /Users/enrique/Desktop/tkd-node/node_modules/webpack/lib/NormalModuleFactory.js:75:10
    at /Users/enrique/Desktop/tkd-node/node_modules/webpack/lib/NormalModuleFactory.js:28:4
    at /Users/enrique/Desktop/tkd-node/node_modules/webpack/lib/NormalModuleFactory.js:159:3
    at NormalModuleFactory.<anonymous> (/Users/enrique/Desktop/tkd-node/node_modules/tapable/lib/Tapable.js:82:11)
    at /Users/enrique/Desktop/tkd-node/node_modules/npm-install-webpack-plugin/src/plugin.js:49:7
    at /Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:29:4
    at onResolved (/Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/Resolver.js:39:10)
    at /Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/Resolver.js:123:21
    at /Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/Resolver.js:191:15
    at applyPluginsParallelBailResult.createInnerCallback.log (/Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/Resolver.js:104:30)
    at loggingCallbackWrapper (/Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
    at /Users/enrique/Desktop/tkd-node/node_modules/tapable/lib/Tapable.js:134:6
    at innerCallback (/Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/Resolver.js:90:37)
    at loggingCallbackWrapper (/Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
    at /Users/enrique/Desktop/tkd-node/node_modules/tapable/lib/Tapable.js:134:6
    at Tapable.<anonymous> (/Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/ResultSymlinkPlugin.js:39:32)
    at /Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/Resolver.js:191:15
    at /Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/ResultSymlinkPlugin.js:36:5
    at Storage.finished (/Users/enrique/Desktop/tkd-node/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at FSReqWrap.oncomplete (fs.js:82:15)

This is my webpack config:

const path    = require('path');
const webpack = require('webpack');
const merge   = require('webpack-merge');

var HtmlWebpackPlugin = require('html-webpack-plugin');

// Install missing plugins
const NpmInstallPlugin = require('npm-install-webpack-plugin');

const PATHS = {
  app:    path.join( __dirname, 'app' ),
  build:  path.join( __dirname, 'build' )
}

const TARGET = process.env.npm_lifecycle_event;

process.env.BABEL_ENV = TARGET;

const common = {
  entry: [
    //'bootstrap-loader/extractStyles',
    'bootstrap-loader',
    PATHS.app
  ],

  // Add resolve.extensions
  // '' is needed to allow imports without an extension.
  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  output: {
    path:       PATHS.build,
    filename:   'bundle.js',
    publicPath: path.resolve(__dirname, 'build')
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,

        // Enable caching for improved performance during development
        // It uses default OS directory by default. If you need something
        // more custom, pass a path to it. i.e. babel?cacheDirectory=<path>
        loader: 'babel?cacheDirectory',

        // Parse only app files
        include: PATHS.app
      },

      {
        test: /\.scss$/,
        loaders: [ "style", "css", "resolve-url", "sass?sourceMap" ]
      },

      {
        test: /\.woff2?(\?v=[0-9]\.[0.9]\.[0-9])?$/,
        loader: "url?limit=10000"
      },

      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        loader: 'file'
      },

      {
        test: /bootstrap-sass\/assets\/javascripts\//,
        loader: 'imports?jQuery=jquery'
      },

      {
        test: /\.(jpg|gif|png)$/,
        loaders: 'url?limit=25000'
      }
    ]
  },

  sassLoader: {
    includePaths: [ path.resolve(__dirname, 'app/css'), path.resolve( __dirname, "node_modules/compass-mixins/lib/compass" ) ],
  },

  devServer: {
    contentBase: PATHS.build,

    // Enable history API fallback
    historyApiFallback: true,
    hot:      true,
    inline:   true,
    progress: true,

    // Display only errors
    starts: 'errors-only',

    // Parse host and port from env so this is easy to customize
    //
    // If you use Vagrant or Cloud9, set
    // host: process.env.HOST || '0.0.0.0'
    //
    host: process.env.HOST,
    port: process.env.PORT

  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({ template: 'app/index.html' }),
    new NpmInstallPlugin({
      save: true // --save
    })
  ]
};

if ( TARGET === 'start' || ! TARGET ) {
  module.exports = merge(common, {
    devtool: 'eval-source-map',
  });
}

if ( TARGET === 'build' ) {
  module.exports = merge(common, {});
}

In my current directory structure I have this:

app/css/
├── application.scss
├── fonts
│   ├── pt_sans_bold.eot
│   ├── pt_sans_bold.svg
│   ├── pt_sans_bold.ttf
│   ├── pt_sans_bold.woff
│   ├── raleway_regular.eot
│   ├── raleway_regular.svg
│   ├── raleway_regular.ttf
│   ├── raleway_regular.woff
│   ├── raleway_semibold.eot
│   ├── raleway_semibold.svg
│   ├── raleway_semibold.ttf
│   ├── raleway_semibold.woff
│   ├── raleway_thin.eot
│   ├── raleway_thin.svg
│   ├── raleway_thin.ttf
│   └── raleway_thin.woff
├── img
│   ├── accordion_background.png
│   ├── halftone-pattern.jpg
│   ├── header_pattern.jpg
│   ├── sprite_galeria.png
│   ├── sprite_general.png
│   └── sprite_taekwondo.png
└── layout
    ├── _icon.scss
    └── _setup.scss

And this is the way I'm trying to load files from my css files at app/css/layout:

.icon{
  background: url(../img/sprite_general.png) 0 0 no-repeat;
  position: relative;
}

I'm really confused at this point and am fairly new to webpack any idea is more than welcomed.

bholloway commented 8 years ago

Some questions

what version of webpack are you using?
it seems you are running webpack dev server, is that correct?
Is this project open source?

There is at least one unresolved problem with webpack dev server because I don't have such a project to test with.

In that case it would definitely help if you can give an open source example of the problem

EnriqueVidal commented 8 years ago

webpack version is 1.12.14
Yes I'm using webpack-dev-server
The project is under a private repository

Unfortunately I can't share the access to this project repository :disappointed:, however project won't build by simply running webpack either

EnriqueVidal commented 8 years ago

Found the issue, I typed loaders: instead of loader: in the image module match, thanks for your help.

bholloway commented 8 years ago

Hey no problem @EnriqueVidal.

I just refreshed my memory on #11 and it seems that the webpack-dev-server problem is on Windows. Let me know if you encounter it and we can work through.

EnriqueVidal commented 8 years ago

Not sure what you meant about webpack-dev-server the problem I had was in my webpack.config.js file apparently using loaders: instead of loader: breaks webpack

bholloway / resolve-url-loader

Unable to run loader #18