webpack无法解析react-spring/web模块中的react-spring_core.legacy-esm.js

Question

我的 webpack.config.js

const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const googleConfig = require("./google.config.json");

module.exports = (env, args) => {
  const evnConfig = require("./config.json")[args.mode];
  const timestamp = Date.now();

  return {
    entry: {
      main: "./front-end/index.js",
      rightpanel: "./front-end/rightPanelIndex.js",
      worklogs: "./front-end/worklogsIndex.js",
      leftpanel: "./front-end/leftPanelIndex.js",
      timelog: "./front-end/timelogIndex.js",
      confirm: "./front-end/confirmIndex.js",
    },
    output: {
      path: path.resolve(__dirname, "public"),
      filename: `js/[name].bundle.js`,
    },
    stats: { warnings: false },
    resolve: {
      extensions: [".js", ".jsx", ".json"],
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        },
        {
          test: /\.(css|scss)$/i,
          use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"],
        },
      ],
    },
    optimization: {
      splitChunks: {
        chunks: "all",
        minSize: 30000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            reuseExistingChunk: true,
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
        },
      },
    },
    plugins: [
      new webpack.DefinePlugin({
        "process.env": {
          CHECK_LICENSE: (evnConfig || {}).checkLicense,
          GOOGLE_API_KEY: `"${googleConfig.secretAccessKey}"`,
        },
      }),
      new CopyWebpackPlugin([
        {
          from: "./source/css",
          to: "./css",
          toType: "dir",
        },
        {
          from: "./source/resources",
          to: "./resources",
          toType: "dir",
        },
        {
          from: "./source/js",
          to: "./js",
          toType: "dir",
        },
        {
          from: "./views",
          to: "./views",
          toType: "dir",
          transform(content) {
            return content.toString().replace(new RegExp("{{timestamps}}", "g"), timestamp);
          },
        },
      ]),
    ],
    node: {
      fs: "empty",
    },
  };
};

我的 babel.config.json

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining",
    // "@babel/transform-runtime",
  ],
};

我遇到错误：

错误 ./node_modules/@react-spring/core/dist/react-spring_core.legacy-esm.js 118:11 模块解析失败：意外的标记 (118:11) 您可能需要 适当的加载程序来处理此文件类型，目前没有加载程序 配置为处理该文件。看 https://webpack.js.org/concepts#loaders | } |功能 detachRefs(ctrl, ref) {

ctrl.ref?.delete(ctrl); |参考？.删除(ctrl); | }

这里有人遇到过这个吗？请给我解决方案，拜托。谢谢

Answer 1

我也遇到同样的问题了，还没解决！ 可能是版本不兼容