webpack can't resolve react-spring_core.legacy-esm.js in module of react-spring/web

Question

My 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",
    },
  };
};

My 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",
  ],
};

I got error:

ERROR in ./node_modules/@react-spring/core/dist/react-spring_core.legacy-esm.js 118:11 Module parse failed: Unexpected token (118:11) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | } | function detachRefs(ctrl, ref) {

ctrl.ref?.delete(ctrl); | ref?.delete(ctrl); | }

Has anyone here come across this. Please give me the solution, please. Thanks

Answer 1

I had the same issue. I was able to resolve it by upgrading from webpack 4 to webpack 5.