ts-node 无法编译 JSX 标签

Question

我试图将 JSX 标签编译为 HTML，然后将它们刷新到 HTML 文件中，但不知何故ts-node无法编译以下代码段。

private index = (request: Request, response: Response) => {
    // const component = React.createElement(Index, {key: 1, name: "Aman Sharma"}) // this works
    const component = <Index key={1} name="Aman Sharma" /> // throws error
    const html = ReactDOMServer.renderToString(component)
    fs.writeFileSync('website/index.html', html);
    response.status(200).send();
}

这是抛出的错误。

我已经包含"jsx": "react"在我的tsconfig.json. 我的配置如下：

{
      "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "lib": [
          "es2015",
          "dom"
      ],
      "moduleResolution": "node",
      "sourceMap": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "outDir": "build",
      "jsx": "react",
      "allowJs": true
  },
  "include": [
      "src/**/*.{ts,tsx}"
  ],
  "exclude": [
      "node_modules"
  ]
}

Answer 1

这为我解决了这个问题

"jsx": "react-jsx",