reactjs - Webpack 5 / i18next - 模块解析失败：“import”和“export”可能只出现在“sourceType：module”中

Question

将Webpack从版本4升级到 5 后，我无法构建和启动纱线服务器。一个不想合作的包是i18next-http-backend。我试图一次编译 JS 和 TS 文件。

网络包配置：

'use strict';

const ENV = 'production';

process.env.BABEL_ENV = ENV;
process.env.NODE_ENV = ENV;

const path = require('path');
const dotenv = require('dotenv');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const BrotliPlugin = require('brotli-webpack-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');

const paths = require('./paths');

const publicPath = process.env.PUBLIC_PATH || '/';

const CACHED_IMAGES_COUNT = 20;

module.exports = env => {
  const enviros = dotenv.config({ path: path.join(__dirname, `../.env.${env.NODE_ENV}`) }).parsed;
  const envKeys = Object.keys(enviros).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(enviros[next]);
    return prev;
  }, {});

  return {
    mode: ENV,
    bail: true,
    entry: [require.resolve('./polyfills'), paths.appSrc],
    output: {
      path: paths.appBuild,
      filename: 'static/js/[name].[chunkhash:8].js',
      chunkFilename: 'static/js/[name].[chunkhash:8].js',
      publicPath,
    },
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      modules: ['node_modules', 'src'],
    },
    optimization: {
      minimize: true,
      minimizer: [new OptimizeCSSAssetsPlugin({}), new TerserPlugin()],
      splitChunks: {
        chunks: 'all',
      },
      runtimeChunk: true,
    },
    module: {
      strictExportPresence: true,
      rules: [
        {
          oneOf: [
            // Image loader
            {
              test: /\.(bmp|gif|jpe?g|png)$/,
              loader: require.resolve('url-loader'),
              options: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            // JS loader
            {
              test: /\.(js|jsx|ts|tsx)$/,
              exclude: /node_modules/,
              use: {
                loader: require.resolve('babel-loader'),
                options: {
                  compact: true,
                  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
                },
              },
            },
            // CSS loader
            {
              test: /\.css$/,
              use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
            },
            // SCSS loader
            {
              test: /\.s[ac]ss$/i,
              use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                {
                  loader: 'sass-loader',
                  options: {
                    implementation: require('sass'),
                  },
                },
              ],
            },
            // File loader
            {
              loader: require.resolve('file-loader'),
              exclude: [/\.(js|jsx|ts|tsx)$/, /\.html$/, /\.scss$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin(envKeys),
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
      new MomentLocalesPlugin({
        localesToKeep: ['es-us', 'pl'],
      }),
      new HtmlWebpackPlugin({
        inject: true,
        template: paths.appHtml,
        favicon: paths.favicon,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        },
      }),
      new HtmlWebpackPlugin({
        filename: 'silent-check-sso.html',
        template: paths.silentSSOHtml,
        chunks: ['silentSSO'],
      }),
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].css',
        chunkFilename: 'static/css/[id].css',
      }),
      new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.(js|css|html|svg)$/,
        threshold: 8192,
        minRatio: 0.8,
      }),
      new BrotliPlugin({
        asset: '[path].br[query]',
        test: /\.(js|css|html|svg)$/,
        threshold: 10240,
        minRatio: 0.8,
      }),
      new WorkboxPlugin.GenerateSW({
        // these options encourage the ServiceWorkers to get in there fast
        // and not allow any straggling "old" SWs to hang around
        clientsClaim: true,
        skipWaiting: true,
        exclude: [/\.(?:png|jpg|jpeg|svg)$/],
        // Define runtime caching rules.
        runtimeCaching: [
          {
            // Match any request that ends with .png, .jpg, .jpeg or .svg.
            urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
            // Apply a cache-first strategy.
            handler: 'CacheFirst',
            options: {
              // Use a custom cache name.
              cacheName: 'images',
              // Only cache 10 images.
              expiration: {
                maxEntries: CACHED_IMAGES_COUNT,
              },
            },
          },
        ],
      }),
      new CopyWebpackPlugin({
        patterns: [
          { from: 'src/locales', to: 'locales' },
          { from: 'public/manifest', to: 'manifest' },
          { from: 'public/images', to: 'images' },
        ],
      }),
    ],
  };
};

它给了我这个错误：

[0] ERROR in ./node_modules/i18next-http-backend/esm/getFetch.cjs 1:0
[0] Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
[0] File was processed with these loaders:
[0]  * ./node_modules/file-loader/dist/cjs.js
[0] You may need an additional loader to handle the result of these loaders.
[0] > export default __webpack_public_path__ + "static/media/getFetch.d7d6010d.cjs";
[0]  @ ./node_modules/i18next-http-backend/esm/request.js 4:0-44 35:17-26 35:82-99 35:103- 112
[0]  @ ./node_modules/i18next-http-backend/esm/index.js 10:0-35 24:13-20
[0]  @ ./src/i18n.ts
[0]  @ ./src/index.tsx 1:368-381

我应该更改我的 Webpack 配置文件以使其工作吗？