Can't add react application in angular as parcel app

[bullypb23]

Hi,

I am trying to use a single spa framework in my project and I want to build react and angular parcel apps and use them in angular and react applications as parcels. I have a problem with adding react application to angular as parcel app and I keep getting this error.

My angular application code where I want to use this parcel app.

The other way around I succeeded but I keep getting this error for this case. Would appreciate help regarding my issue.

[filoxo]

The problem is that you're using a relative import (import { bootstrap, mount, unmount } from '../../../react-test/src/thingsolver-react-test'). This is not how Parcels work.

First, you cannot import a React component directly into your Angular application. By using a relative import, that React component is being pulled into your Angular application and put through Angular's Webpack build pipeline which does not support React. Instead, that Parcel needs to be built and served separately in order to be able to resolve it at runtime using SystemJS and cross microfronted imports.

Second, your Parcel is already exporting the lifecycles so you to not need to import the individual lifecycles to create this object. Just do import * as thingsolverReactTestParcelConfig from 'thingsolver-react-test'.

[bullypb23]

Thank you for your response. Now I get this error. Do I need to change webpack config for my route angular application?

[filoxo]

You need to do two things:

1. Ensure that that package is in the externals array of your webpack config so that webpack knows that it should not try to bundle that module into your application, and
2. Obtain types for it somehow so that TypeScript will allow it to compile; the options for this are described in these issues
   • Cannot find module with typescript and utility module single-spa#609 (comment)
   • Document typescript for cross microfrontend imports. single-spa.js.org#361 (comment)

You can either enumerate each package to be marked as external or use a regex like our other base webpack configs do. I'm not super familiar with how Angular allows devs to modify their webpack configs, but our docs have an example of adding to the externals here: https://single-spa.js.org/docs/ecosystem-angular/#inter-app-communication-via-rxjs

[bullypb23]

Thank you @filoxo very much, you solved my problem. If I would have any questions in the future regarding this same problem I would ask them here.

[filoxo]

Glad you were able to get it working! I'm going to ahead and close this issue. Feel free to reopen if you encounter more bugs/issues, and you can always ask questions in the Slack channel too.