Using jsx in .jsx files not achievable -- Babel presets aren't used

Current Behavior

With my tsconfig.json’s compilerOptions.jsx set to "react", when using .jsx files that contain any jsx markup, on tsdx build I get

(babel plugin) SyntaxError: /path/src/File.jsx: Unexpected token (3:11)
  1 | import React from 'react';
  2 | export function SomeComponent() {
> 3 |     return <div>Foo</div>;
    |            ^
  4 | }

Now, I’d expect this to work out of the box with .jsx files but I also tried to instead set the tsconfig.json’s compilerOptions.jsx: "preserve" and use @babel/preset-react via my .babelrc

{
  "plugins": [
    ...
  ],
  "presets": ["@babel/preset-react"]
}

Still getting the same error. While the plugins I use seem to work, preset-react seems to not do the job for some reason.

Expected behavior

.jsx files’ jsx code should be transpiled according to the tsconfig’s jsx option or there should be another way to achieve this.

Additional context

Using the .tsx file extension instead of .jsx for the same file, everything works as expected while using jsx: "react" but still can’t get it to work with jsx: "preserve" plus Babel.

Your environment

Software	Version(s)
TSDX	0.12.3
TypeScript	3.7.3
Node	0.12
Operating System	Mac, Linux

[agilgur5]

@agilgur5 According to https://www.typescriptlang.org/docs/handbook/tsconfig-json.html with compilerOptions.allowJs: true it shouldn’t be necessary to explicitly add .jsx to includes.

Yes, I also wrote “(or equivalent on the include part)” in my comment above as there’s many ways of doing it.

But wow! It seems changing my .babelrc to use

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

really does the trick!

Ok, think that confirms that that line I was looking at & referenced above is a bug. Thanks for checking that! I’ll get a PR out soon to fix that so you don’t need to add @babel/preset-env to get your other presets to work, but that should be an easy workaround for the time-being

[DanweDE]

@agilgur5 According to https://www.typescriptlang.org/docs/handbook/tsconfig-json.html with compilerOptions.allowJs: true it shouldn’t be necessary to explicitly add .jsx to includes.

But wow! It seems changing my .babelrc to use

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

really does the trick!