时间戳

首页 > 解决方案 > 在 Node v13 中为 React 应用程序使用 @babel/register

node.js - 在 Node v13 中为 React 应用程序使用 @babel/register

问题描述

我有一个使用构建的应用程序create-react-app，它有一个使用类似这样的入口点——</p> 

require('babel-register')({
  ignore: [/(node_modules)/],
  presets: ['es2015', 'react-app'],
  plugins: [
    'syntax-dynamic-import',
    'dynamic-import-node',
    'react-loadable/babel'
  ]
});
require('./index');

我正在升级 Node（从 v8 到 v13.5），并决定也升级 Babel。使用 Babel 7，上面这段代码被改写为——</p> 

require('@babel/register')({
  ignore: [/(node_modules)/],
  presets: ['@babel/preset-env', 'react-app'],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    'dynamic-import-node',
    'react-loadable/babel'
  ],
});
require('./index');

现在当我运行它时，我得到了错误——</p> 

internal/modules/cjs/loader.js:1160
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /my-app/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js
require() of ES modules is not supported.
require() of /my-app/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js from /my-app/server/controllers/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename asyncToGenerator.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /my-app/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/package.json.

我猜这是因为preset-env正在使用模块支持，因为它在我的 Node 版本（v13.6.0）中检测到它。如果这就是我可以解决此问题的方法，我该如何强制它使用es2015预设？它们长期以来一直被弃用，取而代之的是preset-env.

标签： node.jsreactjsbabeljscreate-react-app

解决方案

我偶然发现了关于 Babel 项目问题跟踪器的评论，该评论说BABEL_ENV应该设置test为转译模块。

链接评论中的相关代码在这里——</p> 

[
    isEnvTest && [
        // ES features necessary for user's Node version
        require('@babel/preset-env').default,
        {
            targets: {
                node: 'current',
            },
        },
    ],
    (isEnvProduction || isEnvDevelopment) && [
        // Latest stable ECMAScript features
        require('@babel/preset-env').default,
        {
            // Allow importing core-js in entrypoint and use browserlist to select polyfills
            useBuiltIns: 'entry',
            // Set the corejs version we are using to avoid warnings in console
            // This will need to change once we upgrade to corejs@3
            corejs: 3,
            // Do not transform modules to CJS
            modules: false,
            // Exclude transforms that make all code slower
            exclude: ['transform-typeof-symbol'],
        },
    ]
]

设置BABEL_ENV来test解决我的问题。

推荐阅读