Error in post css loader with webpack 3

Question

I am using css loader with post css loader in webpack 3 in an angular project. When I am building my application I am getting following errors for all my css files:

    ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/XXX/XXX/xxx.css
Module build failed: TypeError: WeakMap: incorrect invocation!
at TypeError (native)
at module.exports (/home/anil/projects/expertly/client/webapp/node_modules/core-js/modules/_an-instance.js:3:11)
at /home/anil/projects/expertly/client/webapp/node_modules/core-js/modules/_collection.js:59:9
at new WeakMap (/home/anil/projects/expertly/client/webapp/node_modules/core-js/modules/es6.weak-map.js:17:12)
at e (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:36380)
at Object.<anonymous> (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:27033)
at e (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:129)
at Object.module.exports.Object.defineProperty.value (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:40119)
at e (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:129)
at Object.<anonymous> (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:149384)
at e (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:129)
at /home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:486
at /home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:497
at makeLoaderFunction (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:36:3)
at Object.<anonymous> (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:40:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (/home/anil/projects/expertly/client/webapp/node_modules/coffee-script/lib/coffee-script/register.js:45:36)

This is my webpack config for css loader:

  {
      test: /\.css$/,
      use: [
        'to-string-loader',
        { loader: 'css-loader' },
        'postcss-loader' 
      ],
      exclude: [
        path.join(__dirname, "../node_modules"),
      ]
    }

postcss.config.js:

module.exports = {
  plugins: {
  'autoprefixer': { browsers: 'last 2 versions' },
  'cssnano': {
    safe: true,
    sourcemap: true,
    autoprefixer: false
  },
  'postcss-import': {
    addDependencyTo: webpack
  },
  'postcss-cssnext': {}
  }
}

Versions used are are:

"postcss-loader": "2.0.7"

"webpack": "3.6.0"

Read my answer, it has a link to my boilerplate. see it and compare it with your config. Undoubtedly It can Help you. — AmerllicA, Jan 15 '18 at 15:01

score 1 · Answer 1 · answered Jan 15 '18 at 15:00

PostCSS and Webpack

Excuse me for my words but your configurations has critical problems, I'm React Developer, but Webpack configs is not depended on Angular or React or something else, But why you don't have fallback inside your rules ?

Why you don't use ExtractTextPlugin ? and why you use CSS extension file when you wanna play with PostCSS? and other things like separated PostCSS file? why?

I proffer to you see my PostCSS configuration on Webpack and compare it with your configs, my boilerplate work awesome, it use react, never mind, the Webpack version is 3.x and PostCSS version is 6.0.x and postcss-loader version 2.0.x. And specially I separate Development and Production version of Webpack. it is easy to understand and clear and clean. if you have other questions please ask, I'll glad to answer.

Error in post css loader with webpack 3

1 Answers1

PostCSS and Webpack