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

[DanweDE]

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

[DanweDE]

Regarding babel, tsdx's README.md seems highly contradictory to me, stating at one point "While yes, TSDX does use Babel [...] it does not support custom babel configurations" and then "You can add your own .babelrc to the root of your project and TSDX will merge it with its own babel transforms" 🤔

[swyxio]

good points. we may need to revisit that readme. meanwhile we'll need help digging into why this bug is happening, i dont really understand it myself. maybe something in our rollup config

[swyxio]

tsdx/src/createRollupConfig.ts

Line 159 in 1d8f123

extensions: [...DEFAULT_EXTENSIONS, 'ts', 'tsx'],

can you try locally modifying this to add .jsx and see if that fixes it

[DanweDE]

Thank you for the quick response @sw-yx! According to babel docs:

A list of default extensions supported by babel (".js", ".jsx", ".es6", ".es", ".mjs")

I tried anyways and can verify that their docs are accurate, so no positive effect.

Also, just tried microbundle and got it running using their --jsx="React.createElement" option, not sure that's of any help though 🤷‍♂️

[swyxio]

oh dear. then i dont know why it doesnt work 😅

[ivanvpan]

I am trying to achieve the exact same thing - switch to jsx: preserve and let babel take care of it. In my case in order to allow for Emotion babel plugin to work. Same issue - compiler does not recognize the jsx syntax even though @babel/preset-react is installed and included in .babelrc.

But the bug aside, does TSDX allow for custom babel conf or not? I agree that the README contradicts itself.

[ivanvpan]

So I put some console.log's in babelPluginTsdx ot output the config object that's coming in. It seems like none of the options from .babelrc are actually ending up in there. With my .babelrc looking like this:

{
  "presets": [
    "@babel/preset-react",
    "@emotion/babel-preset-css-prop"
  ]
}

The output of console.error(JSON.stringify(config.options, null, 2)); is:

{
  "sourceMaps": true,
  "caller": {
    "name": "rollup-plugin-babel",
    "supportsStaticESM": true,
    "supportsDynamicImport": true
  },
  "filename": "/home/ivp/repos/project/component-lib/src/Button/index.tsx",
  "babelrc": false,
  "configFile": false,
  "passPerPreset": false,
  "envName": "development",
  "cwd": "/home/ivp/repos/project/component-lib",
  "root": "/home/ivp/repos/project/component-lib",
  "plugins": [
    {
      "options": {},
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/babel-plugin-annotate-pure-calls/lib/index.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/babel-plugin-annotate-pure-calls/lib/index.js"
      }
    },
    {
      "options": {},
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/babel-plugin-dev-expression/dev-expression.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/babel-plugin-dev-expression/dev-expression.js"
      }
    },
    {
      "options": {
        "inlineHelpers": true,
        "externalHelpers": true
      },
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/babel-plugin-transform-async-to-promises/async-to-promises.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/babel-plugin-transform-async-to-promises/async-to-promises.js"
      }
    },
    {
      "options": {
        "loose": true
      },
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/@babel/plugin-proposal-class-properties/lib/index.js"
      }
    },
    {
      "options": {},
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js"
      }
    },
    {
      "options": {},
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js"
      }
    },
    {
      "options": {
        "async": false
      },
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/@babel/plugin-transform-regenerator/lib/index.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/@babel/plugin-transform-regenerator/lib/index.js"
      }
    },
    {
      "options": {},
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/babel-plugin-macros/dist/index.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/babel-plugin-macros/dist/index.js"
      }
    }
  ],
  "presets": [
    {
      "options": {
        "modules": false,
        "loose": true,
        "exclude": [
          "transform-async-to-generator",
          "transform-regenerator"
        ]
      },
      "dirname": "/home/ivp/repos/project/component-lib",
      "file": {
        "request": "/home/ivp/repos/project/component-lib/node_modules/@babel/preset-env/lib/index.js",
        "resolved": "/home/ivp/repos/project/component-lib/node_modules/@babel/preset-env/lib/index.js"
      }
    }
  ]

[swyxio]

👍 i dont remember when this feature was introduced, but i think in our switch back and forth on webpack plugins we probably broke this feature. cc @agilgur5

[agilgur5]

Can take a closer look tomorrow (just got back from weeks of travels today), but off the top of my head seems like a duplicate of #143

Regarding babelrc, that is a relatively new feature added in v0.9. Guess the babelrc section was added in the docs, but the old text saying it can't be customized hadn't been removed -- that one is out-of-date.
babelrc & babel.config.js seem to be working in several configs in #379

rollup-plugin-babel is only run after rollup-plugin-typescript2 runs, this has caused some Babel configs to error previously and is mentioned in #143

[agilgur5]

So TSDX already defaults compilerOptions.jsx to react, so that shouldn't need to be set:

tsdx/src/createRollupConfig.ts

Line 146 in 95ff6da

jsx: 'react',

The tsconfig setting also doesn't impact Babel config in any way, as far as I can tell.

According to #143 and ezolenko/rollup-plugin-typescript2#150 (comment) , your tsconfig.json needs to have:

{
  "include": [
    "*.ts+(|x)",
    "**/*.ts+(|x)",
    "*.js+(|x)",
    "**/*.js+(|x)"
  ],
  "compilerOptions": {
    "allowJs": true
  }
}

(or equivalent on the include part -- I think the default from tsdx create of src will handle this as well).

I'm guessing you already have that set? There isn't a full repro here so not sure.
The error is coming from Babel though, instead of rpts2, so I'm guessing you do. babelrc et al is handled by https://github.com/rollup/rollup-plugin-babel#custom-plugin-builder, but there might be a bug in TSDX's custom plugin that causes presets to not be merged if @babel/preset-env isn't in your babelrc:

tsdx/src/babelPluginTsdx.ts

Line 137 in 95ff6da

babelOptions.presets = createConfigItems('preset', [

Try adding @babel/preset-env to your babelrc? That would likely confirm that that line is the bug

There don't seem to be any tests for custom babel configs, so we'll have to create some, and that would help verify this possible bug better as well. Notably, none of the custom configs in #379 add any presets, only plugins

[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!

[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

[jlarmstrongiv]

I’m still encountering this bug. Luckily adding those two babel presets fixed it for me 👍

[agilgur5]

@jlarmstrongiv you don't need to add preset-env specifically as the bug in merging presets was resolved (and there's integration tests for it too now).

preset-react we don't ship with because for .tsx and .jsx files, TS will compile the JSX (according to the tsconfig jsx setting) and so it isn't necessary for Babel to do so. This also has a regression test for it now and is mentioned in #857 (comment)

I had been considering adding it and changing jsx to preserve, especially to support alternative JSX pragmas like @emotion/babel-preset-css-prop of #710, but I think adding it to our defaults would make it difficult to override for a different pragma, especially since plugin/preset order matters in Babel.