Module not found: Error: Can't find options with ident 'postcss'

Question

I'm new on stackoverflow to ask you a question that I never find on the internet... I hope I'm in the good website :)

So here is my problem : I would like to import some css files to a react application from node_modules dependencies. I use webpack for the developpement and I got an error I don't understand and that is in the title. So here is the error details from the compiler :

    ERROR in ./src/scss/app.scss
Module not found: Error: Can't find options with ident 'postcss'
 @ ./src/scss/app.scss 9:10-188
 @ ./src/app/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src

also, in the nav console I got this :

Error: Cannot find module '-!../../node_modules/css-loader/index.js?{"importLoaders":1}!../../node_modules/postcss-loader/lib/index.js??postcss!react-big-calendar/lib/css/react-big-calendar.css'

that is the content of my scss file cannot load css files. App.scss :

exports.i(require("-!../../node_modules/css-loader/index.js?{\"importLoaders\":1}!../../node_modules/postcss-loader/lib/index.js??postcss!react-big-calendar/lib/css/react-big-calendar.css"), "");

You can check also my webpack config file :

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [htmlWebpackPlugin],
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.css']
  }
};

What's wrong with my code ?

Thank you very much to help me ! If I'm not very clear, please ask me any other informations

Hi sorry for the response time. what is the problem with postcss-loader ? — Aurélien, Sep 16 '18 at 15:08
Either its not installed or there is no postcss config file. — Javed, Sep 16 '18 at 15:14

score 0 · Answer 1 · answered Feb 12 '21 at 13:05

You probably need to change your postcss-loader config to this. Depends really on which version of the loader you have, not needed from 4.0.0 (https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.0)

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
  },
}

Module not found: Error: Can't find options with ident 'postcss'

1 Answers1