Error ReferenceError: regeneratorRuntime is not defined (Chrome Console Error - not during gulp / babel build)

Question

我有一个奇怪的问题，希望能得到一些帮助。

我有一个 WordPress 主题，我一直在使用包括 gulp & babel 在内的开发设置进行开发。我有一个具有开发环境和生产环境的托管服务提供商。到目前为止，我在构建主题、将其上传到开发环境并进行测试时没有遇到任何问题 - 一切都非常顺利。

现在我试图将相同的主题（我说的完全一样）上传到生产站点，而不是开发站点，我在控制台中收到以下错误：

Error retrieving XXX:  ReferenceError: regeneratorRuntime is not defined
    at bundle.js?ver=1.0.0:726
    at S (bundle.js?ver=1.0.0:726)
    at window.initMap (bundle.js?ver=1.0.0:726)
    .....

我搜索的所有内容都表明人们在尝试构建或运行他们的开发环境时遇到了这个问题，这与他们的 gulp 或 babel 有关安装程序，或他们正在使用的包。所以，我将在下面添加我的配置...虽然我很困惑为什么主题构建和运行s 在一个环境中没有错误，但在另一个环境中却因这个错误而倒下。

gulpfile.babel.js

// Gulp.js configuration
'use strict';

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

const

  // Gulp and plugins
  { src,
    dest, 
    watch, 
    series, 
    parallel 
  }             = require('gulp'),
  imagemin      = require('gulp-imagemin'),
  autoprefixer  = require('autoprefixer'),
  cssnano       = require('cssnano'),
  sass          = require('gulp-sass'),
  sourcemaps    = require('gulp-sourcemaps'),
  postcss       = require('gulp-postcss'),
  gulpif        = require('gulp-if'),
  cleanCss      = require('gulp-clean-css'),
  yargs         = require('yargs'),
  del           = require('del'),
  webpack       = require('webpack-stream')
 
[...]

// Task to build js file as bundle.js
export const scripts = () => {
  return src([
    js.src + 'map.js',
    js.src + 'bundle.js'
  ])
  .pipe(webpack({
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            }
          }
        }
      ]
    },
    optimization:{
      namedChunks: true,
      minimize: true, 
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /[\/]node_modules[\/]/,
            name: 'vendors',
            chunks: 'async'
          },
        }
      }
    },
    mode: PRODUCTION ? 'production' : 'development',
    devtool: !PRODUCTION ? 'inline-source-map' : false,
    output: {
      filename: js.filename
    },
  }))
  .pipe(dest(js.build))
}

[...]

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": "> 0.25%, not dead",
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": ["@babel/plugin-transform-runtime"]
}

我尝试更新 package.json 以使用 @babel/runtime 作为依赖项，以及 regenerator-运行time，我认为这不会做任何事情 - 但它没有't.

package.json

"browserslist": [
        "last 3 and_chr versions",
        "last 3 chrome versions",
        "last 3 opera versions",
        "last 3 ios_saf versions",
        "last 3 safari versions"
    ],
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/plugin-transform-runtime": "^7.10.5",
        "@babel/preset-env": "^7.10.4",
        "@babel/register": "^7.10.5",
        "autoprefixer": "^9.8.5",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.1.0",
        "browser-sync": "^2.26.7",
        "core-js": "^3.6.5",
        "cssnano": "^4.1.10",
        "del": "^5.1.0",
        "eslint": "^6.8.0",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^7.0.1",
        "gulp-babel": "^8.0.0",
        "gulp-clean-css": "^4.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-if": "^3.0.0",
        "gulp-imagemin": "^7.1.0",
        "gulp-notify": "^3.2.0",
        "gulp-postcss": "^8.0.0",
        "gulp-sass": "^4.1.0",
        "gulp-sourcemaps": "^2.6.5",
        "scss": "^0.2.4",
        "vinyl-named": "^1.1.0",
        "webpack-stream": "^5.2.1",
        "yargs": "^15.4.1"
    },
    "dependencies": {
        "@babel/runtime": "^7.10.5",
        "moment": "^2.27.0",
        "regenerator-runtime": "^0.13.5",
        "snazzy-info-window": "^1.1.1"
    }

引发错误的特定代码片段在我的 map.js 中（从 wp-rest api 中提取自定义帖子，并将它们填充到 google 地图上） , 并且低于:

import 'regenerator-runtime/runtime'; // top of file

[...]

const getXXX = () => {
    try{
      async function fetchXXX() {
        const res = await fetch(url);

        if(!res.ok){
          console.log('Error retrieving XXX:', res.status);
          throw new Error(res.status);
        }
        const data = await res.json();
        return data;
      }

      fetchXXX()
      .then(data => {
        xxx = data;
        renderXXX();
      })
      .catch(error => {
        console.log('Error retriving XXX: ', error);
      });
    } catch (err) {
      console.log('Error retrieving XXX: ', err);
    } 
  }

如果有人有任何指点，将不胜感激。

Answer 1

对于将来偶然发现此问题的任何人（可能不太可能）。

原来罪魁祸首是我们生产环境中使用的 CDN。我发现我上传的 bundle.js 文件与网站上提供的文件不一样，于是关闭了 CDN，这似乎解决了这个问题。 :/

Error ReferenceError: regeneratorRuntime is not defined (Chrome Console Error - not during gulp / babel build)

Error ReferenceError: regeneratorRuntime is not defined (Chrome Console Error - not during gulp / babel build)

javascript

wordpress

node.js

gulp

babeljs