0
Error
1 | // extracted by mini-css-extract-plugin
2 | export default {"lala":"hQupzgS9tEJmjp6wWbAk"};

enter image description here (lala is classname)

CSS modules is working fine and changes are reflecting during development but build is failing. I tried updating packages.

"workbox-background-sync": "^6.5.4",
"workbox-broadcast-update": "^6.5.4",
"workbox-cacheable-response": "^6.5.4",
"workbox-core": "^6.5.4",
"workbox-expiration": "^6.5.4",
"workbox-google-analytics": "^6.5.4",
"workbox-navigation-preload": "^6.5.4",
"workbox-precaching": "^6.5.4",
"workbox-range-requests": "^6.5.4",
"workbox-recipes": "^6.1.5",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^6.5.4",
"workbox-streams": "^6.5.4",
"workbox-webpack-plugin": "6.5.4"

"mini-css-extract-plugin": "^2.7.0",
"node-sass": "^8.0.0",
"optimize-css-assets-webpack-plugin": "^6.0.0",
"postcss-flexbugs-fixes": "^5.0.0",
"postcss-loader": "^7.0.0",
"postcss-normalize": "^10.0.0",
"postcss-preset-env": "^8.0.0",
"postcss-safe-parser": "^6.0.0",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-manifest-plugin": "^5.0.0",

here is my webpack config file

module.exports = merge(common, {
  mode: 'production',
  output: {
    path: paths.build,
    publicPath: '/',
    filename: 'js/[name].[contenthash].bundle.js',
    crossOriginLoading: 'anonymous'
  },
  plugins: [
    //style-loader is for development, MiniCssExtractPlugin is for production
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
      chunkFilename: 'styles/[name].[contenthash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(scss|css)$/i,
        exclude: /node_modules\/@fullcalendar/,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: {} },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true,
              sourceMap: false
            }
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  require('postcss-preset-env')({
                    autoprefixer: {
                      flexbox: 'no-2009'
                    },
                    stage: 3
                  }),
                  postcssNormalize()
                ],
                sourceMap: false
              }
            }
          },
          { loader: 'sass-loader', options: {} }
        ]
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          parser: safePostCssParser,
          map: false
            ? {
                inline: false,
                annotation: true
              }
            : false
        },
        cssProcessorPluginOptions: {
          preset: ['default', { minifyFontValues: { removeQuotes: false } }]
        }
      }),
      new TerserPlugin()
    ]
  }
})

I have tried many different things but not able to resolve this error.

2
  • What version of webpack? Commented Feb 26, 2023 at 13:59
  • version - 5.75.0 Commented Feb 26, 2023 at 15:02

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.