Как решить 'Модуль не найден: Ошибка: Не удается разрешить ... multi @ babel / polyfill ./react/index.js' в приложении React Webpack - PullRequest
Новая
       79

Как решить 'Модуль не найден: Ошибка: Не удается разрешить ... multi @ babel / polyfill ./react/index.js' в приложении React Webpack

0 голосов
/ 28 января 2020

У нас есть приложение React с веб-пакетом, и у нас есть ошибка в нашем конвейере Bitbucket при создании приложения.

Мы запускаем команду npm run build в CI внутри контейнера Debian docker, и мы есть эта ошибка: 

[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

У нас есть эта ошибка и аналогичные ошибки импорта с несколькими файлами.

Наш .babelr c файл: 

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

Мы иметь конфигурацию webpack в двух файлах webpack.base.config.js и webpack.dev.config.js.

Наш 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');

Импортируемый файл dataTablesId.js.

Структура папок: 

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

Возможно ли, что наши webpack.base.config.js имеют ошибки с кодом распознавателя?

...