Parcel use in a migrated react project to single-spa

[litofilho]

I migrated a react application to single-spa and I need to render a Parcel within my application. Imported as a common application, the other app works normally but when trying to place it with a Parcel, I cannot import the application. As the application is using version 18 of React, I cannot use System.import() to import the Parcel and when I try to use just import() the module is not found.

import * as serviceWorker from './serviceWorker.js';
import { registerApplication, start } from 'single-spa';

registerApplication(
  'root', 
  () => import('./root.tsx'),
  () => true,
);

registerApplication(
  "@ouribank/test",
  () => System.import("@ouribank/test").then(app => console.log(app)),
  (location) => location.pathname.startsWith("/test"),
);

start();
serviceWorker.register()

This works.

<Parcel config={()=>import('@ouribank/test')} />
This generate the following error:
application '@ouribank/test' died in status LOADING_SOURCE_CODE: Cannot convert undefined or null to object
TypeError: application '@ouribank/test' died in status LOADING_SOURCE_CODE: Cannot convert undefined or null to object
at hasOwnProperty ()
at http://localhost:3000/static/js/bundle.js:11191:41
at async Promise.all (index 0)

<Parcel config={()=>System.import('@ouribank/test')} />
This generate the following error:
'System.import' is restricted from being used. Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting

[MilanKovacic]

System.import restriction comes from CRA eslint configuration:

https://github.com/facebook/create-react-app/blob/main/packages/eslint-config-react-app/index.js#L224

Try disablind the rule first.

[litofilho]

I disabled the rule and works. Thanks