Is it possible to embed an old JS application in an iframe in new React website

Question

I have an older JS application that I want to modify a little and embed in a React website I am creating, it is legacy software so I can't rewrite it. I tried to integrate it but the older JS app has no node_modules and uses require.js to require local dependencies which seemed to cause issues as the requirejs.config() seemed to have no effect so none of the dependencies were available.

I thought it may be possible to run this older JS app separate to the rest of the website and thought maybe I could embed it in an iframe then communicate to it with window.postMessage() or similar, I know it's not as simple as creating an iframe with src="oldJSApp.html" so was hoping to get some help on how this would be achievable?

Was hoping it would be possible to bundle it with my existing build system (webpack) but know it may not be possible.

Cimmerian

Answer 1

I ended up going with my original idea, hosting the old JS app on its own on a different server and using an iframe to render it in, then window.postMessage() to communicate when required. Ended up being a much better solution than I expected.

Cimmerian

Answer 2

Part of your functionality which relies on legacy code, should be encapsulated enough where it just acts a black box which only worries about input and renders the output for you. You might find this one interesting and i think you should start your research from here, https://v8.dev/features/modules where it talks about loading your script and how it interacts in your application which is supported on all browsers and how it behaves in your application.

Basis