Babel 7 - ReferenceError: регенератор Runtime не определен

Question

Babel 7 - ReferenceError: регенератор Runtime не определен

У меня есть приложение, которое является бэкендом узла и интерфейсом реакции.

Я получаю следующую ошибку, когда пытаюсь собрать / запустить приложение моего узла.

Узел: v10.13.0

Ошибка:

dist / index.js: 314 регенератор Runtime.mark(функция _callee (productId) {^
ReferenceError: регенератор Runtime не определен

.babelrc

{
    "presets": [    [
        "@babel/preset-env", {
          "targets": {
            "node": "current"
          },
        }
      ], "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

webpack.config.js

{
        mode: "development",
        entry: "./src/index.js",
        target: "node",
        externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
        stats: {
            colors: true
        },
        devtool: "source-map",

        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "index.js",
            sourceMapFilename: "index.js.map"
        },
        module: {
            rules: [
                {
                    enforce: "pre",
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "eslint-loader",
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"]
                        }
                    }
                }
            ],
        },
        node: {
            __dirname: false,
            __filename: false,
        },

        "plugins": [
            new CleanWebpackPlugin(),
            new WebpackShellPlugin({
                onBuildStart: [],
                onBuildEnd: ["nodemon dist/index.js"]
            }),

        ]

    },

package.json

 "dependencies": {
    "connect": "^3.6.6",
    "cors": "^2.8.5",
    "dotenv": "^6.1.0",
    "express": "^4.16.4",
    "hellojs": "^1.17.1",
    "i18n-iso-countries": "^3.7.8",
    "morgan": "^1.9.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "request": "^2.88.0",
    "request-promise-native": "^1.0.5",
    "serve-static": "^1.13.2",
    "vhost": "^3.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "eslint": "^5.9.0",
    "eslint-config-google": "^0.10.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-react": "^7.11.1",
    "extract-loader": "^3.0.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-node-externals": "^1.7.2",
    "webpack-shell-plugin": "^0.5.0"
  }

107

javascript node.js webpack babeljs babel

Источник

user9492765 30 ноя '18 в 13:55

9 ответов

Другие вопросы по тегам javascript node.js webpack babeljs babel

user4698242 02 фев '19 в 05:40 2019-02-02 05:40 · Answer 1 · 2019-02-02 05:40

Я только столкнулся с этой проблемой и наткнулся на следующее решение:

В package.json у меня было @babel/polyfill как зависимость. Однако в моем index.js (мой основной файл js) я пренебрег размещением следующей строки вверху:

import '@babel/polyfill'

После того, как я его импортировал, все работало нормально.

Мне не нужно было устанавливать babel-runtime, как подсказывают другие ответы.

user5669456 30 апр '20 в 09:54 2020-04-30 09:54 · Answer 2 · 2020-04-30 09:54

Babel 7.4.0 и новее

Вариант 1: @ babel / preset-env

Когда использовать: ✔ для приложений ✔ незначительное / желательное загрязнение в глобальном масштабе ✔ наименьший размер пакета

"presets": [
  [
    "@babel/preset-env",
    {
      "useBuiltIns": "usage", // alternative mode: "entry"
      "corejs": 3, // default would be 2
      "targets": "> 0.25%, not dead" 
      // set your own target environment here (see Browserslist)
    }
  ]
]

Установите зависимости времени выполнения:

npm i regenerator-runtime core-js
// regenerator-runtime: transform (async) generators and `async`/`await`
// core-js: other ECMAScript features like Promise, Set, etc.

@babel/preset-env выборочно включает полифиллы дляtargets, Задается Browserslist запроса. Есть два режима - попробуйтеusage сначала (удобнее), иначе entry (более гибкий и надежный):

useBuiltIns 'usage': нет необходимостиimportничего вручную. Все полифиллы добавляются автоматически в зависимости от использования их кода в файле.
useBuiltIns 'entry': добавьте этиimportзаписи один раз (!) в вашем приложении - сродни@babel/polyfill:
```
import "regenerator-runtime/runtime";
import "core-js/stable"; // or a more selective import such as "core-js/es/array"
```

Вариант 2: https://babeljs.io/docs/en/babel-plugin-transform-runtime

Когда использовать: ✔ для библиотек ✔ отсутствие загрязнения глобальной области ✔ включает все полифиллы (больший размер пакета)

"plugins": [
  [
    "@babel/plugin-transform-runtime",
    {
      "regenerator": true,
      "corejs": 3
    }
  ]
]

Установите зависимости разработчика и среды выполнения:

npm i --save-dev @babel/plugin-transform-runtime // only for build phase

npm i @babel/runtime // runtime babel helpers + just regenerator runtime
// OR (choose one!)
npm i @babel/runtime-corejs3 
// also contains other JS polyfills (not only regenerator runtime)
// depends on core-js-pure ("ponyfills"/polyfills that don't pollute global scope)

Примечания к выпуску

Критическоеизменение: @ babel / polyfill устарела, начиная с Babel 7.4.0.
Наследие: если вы не можете переключиться наcore-js@3, установлен corejs возможность 2(см. миграции). Установить@babel/runtime-corejs2 в случае варианта 2 (@babel/plugin-transform-runtime).
В варианте 1 вы потенциально можете добавить @babel/transform-runtime+ время выполнения только для помощников Babel, чтобы немного уменьшить размер пакета, но это более сложный случай (просто чтобы упомянуть).

user2832282 29 дек '18 в 23:08 2018-12-29 23:08 · Answer 3 · 2018-12-29 23:08

Здесь уже есть очень хороший ответ (первоначально размещенный на вопросе Babel6), который я просто переведу на Yarn. В основном вам нужно время выполнения babel (НЕ как зависимость dev) и плагин transform-runtime

yarn add @babel/runtime 
yarn add -D @babel/plugin-transform-runtime

И в.babelrc добавьте:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

user2263683 01 фев '20 в 16:07 2020-02-01 16:07 · Answer 4 · 2020-02-01 16:07

У меня была эта ошибка в моем react проект с webpack 4 и это мешало отрисовке всего проекта.

Вот как я это решил:

Установить plugin-transform-runtime:

npm install @babel/plugin-transform-runtime -D

Добавить plugin-transform-runtime в список плагинов в .babelrc файл:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/transform-runtime"]  // <= Add it here
  ]  
}

