如何解决 React Webpack 应用程序中的“Module not found: Error: Can't resolve ... multi @babel/polyfill ./react/index.js”

Question

We have a React application with webpack and we have an error in our Bitbucket Pipeline when we build the application.

We launch the npm run build command int the CI inside a Debian docker container and we have this error:

[INFO] ERROR in ./react/classes/searchparams/parametrosGeneralesForm.js
[INFO] Module not found: Error: Can't resolve '../../dataTables/dataTablesId' in '/opt/atlassian/pipelines/agent/build/bapplication/bapplication-web/src/main/resources/static/resources/react/classes/searchparams'
[INFO]  @ ./react/classes/searchparams/parametrosGeneralesForm.js 9:15-55
[INFO]  @ ./react/datatables/configurations/configuracion/parametrosGenerales.js
[INFO]  @ ./react/datatables/utils/getParameters.js
[INFO]  @ ./react/datatables/dataTable.jsx
[INFO]  @ ./react/content/body/mainContentBody.jsx
[INFO]  @ ./react/content/content.jsx
[INFO]  @ ./react/contentWrapper/ContentWrapper.jsx
[INFO]  @ ./react/index.js
[INFO]  @ multi @babel/polyfill ./react/index.js

We have this error and similars import errors with multiple files.

Our .babelrc file is:

{
    "presets":["@babel/env", "@babel/react"],"plugins": ["@babel/plugin-proposal-class-properties","@babel/transform-async-to-generator","@babel/syntax-dynamic-import"]
}

We have the webpack configuration in two files webpack.base.config.js and webpack.dev.config.js .

Our webpack.base.config.js is:

const path = require('path');
const webpack = require("webpack");
const APP_DIR = path.resolve(__dirname, './react');
const PropertiesReader = require('properties-reader');
const Eslanguaje = PropertiesReader('../../languages/bapplication_es.properties')._properties;
const Enlanguaje = PropertiesReader('../../languages/bapplication_en.properties')._properties;
const Defaultlanguaje = PropertiesReader('../../languages/bapplication.properties')._properties;
const ROUTING_PROPS = PropertiesReader('../../routing.properties')._properties;
const CONSTANTS_PROPS = PropertiesReader('../../constants.properties')._properties;
const RemoteProperties = PropertiesReader('../../application-develop.properties')._properties;
const LocalProperties = PropertiesReader('../../application-local.properties')._properties;
const ProductionProperties = PropertiesReader('../../application-production.properties')._properties;
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

let properties="";
switch (process.env.NODE_ENV){
    case "local":
        properties = LocalProperties;
        break;
    case "development":
        properties = RemoteProperties;
        break;
    case "production":
        properties = ProductionProperties;
        break;
}
const springPath = properties["server.servlet.context-path"];
const CONTEXT =(springPath!==undefined&&springPath!==null)?springPath:"";
module.exports =  {
    entry: {
        app: ['@babel/polyfill', APP_DIR + '/index.js']
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ["babel-loader", "eslint-loader"],
                exclude: /node_modules/
            },
            {   test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    output: {
        path:  path.join(__dirname, './dist'),
        filename: 'bundle.js',
        publicPath: CONTEXT+'/res/dist/',
    },
    externals: {
        'esLanguaje': JSON.stringify(Eslanguaje),
        'enLanguaje': JSON.stringify(Enlanguaje),
        'defaultLanguaje': JSON.stringify(Defaultlanguaje),
        'ROUTING_PROPS': JSON.stringify(ROUTING_PROPS),
        'CONSTANTS_PROPS': JSON.stringify(CONSTANTS_PROPS),
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            'process.env.DEBUG': JSON.stringify(true),
            'process.env.API_URL': JSON.stringify(CONTEXT)
        }),
        new HardSourceWebpackPlugin()
    ]
};

Our webpack.dev.config.js is:

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config');

module.exports = merge(baseConfig, {
    devtool: 'inline-source-map',
    mode: "development"
});

The parametrosGeneralesForm.js file have the correct require to the file path:

const IDTABLES = require('../../dataTables/dataTablesId');

The file that import is dataTablesId.js .

The folder structure is:

react
|_dataTables
|   |_dataTablesId.js
|
|_classes
    |_searchparams
       |_parametrosGeneralesForm.js

Is it possible that our webpack.base.config.js have errors with the resolver code?