i'm facing an issue with react with custom webpack config while I try to implement firebase

• react version: 17
• webpack version: 5
• firebase: 9

so when i try to import any function from firebase/messaging (also tried other packages from firebase like analytics, same issue happens) it throws an error about exports-loader module that is not installed.

then after installation it throws this error then:

ERROR in ./node_modules/whatwg-fetch/fetch.js (./node_modules/exports-loader/dist/cjs.js?self.fetch!./node_modules/whatwg-fetch/fetch.js)

Module build failed (from ./node_modules/exports-loader/dist/cjs.js): ValidationError: Invalid options object. Exports Loader has been initialized using an options object that does not match the API schema.

• options misses the property 'exports'. Should be: non-empty string | non-empty string | object { name, syntax?, alias? } | [non-empty string | object { name, syntax?, alias? }, ...] (should not have fewer than 1 item)

here is my webpack config, is there anything that I'm missing from webpack config or is this issue caused by webpack at all?

module.exports = {
  devtool: 'eval',
  entry: ['app/app.js'],
  loader: { target: 'web' },
  mode: 'development',
  module: {
    strictExportPresence: true,
    rules: [
      {
        test: /\.svg/,
        use: {
          loader: 'svg-url-loader',
          options: {
            iesafe: true,
          },
        },
      },
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        loader: 'babel-loader',
        include: [PATHS.APP_DIR],
        exclude: [/node_modules/],
        options: {
          ...babelConfig,
        },
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash].[ext]',
              outputPath: 'fonts',
            },
          },
        ],
      },
      {
        test: /\.(gif|png|jpe?g)$/i,
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75,
              },
            },
          },
          {
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash].[ext]',
              outputPath: 'images',
            },
          },
        ],
      },
      {
        test: /\.(s*)css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1,
            },
          },
        ],
      },
    ],
  },
  node: { global: false, __dirname: false, __filename: false },
  output: {
    path: 'build/',
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  },
  plugins: [
    new WebpackBar({
      name: 'CSR',
      color: '#FFEB3B',
    }),
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports-loader?self.fetch!whatwg-fetch',
    }),
    new webpack.DefinePlugin({
      'process.env': webpackEnv(),
    }),
    new LoadablePlugin({
      filename: 'loadable-stats.json',
      writeToDisk: true,
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.join('resources', 'public'),
          to: 'build',
        },
      ],
    }),
    new HtmlWebPackPlugin({
      template: `/index.ejs`,
      title: 'MY APP',
    }),
    new webpack.HotModuleReplacementPlugin({
      multiStep: false,
    }),
    new CircularDependencyPlugin({
      exclude: /a\.js|node_modules/, // exclude node_modules
      failOnError: false, // show a warning when there is a circular dependency
    }),
  ],
  resolve: {
    modules: ['node_modules'],
    alias: {
      // my aliases
    },
  },
  stats: { preset: 'minimal', moduleTrace: true, errorDetails: true },
  target: 'web',
};

CodePudding user response：

the issue was caused by whatwg-fetch

fetch: 'exports-loader?self.fetch!whatwg-fetch',

by removing this line since it wasn't necessary, the problem has been solved