尝试使用 babel 的“无效映射”错误需要钩子和 polyfill 与 react jsx transpile

Question

我正在尝试将 babel 用于 ES6 和 JSX 转译以进行 mocha 测试。

假设我们有 test.jsx 这样的：

var React = require("react");
React.createClass({
  render: function(){
    return (<div>Hello World</div>);
  }
});

运行 babel test.jsx 给了我们有效的转换代码。没问题。

我希望如果我创建一个这样的 test.js 文件：

require("babel/register");
require("./test.jsx");

然后运行 node test.js，它会在线为我转译我的 jsx，但我得到一个错误：

c:\Users\user\dev\app\node_modules\babel\node_modules\babel-core\lib\babel\t
ransformation\file\index.js:628
      throw err;
            ^
Error: c:/Users/user/dev/app/test.jsx: Invalid mapping: {"generated":{"line"
:6,"column":11},"source":"c:/Users/user/dev/app/test.jsx","name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (c:/Users/user/dev/app/node_modules\babel\node_modules\source-map\lib\source-map\source-map-
generator.js:275:15)
    at SourceMapGenerator_addMapping [as addMapping] (c:/Users/user/dev/app/
node_modules\babel\node_modules\source-map\lib\source-map\source-map-generator.j
s:105:14)
    at SourceMap.mark (c:/Users/user/dev/app/node_modules\babel\node_modules
\babel-core\lib\babel\generation\source-map.js:65:9)
    at CodeGenerator.print (c:/Users/user/dev/app/node_modules\babel\node_mo
dules\babel-core\lib\babel\generation\index.js:236:16)
    at NodePrinter.plain (c:/Users/user/dev/app/node_modules\babel\node_modu
les\babel-core\lib\babel\generation\node\printer.js:16:27)
    at CodeGenerator.ReturnStatement (c:/Users/user/dev/app/node_modules\bab
el\node_modules\babel-core\lib\babel\generation\generators\statements.js:120:13)

    at CodeGenerator.print c:/Users/user/dev/app/node_modules\babel\node_mo
dules\babel-core\lib\babel\generation\index.js:238:22)
    at NodePrinter.plain (c:/Users/user/dev/app/node_modules\babel\node_modu
les\babel-core\lib\babel\generation\node\printer.js:16:27)
    at CodeGenerator.printJoin (c:/Users/user/dev/app/node_modules\babel\nod
e_modules\babel-core\lib\babel\generation\index.js:286:13)
    at NodePrinter.sequence (c:/Users/user/dev/app/node_modules\babel\node_m
odul

es\babel-core\lib\babel\generation\node\printer.js:23:27)

根据文档，这看起来应该可行。我是否遗漏了一些明显的东西，或者我应该将其报告为 babel 中的错误？

Answer 1

这是 a bug in acorn-jsx，Babel 使用的 JSX 解析器。推荐的修复方法是：

rm -rf node_modules/babel && npm install

尝试使用 babel 的“无效映射”错误需要钩子和 polyfill 与 react jsx transpile

`Invalid mapping` error trying to use babel require hook and polyfill with react jsx transpile

source-maps

react-jsx

babeljs