Can't resolve '@babel/runtime-corejs3/helpers/asyncToGenerator'

Question

背景

传统项目需要兼容浏览器保证支持es6语法，所以需要构建一个webpack的打包环境，将大量js的es6,es7等语法转成es5的js输出文件做替换。目前面临的问题是少部分的es6语法以及es7的async await语法不支持，需要@babel/plugin-transform-runtime支持，但是加上这个插件后语法下面的问题，无法解决

清单

安装包有@babel/preset-env、@babel/runtime、@babel/plugin-transform-runtime、@babel/plugin-transform-regenerator
babel-loader版本8.2.2。网上大量博客的配置已经不适用这个8.2.2版本
所有包如下所示

配置

.babelrc和webpack.config.js都做了配置，这两者新手不知道有什么区别
.babelrc文件

webpack.config.js配置的是babel-loader加载器

错误信息

我真的是尽力了啊，资料也查的差不多了，就是报这个错误，真的不想把时间浪费到这。。。实在不行直接把语法从es6改成es5吧？

Answer 1

@babel/plugin-transform-runtime插件 的配置项去掉下面这行试试，我猜是你指定了core-js导致找不到对应的polyfill。或者尝试npm i @babel/runtime-corejs3

"corejs": 3 // 移除

我写了个简单的例子，一次就过，不知道你是怎么回事。

• webpack.config.js

  const path = require('path');
  
  module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  }
  };

• .browserslistrc

  > 1%
  last 2 versions
  not dead

• package.json

{

  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/plugin-transform-runtime": "^7.13.15",
    "@babel/preset-env": "^7.14.1",
    "babel-loader": "^8.2.2",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0"
  }}