JSX files cannot be imported

[mattpocock]

SyntaxError: C:\...\alert\index.tsx: Unexpected token, expected "," (53:20)

  51 |
  52 |   const list = alerts.map((alert, index) => (
> 53 |     <AlertComponent key={index} status={alert.status}>
     |                     ^
  54 |       ...

[mattpocock]

Suggested fix would be to add a babel JSX plugin here:

const build = await rollup({
  input: resolvedFilePath,
  external: (id) => !/^(\.|\/|\w:)/.test(id),
  plugins: [
    nodeResolvePlugin({
      extensions,
    }),
    babelPlugin({
      babelHelpers: 'bundled',
      extensions,
      plugins: [
        '@babel/plugin-transform-typescript',
        '@babel/plugin-proposal-optional-chaining',
        ...
      ],
    }),
  ],
});

[rjdestigter]

I tried with

[
    '@babel/plugin-transform-typescript', { isTSX: true }],
    '@babel/plugin-transform-react-jsx',
]

First without isTSX: true but that didn't make a difference. Setting isTSX to true seems to resolve the issue (I'm running into imported css now lol) but I'm not sure if that's preferable.

[mattpocock]

@Andarist's new system will be completely Typescript-based, meaning we won't have to worry about Babel configs and can drop a lot of the complexity in extractMachines.ts. The current workaround would probably to put your files with machines in files which don't export JSX files or CSS files. How painful is that for you?

[rjdestigter]

The current workaround would probably to put your files with machines in files which don't export JSX files or CSS files. How painful is that for you?

Not at all. I was able to refactor the the module being imported from and exclude the files that were using jsx/css.