babel-register relative jsx imports

222 views Asked by At

I want to use babel-register to run a node app that serves a react app (server side rendering).

I am using it like this:

require('babel-register')({
  extensions: ['.jsx', '.js'],
  cache: false,
  ignore: /\/(build|node_modules)\//,
  presets: ['env', 'react-app'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./app'],
        extensions: ['.jsx', '.js'],
      },
    ],
    'syntax-dynamic-import',
    'dynamic-import-node',
    'react-loadable/babel',
  ],
});

The thing is, when I want to import a relative jsx file without the extension (suppose a Checkout.jsx file) like

import Checkout from './Checkout';

it imports an empty object {}. If I add the .jsx extension to the import like

import Checkout from './Checkout.jsx';

it works and imports the React component.

Any ideas why without the extension it not work?

Thanks!!

0

There are 0 answers