Visual Studio Code reports errors in Parcel project with TypeScript and React

Question

I'm using Parcel 2.9.3 to build a webapp in TypeScript + React.

According to the docs https://parceljs.org/recipes/react/#jsx:

Parcel supports JSX automatically when it detects you are using React. If you’re using React 17 or later, it also automatically enables the modern JSX transform, which means you don't even need to import React for JSX to work

parcel serve src/index.html and parcel build src/index.html works without errors.

But without adding the tsconfig.json, the Visual Studio Code reports errors in tsx files. For example, App.tsx

export function App() {
  return (
    <>
      <h1>Hello world</h1>
    </>
  );
}

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

When I add the following tsconfig.json, Visual Studio Code stops reporting this error:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

But with such tsconfig.json I get the new error when defining a web worker:

new Worker(new URL('./worker.ts', import.meta.url), {
  type: 'module',
});

The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

Then tsconfig.json becomes

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "ES2022",
    "moduleResolution": "Bundler"
  }
}

Is creating such tsconfig.json the correct way of integrating Parcel with the Visual Studio Code for TypeScript + React project? What else should be added to the tsconfig.json?

Answer 1

Adding tsconfig.json to src directory solves Visual Studio Code error:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true
  }
}

It also lets doing type checking with command:

tsc --noEmit -p ./src/tsconfig.json