Can't seem to get jsx to work

[robdodson]

Hi, thank you for putting together this plugin!

I've been trying to get it to dynamically import jsx files but haven't quite got it to work and was hoping you could give me some advice.

The error I get is:

✘ [ERROR] The JSX syntax extension is not currently enabled

    components/layout.jsx:6:4:
      6 │     <>
        ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

I've enabled the loader in my build file so I'm not sure what I'm missing. I was wondering if the plugin might need to pass this information along somehow? Here is what I have:

esbuild.config.js

const DynamicImport = require('@rtvision/esbuild-dynamic-import').default;

require('esbuild')
  .build({
    logLevel: 'info',
    entryPoints: ['app.jsx'],
    bundle: true,
    outfile: 'out.js',
    platform: 'node',
    loader: {
      '.js': 'jsx',
    },
    plugins: [
      DynamicImport({
        transformExtensions: ['.jsx'],
        changeRelativeToAbsolute: true,
        filter: /.*\.jsx$/,
      }),
    ],
  })
  .catch(() => process.exit(1));

And here is the file that contains the dynamic import:

app.jsx

import * as React from 'react';

function main() {
  let layout = 'post';
  import(`./components/${layout}.jsx`).then((mod) => {
    console.log('import worked');
  });
}

main();

I was able to log the fileContents that the plugin generates and it looks correct, but it seems like when esbuild runs against this file it doesn't know to use the jsx loader. Any help is much appreciated!

import _DynamicImportModule0 from './components/layout.jsx';
import _DynamicImportModule1 from './components/post.jsx';
const _DynamicImportModuleMap = {'./components/layout.jsx':_DynamicImportModule0,'./components/post.jsx':_DynamicImportModule1};
function _DynamicImport(path) { return Promise.resolve({ default: _DynamicImportModuleMap[path], [Symbol.toStringTag]: 'Module' }); }
import * as React from 'react';

function main() {
  let layout = 'post';
  _DynamicImport(`./components/${layout}.jsx`).then((mod) => {
    console.log('import worked');
  });
}

main();

[kalvenschraut]

Are you able to statically import layout.jsx and post.jsx just fine without receiving the error? Try with the plugin setup in the config and without if it fails with. I know vue has its own plugin so not sure if there a difference here that is causing this issue. From what I remember it should see the imports when it processes the file and use whatever loader/plugin that is setup to handle it.

[kalvenschraut]

On more thought I recall this issue a bit more, the reason this worked fine for me is my filter was for .js files that dynamically imported .vue files. Overall problem as I remember it is your filter is setup to use .jsx, esbuild is not passing it off to the builtin .jsx loader. I will look into if esbuild has a any new updates or recommended ways around this now.

[kalvenschraut]

Hoping version 0.2.0 will fix this issue, you will need to add the loader property you the config and set it to 'jsx'. i.e. Thought about trying to grab it from the filter regex but seemed to error prone. Could maybe try to do that, but still allow the user to overwrite with the config.

    plugins: [
      DynamicImport({
        transformExtensions: ['.jsx'],
        changeRelativeToAbsolute: true,
        filter: /.*\.jsx$/,
        loader: 'jsx'
      }),