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

[eugene-khyst]

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?

[ProLoser]

There error is because <> is converted to React.someMethod() but honestly this is not very "zero configuration" so I sort of am wondering the same as you, IS this tsconfig.json file necessary? And why? I thought parcel is all about not having to create configuration files to please all these libraries and dependencies. You're literally forced to import a module because the generated code uses it but it's completely opaque to anyone looking at the source code.

[ProLoser]

https://parceljs.org/languages/typescript/#transpilation