Не удается найти модуль '@ babel / core'

Я слежу за этим руководством по webpack4 / react:

https://thewikihow.com/video_deyxI-6C2u4

Я следил за ним точно до той части, где он запускает npm start. Разница в том, что его приложение запускается, а мое выдает ошибку:

Не удается найти модуль '@ babel / core'

Полная ошибка:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\joeyf\Desktop\Code\Github\webpack4-sample\node_modules\babel-loader\lib\index.js:5:15)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2]

Я попытался переустановить babel-core, но его все еще не нашли. Вот мой package.json:

{
  "name": "webpack4-sample",
  "version": "1.0.0",
  "description": "A sample setup of Webpack4 with React and Babel",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "Joey Fenny",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "babel-core": "^7.0.0-rc.4",
    "babel-loader": "^8.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  }
}

Мой webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: path.join(__dirname, '/node_modules'),
            use: {
                loader: 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

Вот ссылка на репозиторий git:

https://gitlab.com/jfny/webpack4-sample

Кто-нибудь знает, что происходит? Спасибо.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
89
0
108 674
14
Перейти к ответу Данный вопрос помечен как решенный

Ответы 14

Ответ принят как подходящий

Попробуйте запустить это.

npm install @babel/core --save

babel изменили свой пакет, поэтому ваш babel-core не будет таким же, как @babel/core.

Просто для людей, которые случайно сюда зашли, из-за недавнего обновления основной версии с babel 6 до 7, babel-loader разделен на версии 7 и 8 соответственно. Если случайное обновление babel-loader 8 с помощью "ncm -u" вызывает эту проблему, просто убедитесь, что вы установили babel-loader 7 с помощью "npm install babel-loader @ 7". Инструкции по установке четко указаны здесь: github.com/babel/babel-loader

Thomas Cheng 01.09.2018 18:46

Недавнее обновление Babel до версии 7 изменило наименования пакетов узлов.

Например, теперь вам нужно установить

npm install --save-dev @babel/core @babel/preset-env

и

npm install --save-dev @babel/preset-react

чтобы заставить его работать с React. Затем вы можете использовать их в своем файле .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Или в качестве альтернативы, если у вас нет .babelrc, в вашем package.json:

...
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
},
"devDependencies": {
...

Если вы хотите больше узнать об этом, вы можете проверить этот недавний Настройка Webpack + Babel + React.

Я могу исправить эту проблему, используя команду ниже

npm install @babel/core --save

babel-loader @ 8 требует Babel 7.x (пакет '@ babel / core'). Если вы хотите использовать Babel 6.x ('babel-core'), вам следует установить 'babel-loader @ 7'.

В моем случае мне пришлось удалить babel 6

npm uninstall --save-dev babel-cli  babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-2 babel-register

а затем переустановите babel 7

npm i  --save-dev  @babel/cli  @babel/core @babel/node  @babel/polyfill  @babel/preset-env

и это сработало для меня.

для тех из вас, кто использует @ babel / core вместе с babel-node: Я только что установил @ babel / core с помощью npm i @babel/core --save-dev, но когда я попытался использовать babel-node, он не распознал пакет @ babel / core, я удалил @ babel / core и снова установил его с помощью npm i @babel/core --save, и он снова заработал!

попробуйте установить npm install @ babel / core --save если не работает, попробуйте удалить node_modules и переустановить

Я решил ту же ошибку, удалив все модули babel из dev Зависимости, выполнив следующую команду:

npm install -D babel-loader @babel/core @babel/preset-env

Вы можете обратиться к этой ссылке, если указанная выше команда не работает:

[https://github.com/babel/babel/issues/8599#issuecomment-417866691]

Я удалил существующие npm uninstall babel-core babel-preset-env babel-preset-react

и добавили свои новые имена npm install --save-dev @babel/core @babel/preset-env @babel/preset-react это работает для меня отлично.

Я исправил:

 npm install --save-dev babel-loader@7 babel-core babel-preset-env webpack webpack-cli -D

Зайдите, запустив в Windows, %USERPROFILE%\.quokka

Конфигурация ~/.quokka ограничена файлом config.json и любыми пакетами, которые существуют в ~/quokka/node_modules.

Поместите следующее в config.js,

{
  "pro":true, 
  "babel": {
    "presets": ["@babel/preset-env", " @babel/preset-react"],
    "plugins": [
      ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
  }
}

Я занимаюсь этой проблемой несколько часов, и она таинственным образом исчезла, когда я добавил раздел «devDependencies» в свой файл package.json и переместил в него зависимости @types.

если у вас есть приложение для реагирования, и вы получаете сообщение об ошибке, измените конфигурацию babel на ниже:

 {
"presets": [
    [
        "@babel/preset-env",
        {
            "useBuiltIns": "entry",
            "corejs": 3,
            "modules": false
        }
    ],
    "@babel/preset-react"
],
"plugins": [
    ["@babel/transform-async-to-generator"],
    ["@babel/plugin-transform-runtime"],
    ["@babel/syntax-dynamic-import"],
    ["@babel/plugin-transform-classes", {
    "loose": true
    }],
    [
        "babel-plugin-transform-builtin-extend",
        {
            "globals": ["Error"]
        }
    ]
]

}

мои два цента для тех, кто начинает работать с react, webpack, babel, jsx, У меня проблема с npm run build

ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-core'

Когда вы пытались постепенно установить каждый компонент, вы могли столкнуться с конфликтом версий между пакетами, то есть вы могли получить файл package.json, подобный этому

  "dependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^7.1.5",
    "webpack": "^5.33.2",
    "webpack-cli": "^4.6.0"

Ясно, что сообщение об ошибке загрузки babel-loader не связано с тем, что у меня не был установлен babel-loader. Поэтому, думаю, попробовал бы еще раз переустановить с npm i babel-loader.

И я получил это сообщение

$ npm install babel-loader
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   webpack@"^5.33.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"2 || 3 || 4" from [email protected]
npm ERR! node_modules/babel-loader
npm ERR!   babel-loader@"^7.1.5" from the root project

Заметил, что использую Webpack v.5. Следовательно, я удаляю babel-loader из файла package.json и снова делаю npm i babel-loader.

На этот раз npm run build удался!

Другие вопросы по теме