user8283938 13 май '22 в 14:19 2022-05-13 14:19 · Answer 5 · 2022-05-13 14:19

Для меня работало:

      module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

3

Источник

user8283938 13 май '22 в 14:19

user9832510 25 июл '23 в 08:44 2023-07-25 08:44 · Answer 6 · 2023-07-25 08:44

Убедитесь, что вы используете @babel/runtime версии 7.18 или новее.

Я нашел объяснение этой ошибки и решение здесь:https://github.com/ant-design/pro-comComponents/issues/5273#issuecomment-1133843012

0

Источник

user9832510 25 июл '23 в 08:44

user6455357 17 апр '20 в 04:24 2020-04-17 04:24 · Answer 7 · 2020-04-17 04:24

Я только что решил эту ошибку, когда импортировал babel-polyfill непосредственно в файл, который показывает ошибку, например, в сообщении об ошибке говорится: "ReferenceError: refreshratorRuntime не определен в /dist/models/usersSchema.js", поэтому я использую это в своем Файл usersSchema.js:

require("babel-polyfill");

(вы можете использовать import "babel-polyfill";также)

user3702294 30 ноя '18 в 14:05 2018-11-30 14:05 · Answer 8 · 2018-11-30 14:05

Вам нужно будет иметь регенератор Runtime.

Установите эти два пакета - babel-plugin-transform-Регенератор и babel-polyfill

Добавьте следующую конфигурацию Babel через .babelrc

{
  "plugins": ["transform-regenerator"]
}

-1

Источник

user3702294 30 ноя '18 в 14:05

user1831518 03 окт '19 в 16:52 2019-10-03 16:52 · Answer 9 · 2019-10-03 16:52

Пользователи React.js

Если эта проблема возникла у вас при использовании реакции (в частности, при попытке использовать Async / Wait), Валентино Гальярди предоставил подробный подход в своем блоге относительно того, как решить эту проблему.

-2

Источник

user1831518 03 окт '19 в 16:52