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.

James Z
  • 12,209
  • 10
  • 24
  • 44

0 Answers0