Ошибка в браузере Uncaught Error: Cannot find module './noConflict'

Добрый день, как исправить ошибку в Console При запуске Webserver происходит автозагрузка, но в консоли вываливается ошибка: Uncaught Error: Cannot find module './noConflict' at webpackMissingModule (index.js:3) at eval (index.js:3) at Object.../node_modules/@babel/polyfill/lib/index.js:

//package.json

{
  "name": "exelcourse",
  "version": "1.0.0",
  "description": "Javascript exel application",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },
  "browserslist": "> 0.25%, not dead",
  "repository": {
    "type": "git",
    "url": "git+https://gitlab.com/Dmitriy86/exelcourse.git"
  },
  "keywords": [
    "js",
    "javascript",
    "exel"
  ],
  "author": "Dmitriy Savchenko <[email protected]>",
  "license": "ISC",
  "bugs": {
    "url": "https://gitlab.com/Dmitriy86/exelcourse/issues"
  },
  "homepage": "https://gitlab.com/Dmitriy86/exelcourse#readme",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "react-hot-loader": "^4.5.3",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.3",
    "webpack": "^5.0.0-beta.23",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.1",
    "webpack-node-externals": "^2.5.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1"
  }
}

//webpack.config.js

const webpack = require('webpack')
const isProd = process.env.NODE_ENV === 'production'//Переменная которая хранит в себе информацию  о режиме сборки
const isDev = !isProd//Переменная isDev будет также хранить булевское значение;
const path = require('path') //Экспортируем модуль путей из списка стандартных пакетов node.js
console.log(isProd)
console.log(isDev)
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//Подключаем плагин очистки папки
const HtmlWebpackPlugin = require('html-webpack-plugin');//Подключаем плагин работы с html
const CopyPlugin = require("copy-webpack-plugin");//Подключаем плагин
const TerserVebPackPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//Для того чтобы помещать цсс файл в отдельный файл
const fileName = ext => isDev ? `bundle.${ext}`: `bundle.[contenthash].${ext}`
const optimization = () => {
    const config =  {
        splitChunks: {
            chunks: "all",
        }
    }
    if(isProd){
        config.minimizer = [//Это массив
            new OptimizeCssAssetsPlugin(),
            new TerserVebPackPlugin(),
        ]
    }
    return config//Вернет обьект с конфигом
}
const sourceMap = () => {
    isDev ? 'source-map' : null
}
module.exports = { //Экспортируем обьект из файла , который будет являтся конфигурацией для вебпака;
    context: path.resolve(__dirname, 'src'), //Где лежат исходнки проэкта
    mode: "development",//Указываем вебпаку в каком режиме работаем;
    entry:  //Точки входа для нашего приложения
        [ '@babel/polyfill' , './index.js'], //Путь к основному файлу с которого все начинается
    //externals: [nodeExternals()],
    output: {
        filename: fileName('js'), //Файл где будут находится все наши скрипты;
         //добавляем хэши в название файла чтобы избежать проблем с хэшированием;
        path: path.resolve(__dirname, 'dist') //Путь куда складывать все скрипты;
    },
    resolve: {
        extensions: [
            'js', //Массив расширений по умолчанию
        ],
        alias: { //Шаблоны для путей
            "@": path.resolve(__dirname, 'src'),
            "@core": path.resolve(__dirname, 'src/core'),
            "@css": path.resolve(__dirname, 'src/css')
        }
    },
    optimization: optimization(),
    devtool: sourceMap(), //Если мы в режиме разработки то добавляем поле source-map(добавляем карты)
    devServer: {//Настраиваем девсервер
        port: 5000,//Указываем порт
        hot: isProd,
    },
    //Добавление плагинов
    plugins: [ //Потребуется для взаимодействия в HTML;
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "index.html",//Откуда мы будем брать шаблон штмл чтобы плагин самостоятельно его не генерировал
            minify: {//Ключ насторйки плагина
                removeComments : isProd,
                collapseWhitespace : isProd,
            }
        }),
        new CopyPlugin({//Используем для переноса фавиконки;
           patterns: [
               { from : path.resolve(__dirname, 'src/favicon.ico'), to : path.resolve(__dirname, 'dist')}//В конструктор передаем обьект с массивом параметров , которые в свою очередь являются тоже обьектами
           //Чтобы в режиме разработки фавиконка также присутствовала;
           ],
        }),
        new MiniCssExtractPlugin({
            filename: fileName('css'),//Указываем имя файла выходного
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    {
                        loader: MiniCssExtractPlugin.loader,
                         options: {
                            esModule: isDev,
                         }
                    },//Находится в статической переменной плагина MiniCssExtractPlugin
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',//Добавляем лоадер который будет пропускать все через себя babel-loader
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ],
    },
}

//главный файл проэкта:

import './module.js'
import css from "./css/style.css";
import "./css/sass.sass";
//import "core-js/stable";
//import "regenerator-runtime/runtime";
console.log(`Hello world`)
//console.log(`NODE_ENV: ${process.env.NODE_ENV}`)


В Webpack в консоли выдает ошибку:

ERROR in ../node_modules/@babel/polyfill/lib/index.js 3:0-22 Module not found: Error: Can't resolve './noConflict' in 'C:\Users\38098\WebstormProjects\exelCourse\node_modules@babel\polyfill\lib'

ERROR in ../node_modules/@babel/polyfill/lib/index.js 5:37-73 Module not found: Error: Can't resolve 'core-js/library/fn/global' in 'C:\Users\38098\WebstormProjects\exelCourse\node_modules@babel\polyfill\lib'

webpack 5.11.1 compiled with 2 errors in 2721 ms


Ответы (0 шт):