Using react component in a different application

Question

What I'm trying to achieve is:

Building simple react app - the template is create react app
Copying output file (main.*.js)
Pasting it in another react app
Importing render function to render the first app into the second one

Simple react app code:

interface Props {
  greeting: string;
}
export module AppModule {
  export const sendGreetings = ({ greeting }: Props) => {
    return `Hello ${greeting}`;
  };
}

Builder file code:

!function(){"use strict";var n;(n||(n={})).sendGreetings=function(n){var e=n.greeting;return"Hello ".concat(e)}}();

Trying to import this file into another app I get this error:

File 'c:/vscode/test-react-app/test-sc-react/src/main.783e0281.js' is not a module.ts(2306)

Which is obvious. I changed the output file manually to:

export function initApp(){"use strict";var n;(n||(n={})).sendGreetings=function(n){var e=n.greeting;return"Hello ".concat(e)}};

It works but the only function that I'm able to access is initApp but not sendGreetings

I've been struggling with this for a while now and I would really appreciate any helpful suggestions

I think your best bet is to communicate through global window object. in your sub application export any functions or values to window[myvalue] so the global apps, or side apps can access that. — Luke Celitan
– Luke Celitan, Commented Nov 21, 2022 at 15:15
It is a bit different, but maybe module federation could suit you: webpack.js.org/concepts/module-federation — IvanPenga
– IvanPenga, Commented Nov 23, 2022 at 16:39
Do you want to import your react app at runtime or build time? — lissettdm
– lissettdm, Commented Nov 24, 2022 at 21:14
You should look into the concept of micro-frontend which enable you to share code between projects even regardless of the source technology (for example you can even construct your application with different frameworks like React and Angular) — pheroMona13
– pheroMona13, Commented Nov 28, 2022 at 8:45

sultan · Accepted Answer · 2022-11-26 20:29:04Z

2

🎯 Solution #1

You can use an iframe to inject your react app:

<iframe src='path-to-your-app.html'/>

🎯 Solution #2

Go with micro-frontend architecture approach. Where a front-end app is decomposed into individual, semi-independent "microapps" working loosely together.

As a starting point, you can try npx create-mf-app instead of the CRA.

answered Nov 26, 2022 at 20:29

sultan

4,7292 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sparko Sol · Accepted Answer · 2022-11-22 08:21:13Z

0

I used Bit.dev for my components that are used across multiple applications & there is an article regarding your issue

https://blog.bitsrc.io/sharing-react-components-across-multiple-applications-a407b5a15186

I think it would help.

answered Nov 22, 2022 at 8:21

Sparko Sol

7254 silver badges9 bronze badges

Comments

Rohit Khandelwal · Accepted Answer · 2022-11-25 22:15:51Z

0

You can include your js code directly on run time. You can use window.addEventListener to load js/css incoming from an outside source. You just have to append that js to your document on the load event.

answered Nov 25, 2022 at 22:15

Rohit Khandelwal

6323 silver badges9 bronze badges

Collectives™ on Stack Overflow

Using react component in a different application

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related