How to properly configure laravel + inertia + react + typescript?

I have tried to configure these by reading stuff from multiple places. It is working fine except for one place. I am not getting any type hint on react hooks.

tsconfig

{
    "compilerOptions": {
        /* Language and Environment */
        "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
        "jsx": "react" /* Specify what JSX code is generated. */,

        /* Modules */
        "module": "ES2022" /* Specify what module code is generated. */,
        "moduleResolution": "Node" /* Specify how TypeScript looks up a file from a given module specifier. */,
        "types": [
            "vite/client"
        ] /* Specify type package names to be included without being referenced in a source file. */,
        "resolveJsonModule": true /* Enable importing .json files. */,
        "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
        "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

        /* Type Checking */
        "strict": true /* Enable all strict type-checking options. */,
        "noImplicitAny": false /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
        "skipLibCheck": true /* Skip type checking all .d.ts files. */,
        "paths": {
            "@/*": ["./resources/js/*"]
        }
    }
}

Am I missing something?

WizAmit

3 years ago

Best Answer

Level 3

Here's a solution from chatGPT that worked 👇

You might be missing the @types package for React in your tsconfig.json file. You can add the package by running npm install --save-dev @types/react

Once the package is installed, you can add the following line to your tsconfig.json file:

"types": ["react", "vite/client"]

This will allow TypeScript to recognize React components and provide type hints for React hooks.

Note: You may also need to set the jsx option to preserve in your tsconfig.json file:

"jsx": "preserve"

This will ensure that the JSX syntax is preserved in your TypeScript code and can be compiled by React.

I hope this helps! Let me know if you have any other questions.

Please or to participate in this conversation.