如何解决使用 Babel 编译 ES6 时出现的 Cannot read property 'toString' of null 问题-JavaScript中文网-JavaScript教程资源分享门户

当使用 Babel 编译 ES6 代码时，有时会遇到 Cannot read property 'toString' of null 错误。这个错误通常与 Babel 编译过程中的一些配置和插件有关。

错误案例示例

以下是一个简单的 ES6 模块的代码：

export default function greeting(name) {
  return `Hello, ${name}!`;
}

如果您尝试通过 Babel 将其编译为 ES5 代码，并且启用了 @babel/plugin-transform-runtime 插件，则可能会收到以下错误消息：

TypeError: Cannot read property 'toString' of null
    at Object.<anonymous> (/path/to/project/node_modules/regenerator-runtime/runtime.js:259:21)

该错误实际上并非由您的代码本身引起，而是发生在运行时库 regenerator-runtime 中。

问题原因

在某些情况下，Babel 在处理 async/await 等异步语法时会用到 regenerator-runtime 库。然而，在没有正确配置 babel-plugin-transform-runtime 插件的情况下使用该库可能导致 Cannot read property 'toString' of null 错误。

解决方法

要解决此问题，您需要执行以下步骤：

第一步：安装必要的依赖项

确保已安装项目所需的所有依赖项。可以通过以下命令查看项目依赖项：

npm ls

如果发现缺少 @babel/runtime-corejs3 依赖项，请使用以下命令安装：

npm install --save @babel/runtime-corejs3

第二步：启用 @babel/plugin-transform-runtime 插件

确保在 Babel 配置文件（通常是 .babelrc 或 babel.config.js 文件）中启用了 @babel/plugin-transform-runtime 插件。该插件将自动引入在第一步中安装的 @babel/runtime-corejs3 库。

示例如下：

-- -------------------- ---- -------
-
  ---------- -
    --------------------- -
      -------------- --------
      --------- - ---------- - -
    --
  --
  ---------- -
    ---------------------------------
  -
-

注意，@babel/preset-env 预设的 useBuiltIns 选项应设置为 usage，以确保只导入代码实际需要的 polyfill 而不是所有 polyfill。

第三步：运行编译命令

运行 Babel 编译命令（通常是 babel 命令）。您应该可以看到已成功编译代码的输出。

结论

Cannot read property 'toString' of null 错误可能因为没有正确配置 @babel/plugin-transform-runtime 插件导致，而该插件可确保正常处理异步语法时能够加载正确的运行时库，从而避免此类错误。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672d6972ddd3a70eb6da514c