Babel.js: Uncaught TypeError: _interopRequireDefault is not a function

Question

我使用babel.jsnode.jsAPI编译react jsx和js脚本

例如，我有以下 node.js 脚本：

// react_transform.js 

const fs = require("fs");

code = fs.readFileSync("./samples/sample4.js", 'utf8');

result2 = require("@babel/core").transformSync(code, {
    presets: [
        "@babel/preset-env",
        "@babel/preset-react",
    ],
    plugins: [
        "@babel/plugin-transform-runtime",
    ],
});

fs.writeFileSync(`./out/out4.js`, result2.code);

console.log("y.");

包含 jsx 代码的输入文件如下：

// sample4.js

ReactDOM.render(
    <div>
        <p>
            hoge.
        </p>
    </div>
    ,
    document.getElementById('root')
);


$(".__upvote").click(async function (e) {
    alertify.warning("You need to login.");
});

在node.js脚本中没有"@babel/plugin-transform-runtime",行，当我在浏览器上使用脚本时（输出代码应该位于生产中的位置），它会导致错误：

VM496:9 Uncaught ReferenceError: regeneratorRuntime is not defined

因此，我进行了研究并添加了该行。但是现在我开始得到一个新的错误：

VM830:5 Uncaught TypeError: _interopRequireDefault is not a function

顺便输出js文件如下：

// out4.js 

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "hoge.")), document.getElementById('root'));
$(".__upvote").click( /*#__PURE__*/function () {
  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
    return _regenerator["default"].wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            alertify.warning("You need to login.");

          case 1:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  return function (_x) {
    return _ref.apply(this, arguments);
  };
}());

所以我再次研究了新的错误，找到了 SO post:

人们说：

Add @babel/runtime to the dependency section. That will fix it.

After add "@babel/runtime", I fixed it

所以我将“@babel/runtime”添加到 package.json 然后 npm install-ed。现在 package.json 就像（我省略了不相关的行）：

{
    "name": "tmp",
    "version": "1.0.0",
    "description": "",
    "main": "lodash_dev.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@babel/runtime": "^7.17.8",
    },
    "devDependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/plugin-transform-react-jsx": "^7.17.3",
        "@babel/plugin-transform-runtime": "^7.17.0",
        "@babel/preset-env": "^7.16.11",
        "@babel/preset-react": "^7.16.7",
    }
}

然后重新运行 node.js 脚本，我得到了输出，我在浏览器的页面上测试了它，但是，由于某种原因，错误仍然存在。

我该如何解决这个问题？谢谢。

Answer 1

您正在使用 Babel 转换代码，但您不是运行 esbuild 或 webpack 等打包工具。

require() 不是浏览器中的东西。捆绑器的职责（除其他事项外）是接受所有这些 require() 调用并将它们解析为真正的模块，并最终得到一个（或多个）包含所有 require()d 的 .js 文件代码，没有 require()s.

Babel.js: Uncaught TypeError: _interopRequireDefault is not a function

Babel.js: Uncaught TypeError: _interopRequireDefault is not a function

javascript

babeljs