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

DanweDE · 2020-01-24T13:31:24Z

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

The text was updated successfully, but these errors were encountered:

DanweDE · 2020-01-24T14:01:51Z

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 · 2020-01-24T14:07:18Z

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 · 2020-01-24T14:08:19Z

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 · 2020-01-24T15:04:47Z

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 · 2020-01-24T18:03:39Z

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

ivanvpan · 2020-01-26T09:01:11Z

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 · 2020-01-27T20:51:50Z

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 · 2020-01-28T02:26:12Z

👍 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 · 2020-01-28T05:33:31Z

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 · 2020-01-29T13:10:32Z

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 · 2020-01-30T14:53:05Z

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

To use .jsx files in the upcoming rich text field editor we need tsdx 0.12 together with the workaround mentioned on jaredpalmer/tsdx#443

agilgur5 · 2020-01-30T21:42:00Z

@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

- To use .jsx files in the upcoming rich text field editor we need tsdx 0.12 together with the workaround mentioned on jaredpalmer/tsdx#443 - Use docz 1.3.2 - Ran `yarn upgrade`

- To use .jsx files in the upcoming rich text field editor we need tsdx 0.12.3 together with the workaround mentioned on jaredpalmer/tsdx#443 - Use docz 1.3.2 - Ran `yarn upgrade`

jlarmstrongiv · 2020-06-03T02:46:06Z

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

agilgur5 · 2020-06-04T13:42:43Z

@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.

swyxio added the help wanted Extra attention is needed label Jan 24, 2020

This was referenced Jan 29, 2020

(docs/fix): remove outdated language about custom Babel configs #467

Merged

Esmodule options in rollup output is always undefined #469

Closed

DanweDE added a commit to contentful/field-editors that referenced this issue Jan 30, 2020

chore: 🤖 Bump tsdx version to 0.12.0

98a20e8

To use .jsx files in the upcoming rich text field editor we need tsdx 0.12 together with the workaround mentioned on jaredpalmer/tsdx#443

DanweDE mentioned this issue Jan 30, 2020

chore: 🤖 Yarn upgrade, tsdx and docz version bump contentful/field-editors#36

Merged

DanweDE added a commit to contentful/field-editors that referenced this issue Jan 30, 2020

chore: 🤖 Bump tsdx version to 0.12.0

052b428

To use .jsx files in the upcoming rich text field editor we need tsdx 0.12 together with the workaround mentioned on jaredpalmer/tsdx#443

DanweDE added a commit to contentful/field-editors that referenced this issue Jan 30, 2020

chore: 🤖 Bump tsdx version to 0.12.0

ba64a80

To use .jsx files in the upcoming rich text field editor we need tsdx 0.12 together with the workaround mentioned on jaredpalmer/tsdx#443

This was referenced Jan 30, 2020

(fix): ensure Babel presets are merged #473

Merged

(fix): check for JSX extension for entry files #474

Merged

Support Rollup input extension .jsx #143

Closed

agilgur5 mentioned this issue Jan 31, 2020

docs: add agilgur5 as a contributor #446

Merged

swyxio closed this as completed in #473 Feb 2, 2020

agilgur5 changed the title ~~Using jsx in .jsx files not achievable~~ Using jsx in .jsx files not achievable -- Babel presets aren't used Mar 19, 2020

agilgur5 added the kind: bug Something isn't working label Mar 19, 2020

Repository owner locked as resolved and limited conversation to collaborators Sep 14, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DanweDE commented Jan 24, 2020 •

edited

Loading

DanweDE commented Jan 24, 2020

swyxio commented Jan 24, 2020

swyxio commented Jan 24, 2020

DanweDE commented Jan 24, 2020

swyxio commented Jan 24, 2020

ivanvpan commented Jan 26, 2020 •

edited

Loading

ivanvpan commented Jan 27, 2020 •

edited

Loading

swyxio commented Jan 28, 2020

agilgur5 commented Jan 28, 2020

agilgur5 commented Jan 29, 2020 •

edited

Loading

DanweDE commented Jan 30, 2020

agilgur5 commented Jan 30, 2020 •

edited

Loading

jlarmstrongiv commented Jun 3, 2020

agilgur5 commented Jun 4, 2020 •

edited

Loading

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

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

Comments

DanweDE commented Jan 24, 2020 • edited Loading

Current Behavior

Expected behavior

Additional context

Your environment

DanweDE commented Jan 24, 2020

swyxio commented Jan 24, 2020

swyxio commented Jan 24, 2020

DanweDE commented Jan 24, 2020

swyxio commented Jan 24, 2020

ivanvpan commented Jan 26, 2020 • edited Loading

ivanvpan commented Jan 27, 2020 • edited Loading

swyxio commented Jan 28, 2020

agilgur5 commented Jan 28, 2020

agilgur5 commented Jan 29, 2020 • edited Loading

DanweDE commented Jan 30, 2020

agilgur5 commented Jan 30, 2020 • edited Loading

jlarmstrongiv commented Jun 3, 2020

agilgur5 commented Jun 4, 2020 • edited Loading

DanweDE commented Jan 24, 2020 •

edited

Loading

ivanvpan commented Jan 26, 2020 •

edited

Loading

ivanvpan commented Jan 27, 2020 •

edited

Loading

agilgur5 commented Jan 29, 2020 •

edited

Loading

agilgur5 commented Jan 30, 2020 •

edited

Loading

agilgur5 commented Jun 4, 2020 •

edited

Loading