babel 7.x — Не удается разрешить ‘core-js/modules/es.array.concat’

#babeljs #webpack-4 #babel-loader #react-styleguidist

#babeljs #webpack-4 #babel-загрузчик #react-styleguidist

Вопрос:

Я обновил babel 6.x → 7.x , но возникли проблемы с запуском Webpack.

Он жалуется на отсутствие core-js/modules/* .

Мой babel.config.js находится в корневом каталоге. Я преобразовал ранее существующий .babelrc в js ( .babelrc также выдал те же ошибки). Я предполагаю, что это какое-то столкновение со всеми основными, corejs2 , материалами времени выполнения.

В моем src есть два приложения, мое и Styleguidist (in ./node_modules ). Мое приложение переносится и работает с тем же package.json/babel.config, но Styleguidist этого не делает.


Ошибка при запуске Styleguidist с webpack:

 Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/project/src/node_modules/react-styleguidist/lib/client/rsg-components/Slot'
 

/node_modules/react-styleguidist/lib/client/rsg-components/Slot.js :

 import "core-js/modules/es.array.concat";
import "core-js/modules/es.array.filter";
...
 

package.json

 "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime-corejs2": "^7.4.3",
}
"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.0.0",
    "@babel/plugin-transform-modules-commonjs": "^7.4.3",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.0",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
}
 

babel.config.js

 module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-react-jsx',
        'transform-vue-jsx',
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions"],
    comments: false
}
 

Комментарии:

1. Я посмотрел на Styleguidist’ package.json и увидел, что у них есть «core-js»: «^ 3.0.0». Я добавил это в свой package.json, и теперь он запускается!! Спасибо, я. Если кто-нибудь может объяснить мне причину 15 разных ядер и полизаполнений, я был бы признателен.

2. 2 приложения работают, но Jest не работает.

Ответ №1:

Цитата из Babel 7.4.0 выпуска :

@babel/polyfill — это не плагин или предустановка, а пакет времени выполнения: если бы мы добавили опцию для переключения между core-js @ 2 и core-js @ 3, обе версии пакета должны быть включены в ваш пакет. По этой причине мы решили отказаться от него: теперь вы должны загрузить core-js для полизаполнений и regenerator-runtime / runtime, если вы преобразуете генераторы:

Поскольку вы используете 7.4.3 версию babel, @babel/polyfill она может работать не так, как ожидалось. Вместо этого, пожалуйста, добавьте core-js и regenerator-runtime вручную. Цитата из core-js3 объявления о выпуске:

 Instead of

import "@babel/polyfill";

you should use those 2 lines:

import "core-js/stable";
import "regenerator-runtime/runtime";

Don't forget install those dependencies directly!

npm i --save core-js regenerator-runtime
 

Комментарии:

1. Этот ответ спас мой день.

2. Это было именно то, что мне было нужно.

Ответ №2:

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

«@babel/runtime-corejs3»: «^ 7.5.5»,

Не забудьте установить его на том же уровне, на котором у вас возникла проблема (на уровне разработчика, локального или производственного):

  npm i -D(or --save-dev) @babel/runtime-corejs3
 

Таким образом, в целом такого рода ошибки возникают, когда в версии происходят значительные изменения в зависимости от обновлений и они не совместимы с предыдущими версиями (изменения API). Действительно, corejs3 вообще не совместим с corejs2 или старше.

Комментарии:

1. Спасибо. Я просто забыл установить npm install core-js@3 --save , когда попытался установить "corejs": "3.21.1" для @babel/preset-env пресета внутри babel.config.json

Ответ №3:

Я нашел возможный ответ. Чтобы устранить эту ошибку, вы можете понизить версию core-js до 2.5.7. Эта версия создает правильную структуру каталогов с отдельными папками ES6 и ES7.

Чтобы понизить версию, просто запустите:

npm i -S core-js@2.5.7