Reactjs 如何解决'；未找到模块：错误：Can'；无法解决。。。multi@babel/polyfill./react/index.js'；在React网页包应用程序中

我们有一个带有webpack的React应用程序，在构建应用程序时，我们的Bitbucket管道中有一个错误

我们在Debian docker容器内的CI中启动

npm run build

命令，出现以下错误：

[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

我们有这个错误和类似的导入错误与多个文件

我们的.lrc文件是：

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

我们有两个文件

webpack.base.config.js

和

webpack.dev.config.js

中的webpack配置

我们的

webpack.base.config.js

是：

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()
    ]
};

我们的

webpack.dev.config.js

是：

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

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

parametrosGeneralesForm.js

文件对文件路径的要求正确：

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

导入的文件是

datatableId.js

文件夹结构为：

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

---

我们的

webpack.base.config.js

解析程序代码是否有错误？

此文件的扩展名是什么

datatableId

？是

.js

还是

.json

？@Aditya

datatableId

是

.js

文件。请仔细检查路径。你能发布你的文件夹结构吗？@Aditya我用文件夹结构更新了这个问题。我认为问题不在于路径。这个文件的扩展名是什么？是

.js

还是

.json

？@Aditya

datatableId

是

.js

文件。请仔细检查路径。你能发布你的文件夹结构吗？@Aditya我用文件夹结构更新了这个问题。我认为问题不在于路径。