Please help!! Uncaught (in promise) ReferenceError: module is not defined

[martinshaw]

I have recently attempted to upgrade to v1 of Inertia in my Laravel/Inertia/React app.

Please, please, please can someone with more experience and knowledge of the various versions of Inertia and/or of webpack / tsconfig, let me know what I am missing here. My job is on the line.

I have upgraded 'inertiajs/inertia-laravel' using composer.
I have upgraded my node packages using Yarn.
Followed all of the steps in the Inertia upgrade guide.
Done tonnes of refactoring to use those renamed/moved types and components.

It seems to be able to load createInertiaApp and all other types / objects from @inertiajs/react and @inertiajs/core from within the resources/js/app.js, but not from within the 'Inertia page components' written in TypeScript.

Whatever I try, I cannot get rid of this error when loading any page in my app:

resources_js_Pages_Marketing_Welcome_MarketingWelcomePage_tsx.js:41240 Uncaught (in promise) ReferenceError: module is not defined
    at ./node_modules/@inertiajs/react/dist/index.js (resources_js_Pages_Marketing_Welcome_MarketingWelcomePage_tsx.js:41240:696)
    at __webpack_require__ (app.js:113705:42)
    at ./resources/js/Components/NavLinkButton.tsx (resources_js_Pages_Marketing_Welcome_MarketingWelcomePage_tsx.js:18056:15)
    at __webpack_require__ (app.js:113705:42)
    at ./resources/js/Components/GuestHeader.tsx (resources_js_Pages_Marketing_Welcome_MarketingWelcomePage_tsx.js:17259:39)
    at __webpack_require__ (app.js:113705:42)
    at ./resources/js/Layouts/GuestLayout.tsx (resources_js_Pages_Marketing_Welcome_MarketingWelcomePage_tsx.js:18370:37)
    at __webpack_require__ (app.js:113705:42)
    at ./resources/js/Pages/Marketing/Welcome/MarketingWelcomePage.tsx (resources_js_Pages_Marketing_Welcome_MarketingWelcomePage_tsx.js:18488:37)
    at __webpack_require__ (app.js:113705:42)

Files below (before/after):
composer.json (before):

