9.5.4 breaks React apps, 9.8.1 doesn't work either

[kolya7k]

ERROR in ./scripts/index.tsx:8:27
TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("react-intersection-observer")' call instead.
  To convert this file to an ECMAScript module, add the field `"type": "module"` to 'package.json'.
     7 | import React from "react";
  >  8 | import { useInView } from "react-intersection-observer";

my tsconfig.json:

{
    "compileOnSave": true,
    "compilerOptions": {
        "strict": true,
        "skipLibCheck": true,
        "noEmitOnError": true,
        "removeComments": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "noFallthroughCasesInSwitch": true,
        "noPropertyAccessFromIndexSignature": true,
        "noUnusedParameters": true,
        "noImplicitOverride": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "forceConsistentCasingInFileNames": true,
        "esModuleInterop": true,
        "noEmitHelpers": true,
        "importHelpers": true,
        "isolatedModules": true,
        "resolveJsonModule": true,
        "allowImportingTsExtensions": true,

        "importsNotUsedAsValues": "error",
        "ignoreDeprecations": "5.0",

        "incremental": false,
        "rootDir": "scripts",
        "baseUrl": "scripts",
        "moduleResolution": "NodeNext",
        "allowJs": false,
        "module": "NodeNext",
        "target": "ES2020",
        "jsx": "react-jsx",
        "noEmit": true,

        "paths": {
            "/*": [ "*" ]
        },

        "types": [
            "node",
            "webpack-env",
            "youtube"
        ],
        "lib": [
            "ES2020",
            "dom"
        ]
    },
    "include": [ "scripts/**/*" ]
}

[thebuilder]

The error message is telling you the problem. Your project is not configured correctly for ECMAScript modules - But you are using the import (modules) syntax in your file.

You'll most likely want to change your moduleResolution to bundler. Using NodeNext is going to give you problems in a React application.

See something like the Vite React template for basic project configuration needs

[kolya7k]

If i do it it breaks Gulp (gulpfile.tsx) with

import zip from "bestzip";
^^^^^^

SyntaxError: Cannot use import statement outside a module

errors

i fixed it with adding

    "ts-node": {
        "compilerOptions": {
            "moduleResolution": "NodeNext",
            "module": "NodeNext"
        }
    },

to my tsconfig.json

thank you for the advice!