ts-node unable to compile JSX tags

Viewed 610

I am trying to compile JSX tags into HTML and then flushing them into an HTML file but somehow ts-node fails to compile the following piece of code.

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();
}

This is the error being thrown.

enter image description here

I have included "jsx": "react" in my tsconfig.json. My configuration is as follows:

{
      "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"
  ]
}
0 Answers
Related