Error loading css-loader upon saving a file

[leovir-roque]

Everything builds fine once I run my build script but I'm getting this upon editing and saving a css file:

ERROR in ./~/css-loader!./~/postcss-loader!./project/static/css/styles.css Module build failed: (SystemJS) ENOENT: no such file or directory, open '/code/node_modules/css-loader/lib/loader' Error: ENOENT: no such file or directory, open '/code/node_modules/css-loader/lib/loader' Error loading /code/node_modules/css-loader/lib/loader as "./lib/loader" from /code/node_modules/css-loader/index.js @ ./project/static/css/styles.css 4:14-127 13:2-17:4 14:20-133 @ multi (webpack)-dev-server/client?http://0.0.0.0:5051 webpack/hot/dev-server ./project/static/css/styles.css webpack: Failed to compile.

Here's my config: var webpack = require("webpack"); var _ = require("lodash");

var CopyWebpackPlugin = require("copy-webpack-plugin") var ManifestRevisionPlugin = require("manifest-revision-webpack-plugin"); var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = function(options) { var jsFilename = "js/[name].js?v=[chunkhash]"; var cssLoader;

if (options.development) { jsFilename = "js/[name].js"; cssLoader = "style-loader!css-loader!postcss-loader"; } else { cssLoader = ExtractTextPlugin.extract({ fallback: "style-loader", loader: "css-loader?minimize=true!postcss-loader" }) }

var plugins = [ new ManifestRevisionPlugin("./project/build/manifest.json", { rootAssetPath: "./project/static", ignorePaths: ["/css", "/js", "/images"], format: function(data, parsedAssets) { var Format = require("manifest-revision-webpack-plugin/format"); var format = new Format(data, parsedAssets);

    var manifest = format.general();
    var assets = {};
    _.forIn(manifest.assets, function(value, originalKey) {
      var key = originalKey;
      if (originalKey.indexOf("?") >= 0) {
        key = originalKey.substring(0, originalKey.indexOf("?"));
      }
      assets[key] = value;
    });
    manifest.assets = assets;
    console.log(manifest);
    return manifest;
  },
}),
new CopyWebpackPlugin([
  {from:"./project/static/images", to:"./images"},
]),
new webpack.optimize.CommonsChunkPlugin({
  name: "common",
  filename: jsFilename,
  minChunks: 2,
}),
new ExtractTextPlugin({
  filename: "css/styles.css",
  allChunks: true
})

];

return { entry: options.entryPoints, devtool: (options.sourcemaps ? "inline-source-map" : undefined),

devServer: {
  proxy: {
    "**": {
      target: "http://web:5000",
      secure: false
    }
  }
},

output: {
  path: __dirname + "/../project/build/",
  publicPath: "/build/",
  filename: jsFilename
},

plugins: plugins,

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      enforce: "pre",
      exclude: /node_modules/,
      loader: "eslint-loader",
    },
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        presets: ["es2015", "react", "stage-0"],
        plugins: ["transform-runtime"],
      }
    },
    {
      test: /\.css$/,
      exclude: /node_modules/,
      loader: cssLoader
    }
  ],
},

}; };

[leovir-roque]

package.json

"devDependencies": { "autoprefixer": "^6.5.4", "autoprefixer-core": "^5.2.1", "babel": "^6.5.2", "babel-core": "^6.24.1", "babel-eslint": "^7.1.1", "babel-loader": "^6.2.10", "babel-polyfill": "^6.23.0", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-rewire": "^1.0.0", "babel-preset-es2015": "6.24.1", "babel-register": "^6.18.0", "browser-request": "^0.3.3", "browsernizr": "^2.0.1", "camelcase": "^2.0.1", "chai": "^3.5.0", "classlist-polyfill": "^1.0.2", "classnames": "^2.1.3", "clone": "^2.1.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.14.5", "cssnext": "^1.8.0", "cssnext-loader": "^1.0.1", "cuid": "^1.3.8", "document-shim": "^1.0.0", "doiuse": "^2.5.0", "dom-delegator": "^13.1.0", "eslint": "^3.12.2", "eslint-config-airbnb-base": "^11.0.0", "eslint-loader": "^1.6.1", "eslint-plugin-import": "^2.2.0", "eventemitter3": "^2.0.2", "exports-loader": "^0.6.2", "extract-text-webpack-plugin": "^1.0.1", "fastclick": "^1.0.6", "file-loader": "^0.9.0", "flux": "^3.1.0", "form-serialize": "^0.7.0", "format-number": "^2.0.0", "google-libphonenumber": "^2.0.7", "gulp": "^3.9.0", "gulp-babel": "6.1.2", "gulp-csslint": "^1.0.0", "gulp-email-builder": "^1.0.4", "gulp-esdoc": "0.3.0", "gulp-eslint": "^3.0.1", "gulp-exec": "^2.1.3", "gulp-kss": "0.0.2", "gulp-nunjucks-html": "2.0.0", "gulp-util": "^3.0.6", "html5-history-api": "4.2.7", "image-webpack-loader": "^3.1.0", "imagemin": "^5.2.2", "immutable": "^3.7.4", "istanbul-instrumenter-loader": "^1.1.0", "json-loader": "^0.5.4", "karma": "^1.3.0", "karma-chrome-launcher": "2.0.0", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-mocha-reporter": "^2.2.1", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.3", "kss": "3.0.0-beta.16", "local-storage": "^1.4.2", "lodash": "^4.17.2", "lolex": "^1.5.2", "manifest-revision-webpack-plugin": "^0.3.0", "mocha": "^3.2.0", "node-libs-browser": "^2.0.0", "nunjucks": "~2.5.2", "nunjucks-loader": "2.4.5", "postcss": "^5.2.6", "postcss-color-mix": "1.1.0", "postcss-custom-selectors": "^3.0.0", "postcss-for": "^1.1.0", "postcss-import": "^6.0.0", "postcss-loader": "^0.5.1", "postcss-mixins": "^0.3.0", "postcss-nested": "^0.3.2", "postcss-simple-extend": "^0.3.1", "postcss-sprites": "^1.0.9", "postcss-url": "^5.1.2", "query-string": "^4.2.3", "simulant": "^0.2.2", "sinon": "2.0.0-pre.3", "sinon-chai": "^2.8.0", "sinon-stub-promise": "^4.0.0", "sprintf-js": "^1.0.3", "style-loader": "^0.13.1", "url": "^0.11.0", "url-join": "1.1.0", "url-loader": "^0.5.7", "validator": "^6.2.0", "velocity-animate": "^1.4.0", "virtual-dom": "^2.1.1", "vtree-select": "^2.1.0", "webdriverio": "^4.5.0", "webpack": "^1.14.0", "webpack-dev-server": "~1.9.0", "whatwg-fetch": "^2.0.1", "window-shim": "^1.0.0" }, "dependencies": { "dom-shims": "^0.1.4", "polyfill-function-prototype-bind": "0.0.1" }

[michael-ciniawsky]

Could you please add ```around the code blocks? It's very hard to read and from a first glace most of your dependencies are helplessly outdated :stuck_out_tongue:

[leovir-roque]

@michael-ciniawsky I realised that this isn't a problem with css-loader, sorry. closing this thread