I would like to use TypeScript and React in Laravel Project

Question

I would like to use typescript and react in Laravel project. However, an error occurred when I did “nom run dev”. I know I have to change app.tsx to compile it. Where should I modify something else? I looked up to fix the following error. TS17004: Cannot use JSX unless the '--jsx' flag is provided. I modified tsconfig.json in my laravel project. but Cannot use JSX errors have still occurred. The error log is below.

[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.js is below

{
    "compilerOptions": {
      "outDir": "./built/",
      "sourceMap": true,
      "strict": true,
      "noImplicitReturns": true,
      "noImplicitAny": true,
      "module": "es2015",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "moduleResolution": "node",
      "target": "es6",
      "jsx": "preserve",
      "lib": [
        "es2016",
        "dom"
      ]
    },
    "include": [
      "resources/ts/**/*" // TypeScript
    ]
}

not really, I tried to those answers. but the problems didn't be fixed — user2006734, Feb 07 '20 at 10:02
Does using `"jsx": "react", "allowSyntheticDefaultImports": "true"` in your compiler options help? — r3dst0rm, Feb 07 '20 at 10:52

Sudhanshu Kumar · Answer 1 · 2021-01-25T07:50:27.600

Modify your tsconfig.json to process jsx properly

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

Probably you'll also need to configure the babel accordingly

Add this to your .babelrc file, if you don't have one, make one.

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

Make sure you have the appropriate packages installed:

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

I would like to use TypeScript and React in Laravel Project

1 Answers1