Reactjs 我想在Laravel项目中使用TypeScript和React

我想在Laravel项目中使用typescript和react。 但是，当我执行“nom run dev”时发生了一个错误。 我知道我必须更改app.tsx来编译它。我应该在哪里修改其他内容？ 我查找以修复以下错误。 TS17004:除非提供'--JSX'标志，否则无法使用JSX。 我在laravel项目中修改了tsconfig.json。但仍然发生无法使用JSX的错误。 下面是错误日志

[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(23,21)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.

       Asset      Size   Chunks             Chunk Names
/css/app.css   177 KiB  /ts/app  [emitted]  /ts/app
  /ts/app.js  1.06 MiB  /ts/app  [emitted]  /ts/app

ERROR in ./resources/ts/components/Example.tsx 5:16
Module parse failed: Unexpected token (5:16)
File was processed with these loaders:
 * ../../../node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| export default class Example extends Component {
|     render() {
>         return (<div className="container">
|                 <div className="row justify-content-center">
|                     <div className="col-md-8">
 @ ./resources/ts/app.tsx 13:0-31
 @ multi ./resources/ts/app.tsx ./resources/sass/app.scss

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(1,8)
      TS1259: Module '"/Users/username/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(2,8)
      TS1192: Module '"/Users/username/node_modules/@types/react-dom/index"' has no default export.

ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx
./resources/ts/components/Example.tsx
[tsl] ERROR in /Users/username/Downloads/BookingProject/BookingProject/resources/ts/components/Example.tsx(7,13)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.

---

修改

tsconfig.json

以正确处理

jsx

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      // "esnext"
    ],
    // "allowJs": true,
    "skipLibCheck": false,
    "allowSyntheticDefaultImports": true, //you need this
    "strict": true,
    "alwaysStrict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsxdev", // can be (react, react-jsxdev, react-jsx). preserve will not convert jsx and preserve it, you don't need that
    "sourceMap": true,
    "experimentalDecorators": true,
    "baseUrl": "resources/js",
  },
  "include": [
    "resources" // I have my tsx and ts in this directory, modify this as per your needs
  ]
}

可能您还需要相应地配置babel

将此添加到您的

.babelrc

文件中，如果您没有，请制作一个

{
    "presets": [
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ],
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

确保已安装适当的软件包：

npm install --save-dev @babel/preset-react ts-loader typescript

---

不是真的，我试着回答这些问题。但是问题并没有通过在编译器选项帮助中使用

“jsx”：“react”，“allowSyntheticDefaultImports”：“true”

来解决？

npm install --save-dev @babel/preset-react ts-loader typescript