Модуль ядра React Babel не найден

ProgramBox

Модуль ядра React Babel не найден

Post author:admin
Запись опубликована:27 февраля, 2023
Post category:Вопросы по программированию

#javascript #reactjs #babeljs

Вопрос:

Я учился React.js следуя какому-нибудь видеоуроку. Он работал нормально, но сегодня я продолжил работу и добавил состояние в свой компонент, и внезапно после сохранения я получаю babel-core сообщение об ошибке.
Я новичок в React, поэтому не могу понять, что это за ошибка, и я думаю, что это не связано с изменением компонентов, которые я сделал сегодня.
Я также загрузил свой проект до этого момента на github здесь

На веб-странице я получаю это сообщение об ошибке —

 Failed to compile

./node_modules/babel-core/lib/helpers/resolve.js
Module not found: Can't resolve 'module' in 'C:UsersSachin VermaDesktopWebD workReactThe Burger Buildernode_modulesbabel-corelibhelpers'

В консоли я получаю эту длинную ошибку —

 Uncaught Error: Cannot find module "module"
    at webpackMissingModule (resolve.js:34)
    at Object.<anonymous> (resolve.js:34)
    at Object../node_modules/babel-core/lib/helpers/resolve.js (resolve.js:46)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object../node_modules/babel-core/lib/helpers/resolve-from-possible-names.js (resolve-from-possible-names.js:6)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object.<anonymous> (resolve-plugin.js:6)
    at Object../node_modules/babel-core/lib/helpers/resolve-plugin.js (resolve-plugin.js:21)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object.<anonymous> (option-manager.js:43)
    at Object../node_modules/babel-core/lib/transformation/file/options/option-manager.js (option-manager.js:383)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object.<anonymous> (index.js:42)
    at Object../node_modules/babel-core/lib/transformation/file/index.js (index.js:737)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object../node_modules/babel-core/lib/api/node.js (node.js:6)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object../node_modules/babel-core/index.js (index.js:1)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object../src/components/Burger/Burger.js (Burger.css:26)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object../src/containers/BurgerBuilder/BurgerBuilder.js (Layout.js:15)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object../src/App.js (fetch.js:461)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object../src/index.js (index.css?f255:26)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at fn (bootstrap 8d64744152fbd1b327ed:88)
    at Object.0 (registerServiceWorker.js:117)
    at __webpack_require__ (bootstrap 8d64744152fbd1b327ed:678)
    at bootstrap 8d64744152fbd1b327ed:724
    at bootstrap 8d64744152fbd1b327ed:724

 index.js:2178 ./node_modules/babel-core/lib/helpers/resolve.js
Module not found: Can't resolve 'module' in 'C:UsersSachin VermaDesktopWebD workReactThe Burger Buildernode_modulesbabel-corelibhelpers'

Обновить:
Я побежал npm run eject добавлять некоторые конфигурации, чтобы имена классов в css-файлах компонента не конфликтовали друг с другом.
Я добавил эти две строки.

1. babel-core Пакету более 2 лет. Я уверен, что вы не просто «добавили состояние в свой компонент», чтобы на него внезапно ссылались.

2. Возможно, вы выполнили последнюю фиксацию в вашем репозитории react-scripts eject ? Почему?

3. В видео, за которым я следил, этот человек запустил команду извлечения, затем отредактировал webpack.config.dev.js файл в каталоге конфигурации, так что, даже если у нас есть css в разных файлах для каждого компонента, они все равно будут конфликтовать друг с другом, поэтому после добавления некоторой конфигурации в каждый css-классы будут иметь несколько случайных символов, добавленных к классам, определенным в файле css на основерасположение файла или что-то в этом роде, я думаю, так что никакие два разных класса css не будут конфликтовать. Я загрузил скриншот двух строк, которые были добавлены.

4. Тогда в учебнике использовалась более старая версия CRA; CRA 2.0.0 поддерживает модули CSS из коробки. извлечение create-react-app.dev/docs/adding-a-css-modules-stylesheet — это экспертная функция, которую вы не должны использовать, в принципе, никогда.

5. Я сделал PR в вашем репозитории, который исправляет эти вещи. github.com/sachuverma/The-Burger-Builder/pull/1

Ответ №1:

Я предполагаю, что вы взяли класс Maximilian React на Udemy и столкнулись с этой проблемой в разделе 8 — Урок 129. Это связано с тем, что когда вы пытались создать переменную transformedIngredient, вы могли получить предложение ключевого слова transform, которое является зарезервированным ключевым словом в babel-core, которое было импортировано в начало вашего js-файла. Удалите это, и все готово.

Ответ №2:

Эта конкретная ошибка вызвана тем, что вы непреднамеренно добавили этот импорт из babel-core библиотеки, которую вы не установили:

 import { transform } from 'babel-core';

Удалите строку, и все готово.

Тем не менее, я все еще удивляюсь, почему вы это сделали react-scripts eject в своем репозитории…