Babel options to use import instead of require (for rollup)

[joehua87]

Currently I see that react-imported-component/babel injects

const headerTemplate = template(
`var importedWrapper = require('react-imported-component/wrapper');`,
templateOptions
);

The problem is that the generated code is not work correctly in esm built (with rollup):

The generated code

var importedWrapper = require('react-imported-component/wrapper');
var PageA = loader(function () {
  return importedWrapper("imported_-14q99sb_component", Promise.resolve().then(function () {
    return _interopRequireWildcard(require('./pages/PageA'));
  }));
});
var PageB = loader(function () {
  return importedWrapper("imported_nl42ef_component", Promise.resolve().then(function () {
    return _interopRequireWildcard(require('./pages/PageB'));
  }));
});

If I manually change the code above to

import importedWrapper from 'react-imported-component/wrapper';
var PageA = loader(function () {
  return importedWrapper("imported_-14q99sb_component", import('./pages/PageA').then((m) => {
    return _interopRequireWildcard(m.default);
  }));
});
var PageB = loader(function () {
  return importedWrapper("imported_nl42ef_component", import('./pages/PageB').then((m) => {
    return _interopRequireWildcard(m.default);
  }));
});

Then it works perfectly

I can submit a PR if it's a suitable solution

Reproduce repo

https://github.com/joehua87/imported-component-rollup

[theKashey]

That's a good idea and thanks for the rollup example!

[joehua87]

I've just found out the problem is caused by babel-plugin-dynamic-import-node

After removing it & make some small quick fix on rollup, it works perfectly

plugins: [
  ...,
  replace({
    [`var importedWrapper = require('react-imported-component/wrapper');`]: `import importedWrapper from 'react-imported-component/wrapper';`,
    delimiters: ['', ''],
  }),
]

I've updated the example

🥂🥂

[theKashey]

https://github.com/theKashey/react-imported-component/blob/master/src/babel/babel.ts#L59

still something to be updated from my side.

[joehua87]

Ah, other issues for rollup are:

• (!!module).hot (cannot be found in native node esm)

  // Quick fix
  replace({
    '(!!module).hot': 'false',
    delimiters: ['', ''],
  }),

• global cannot be found on the browser; (need to be replaced with window)

[theKashey]

😅 that something I cannot fix that easely from my side. Sounds like there are two options:

• for module.hot - add configuration option to imported.json to disable "dev mode". Do something with global as well.
• or just create a rollup integration guide and document how to make them work together.