{
    "name": "conscient/codeatlas-backend",
    "type": "project",
    "description": "CodeAtlas Backend",
    "keywords": ["platform", "data", "codeatlas"],
    "license": "",
    "private": true,
    "require": {
        "php": "^8.0",
        "beyondcode/laravel-websockets": "^1.13",
        "fruitcake/laravel-cors": "^3.0",
        "graham-campbell/github": "^11.0",
        "graham-campbell/manager": "^4.7",
        "guzzlehttp/guzzle": "^7.2",
        "hassankhan/config": "^3.1",
        "honeybadger-io/honeybadger-laravel": "^3.14",
        "htmlmin/htmlmin": "^9.0",
        "inertiajs/inertia-laravel": "^0.5.4",
        "intervention/image": "^2.7",
        "laravel/cashier": "^14.9",
        "laravel/framework": "^9.0",
        "laravel/sanctum": "^2.8",
        "laravel/scout": "^9.4",
        "laravel/socialite": "^5.5",
        "laravel/tinker": "^2.7",
        "laravie/serialize-queries": "^2.0",
        "laravolt/avatar": "^4.1",
        "league/flysystem-async-aws-s3": "^3.0",
        "league/flysystem-aws-s3-v3": "^3.0",
        "league/flysystem-sftp-v3": "^3.0",
        "meilisearch/meilisearch-php": "^0.23.1",
        "pusher/pusher-php-server": "^7.0",
        "spatie/laravel-medialibrary": "^10.0.0",
        "spatie/laravel-permission": "^5.5",
        "spatie/laravel-sluggable": "^3.3",
        "symfony/http-client": "^6.2",
        "symfony/postmark-mailer": "^6.2",
        "te7a-houdini/laravel-trix": "^2.0",
        "tightenco/ziggy": "^1.0"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.7",
        "barryvdh/laravel-ide-helper": "^2.12",
        "fakerphp/faker": "^1.20",
        "laravel/breeze": "^1.7",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^6.1",
        "phpunit/phpunit": "^9.5.10",
        "spatie/laravel-ignition": "^1.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ],
        "post-install-cmd": [
            "@php artisan ide-helper:models --dir='app'"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

composer.json (after):

{
    "name": "conscient/codeatlas-backend",
    "type": "project",
    "description": "CodeAtlas Backend",
    "keywords": ["platform", "data", "codeatlas"],
    "license": "",
    "private": true,
    "require": {
        "php": "^8.0",
        "beyondcode/laravel-websockets": "^1.13",
        "fruitcake/laravel-cors": "^3.0",
        "graham-campbell/github": "^11.0",
        "graham-campbell/manager": "^4.7",
        "guzzlehttp/guzzle": "^7.2",
        "hassankhan/config": "^3.1",
        "honeybadger-io/honeybadger-laravel": "^3.14",
        "htmlmin/htmlmin": "^9.0",
        "inertiajs/inertia-laravel": "^0.6.9",
        "intervention/image": "^2.7",
        "laravel/cashier": "^14.9",
        "laravel/framework": "^9.0",
        "laravel/sanctum": "^2.8",
        "laravel/scout": "^9.4",
        "laravel/socialite": "^5.5",
        "laravel/tinker": "^2.7",
        "laravie/serialize-queries": "^2.0",
        "laravolt/avatar": "^4.1",
        "league/flysystem-async-aws-s3": "^3.0",
        "league/flysystem-aws-s3-v3": "^3.0",
        "league/flysystem-sftp-v3": "^3.0",
        "meilisearch/meilisearch-php": "^0.23.1",
        "pusher/pusher-php-server": "^7.0",
        "spatie/laravel-medialibrary": "^10.0.0",
        "spatie/laravel-permission": "^5.5",
        "spatie/laravel-sluggable": "^3.3",
        "symfony/http-client": "^6.2",
        "symfony/postmark-mailer": "^6.2",
        "te7a-houdini/laravel-trix": "^2.0",
        "tightenco/ziggy": "^1.0"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.7",
        "barryvdh/laravel-ide-helper": "^2.12",
        "fakerphp/faker": "^1.20",
        "laravel/breeze": "^1.7",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^6.1",
        "phpunit/phpunit": "^9.5.10",
        "spatie/laravel-ignition": "^1.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ],
        "post-install-cmd": [
            "@php artisan ide-helper:models --dir='app'"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

package.json (before):

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.16.7",
        "@inertiajs/inertia": "^0.10.0",
        "@inertiajs/inertia-react": "^0.7.0",
        "@inertiajs/progress": "^0.2.6",
        "@types/lodash": "^4.14.182",
        "@types/papaparse": "^5.3.5",
        "@types/react-dom": "^17.0.11",
        "@types/react-scroll": "^1.8.3",
        "@types/uuid": "^8.3.4",
        "autoprefixer": "^10.4.2",
        "export-svg-loader": "^0.1.0",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "postcss-import": "^14.0.1",
        "react": "^18.1.0",
        "react-dom": "^17.0.2",
        "react-scroll": "^1.8.7",
        "ts-loader": "^9.2.6",
        "typescript": "^4.5.5",
        "url-loader": "^4.1.1"
    },
    "dependencies": {
        "@blueprintjs/core": "^4.9.4",
        "@blueprintjs/datetime": "^4.3.10",
        "@blueprintjs/icons": "^4.4.2",
        "@blueprintjs/popover2": "^1.6.4",
        "@blueprintjs/select": "^4.6.4",
        "@blueprintjs/table": "^4.6.5",
        "@blueprintjs/timezone": "^4.4.10",
        "@excalidraw/excalidraw": "^0.15.2",
        "@lexical/clipboard": "^0.11.1",
        "@lexical/code": "^0.11.1",
        "@lexical/file": "^0.11.1",
        "@lexical/hashtag": "^0.11.1",
        "@lexical/link": "^0.11.1",
        "@lexical/list": "^0.11.1",
        "@lexical/mark": "^0.11.1",
        "@lexical/overflow": "^0.11.1",
        "@lexical/plain-text": "^0.11.1",
        "@lexical/react": "^0.11.1",
        "@lexical/rich-text": "^0.11.1",
        "@lexical/selection": "^0.11.1",
        "@lexical/table": "^0.11.1",
        "@lexical/utils": "^0.11.1",
        "@monaco-editor/react": "^4.4.6",
        "@types/crypto-js": "^4.1.1",
        "@types/csvtojson": "^2.0.0",
        "@types/flat": "^5.0.2",
        "@types/jsonminify": "^0.4.1",
        "@types/katex": "^0.14.0",
        "@types/prettier": "^2.7.0",
        "@types/prismjs": "^1.26.0",
        "@types/pusher-js": "^5.1.0",
        "@types/react": "^17.0.39",
        "@types/react-file-icon": "^1.0.1",
        "@types/react-motion": "^0.0.33",
        "@types/react-stickynode": "^4.0.0",
        "@types/react-syntax-highlighter": "^15.5.4",
        "@types/react-virtualized": "^9.21.21",
        "@types/semver": "^7.3.12",
        "@types/ua-parser-js": "^0.7.36",
        "@types/ziggy-js": "^1.3.1",
        "browser-locale": "^1.0.3",
        "browserify-fs": "^1.0.0",
        "copy-to-clipboard": "^3.3.1",
        "crypto-browserify": "^3.12.0",
        "crypto-js": "^4.1.1",
        "csvtojson": "^2.0.10",
        "dayjs": "^1.11.0",
        "file-loader": "^6.2.0",
        "find-focused-element": "^1.0.1",
        "flat": "^5.0.2",
        "glamor": "^2.20.40",
        "immutability-helper": "^3.1.1",
        "interweave": "^13.0.0",
        "interweave-autolink": "^5.1.0",
        "jq-web": "^0.5.1",
        "jsonminify": "^0.4.2",
        "katex": "^0.16.2",
        "laravel-echo": "^1.15.0",
        "lexical": "^0.11.1",
        "monaco-editor": "0.34.1",
        "papaparse": "^5.3.2",
        "path-browserify": "^1.0.1",
        "prettier": "^2.3.2",
        "pretty-bytes": "^6.0.0",
        "pusher-js": "^7.3.0",
        "react-confetti": "^6.1.0",
        "react-cookie": "^4.1.1",
        "react-dnd": "^16.0.1",
        "react-dnd-html5-backend": "^16.0.1",
        "react-file-icon": "^1.2.0",
        "react-markdown": "^8.0.3",
        "react-motion": "^0.5.2",
        "react-responsive": "^9.0.0-beta.6",
        "react-stickynode": "^4.1.0",
        "react-syntax-highlighter": "^15.5.0",
        "react-syntax-highlighter-virtualized-renderer": "^1.1.0",
        "react-virtualized": "^9.22.3",
        "react-virtualized-tree": "^3.4.1",
        "remark-gfm": "^3.0.1",
        "resolve-url-loader": "^5.0.0",
        "scroll-into-view-if-needed": "^3.0.6",
        "semver": "^7.3.7",
        "smooth-scroll-into-view-if-needed": "^2.0.0",
        "stream-browserify": "^3.0.0",
        "string-calculator": "^1.0.1",
        "strip-json-comments": "^5.0.0",
        "ua-parser-js": "^1.0.2",
        "use-async-memo": "^1.2.4",
        "use-debounce": "^8.0.4",
        "use-force-update": "^1.0.8",
        "use-prefers-color-scheme": "^1.1.3",
        "use-state-with-callback": "^3.0.2",
        "uuid": "^9.0.0",
        "xml-js": "^1.6.11",
        "yaml": "^2.1.3",
        "yjs": "^13.5.41"
    }
}

package.json (after):

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.16.7",
        "@types/lodash": "^4.14.182",
        "@types/papaparse": "^5.3.5",
        "@types/react-dom": "^18.1.0",
        "@types/react-scroll": "^1.8.3",
        "@types/uuid": "^8.3.4",
        "autoprefixer": "^10.4.2",
        "export-svg-loader": "^0.1.0",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "postcss-import": "^14.0.1",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
        "react-scroll": "^1.8.7",
        "ts-loader": "^9.2.6",
        "typescript": "^4.5.5",
        "url-loader": "^4.1.1"
    },
    "dependencies": {
        "@blueprintjs/core": "^4.9.4",
        "@blueprintjs/datetime": "^4.3.10",
        "@blueprintjs/icons": "^4.4.2",
        "@blueprintjs/popover2": "^1.6.4",
        "@blueprintjs/select": "^4.6.4",
        "@blueprintjs/table": "^4.6.5",
        "@blueprintjs/timezone": "^4.4.10",
        "@excalidraw/excalidraw": "^0.15.2",
        "@inertiajs/core": "^1.0.7",
        "@inertiajs/react": "^1.0.7",
        "@lexical/clipboard": "^0.11.1",
        "@lexical/code": "^0.11.1",
        "@lexical/file": "^0.11.1",
        "@lexical/hashtag": "^0.11.1",
        "@lexical/link": "^0.11.1",
        "@lexical/list": "^0.11.1",
        "@lexical/mark": "^0.11.1",
        "@lexical/overflow": "^0.11.1",
        "@lexical/plain-text": "^0.11.1",
        "@lexical/react": "^0.11.1",
        "@lexical/rich-text": "^0.11.1",
        "@lexical/selection": "^0.11.1",
        "@lexical/table": "^0.11.1",
        "@lexical/utils": "^0.11.1",
        "@monaco-editor/react": "^4.4.6",
        "@types/crypto-js": "^4.1.1",
        "@types/csvtojson": "^2.0.0",
        "@types/flat": "^5.0.2",
        "@types/jsonminify": "^0.4.1",
        "@types/katex": "^0.14.0",
        "@types/prettier": "^2.7.0",
        "@types/prismjs": "^1.26.0",
        "@types/pusher-js": "^5.1.0",
        "@types/react": "^18.1.0",
        "@types/react-file-icon": "^1.0.1",
        "@types/react-motion": "^0.0.33",
        "@types/react-stickynode": "^4.0.0",
        "@types/react-syntax-highlighter": "^15.5.4",
        "@types/react-virtualized": "^9.21.21",
        "@types/semver": "^7.3.12",
        "@types/ua-parser-js": "^0.7.36",
        "@types/ziggy-js": "^1.3.1",
        "browser-locale": "^1.0.3",
        "browserify-fs": "^1.0.0",
        "copy-to-clipboard": "^3.3.1",
        "crypto-browserify": "^3.12.0",
        "crypto-js": "^4.1.1",
        "csvtojson": "^2.0.10",
        "dayjs": "^1.11.0",
        "file-loader": "^6.2.0",
        "find-focused-element": "^1.0.1",
        "flat": "^5.0.2",
        "glamor": "^2.20.40",
        "immutability-helper": "^3.1.1",
        "interweave": "^13.0.0",
        "interweave-autolink": "^5.1.0",
        "jq-web": "^0.5.1",
        "jsonminify": "^0.4.2",
        "katex": "^0.16.2",
        "laravel-echo": "^1.15.0",
        "lexical": "^0.11.1",
        "monaco-editor": "0.34.1",
        "papaparse": "^5.3.2",
        "path-browserify": "^1.0.1",
        "prettier": "^2.3.2",
        "pretty-bytes": "^6.0.0",
        "pusher-js": "^7.3.0",
        "react-confetti": "^6.1.0",
        "react-cookie": "^4.1.1",
        "react-dnd": "^16.0.1",
        "react-dnd-html5-backend": "^16.0.1",
        "react-file-icon": "^1.2.0",
        "react-markdown": "^8.0.3",
        "react-motion": "^0.5.2",
        "react-responsive": "^9.0.0-beta.6",
        "react-stickynode": "^4.1.0",
        "react-syntax-highlighter": "^15.5.0",
        "react-syntax-highlighter-virtualized-renderer": "^1.1.0",
        "react-tsparticles": "^2.9.3",
        "react-virtualized": "^9.22.3",
        "react-virtualized-tree": "^3.4.1",
        "remark-gfm": "^3.0.1",
        "resolve-url-loader": "^5.0.0",
        "scroll-into-view-if-needed": "^3.0.6",
        "semver": "^7.3.7",
        "smooth-scroll-into-view-if-needed": "^2.0.0",
        "stream-browserify": "^3.0.0",
        "string-calculator": "^1.0.1",
        "strip-json-comments": "^5.0.0",
        "tsparticles": "^2.9.3",
        "ua-parser-js": "^1.0.2",
        "use-async-memo": "^1.2.4",
        "use-debounce": "^8.0.4",
        "use-force-update": "^1.0.8",
        "use-prefers-color-scheme": "^1.1.3",
        "use-state-with-callback": "^3.0.2",
        "uuid": "^9.0.0",
        "xml-js": "^1.6.11",
        "yaml": "^2.1.3",
        "yjs": "^13.5.41"
    }
}

tsconfig.json (before):

{
  "include": [                                  /* Fixes Laravel issue with infering JS module types */
    "resources/js/**/*"
  ],

  "typeAcquisition": { "enable": true },

  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["es2021", "DOM"],                            /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "jsx": "react-jsx",                                  /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
    // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": ".",                                      /* Specify the base directory to resolve non-relative module names. */
    "paths": {"@/*": ["resources/js/*"]},                /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "resolveJsonModule": true,                        /* Enable importing .json files */
    // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    "allowJs": true,                                     /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
    // "removeComments": true,                           /* Disable emitting comments. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    "allowSyntheticDefaultImports": true,                /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": false,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
    // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
    // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

tsconfig.json (after):

{
  "include": [                                  /* Fixes Laravel issue with infering JS module types */
    "resources/js/**/*"
  ],

  "typeAcquisition": { "enable": true },

  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["es2021", "DOM"],                            /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "jsx": "react-jsx",                                  /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
    // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": ".",                                      /* Specify the base directory to resolve non-relative module names. */
    "paths": {"@/*": ["resources/js/*"]},                /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "resolveJsonModule": true,                        /* Enable importing .json files */
    // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    "allowJs": true,                                     /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
    // "removeComments": true,                           /* Disable emitting comments. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    "allowSyntheticDefaultImports": true,                /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": false,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
    // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
    // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}