How do I include the main.bundle.js from other react app?


This is micro-frontends app(let’s call it MainContainer, run at http://localhost:3003). One of the apps that I need to include(let’s call A_Container), is an react app. It’s a code editor. I didn’t find an "elegant" way to do that, so I’m including the main.bundle.js directly in the MainContainer by javascript code like this:

function CodeEditor() {
  useEffect(() => {
    const script = document.createElement("script");
    //script.async = true
    //script.id = scriptId;
    script.crossOrigin = "";
    script.src = 'http://localhost:3005/main.bundle.js'
    document.head.appendChild(script);
    return () => {
      document.body.removeChild(script);
    }
  })

  const cstyle = {
    "width": "800px",
    "height": "600px",
    "border": "1px solid grey"
  }

  return <div id="container" style={cstyle}></div>
}

However, in the MainContainer app I’m getting erros and warnings on console (which seems to prevent the code editor to function properly), such as webworker couldn’t be loaded, fonts couldn’t be downloaded, syntax erros, etc. Errors that didn’t happen in the A_Container (that run at http://localhost:3005/). The erors/warnings look like this:

enter image description here

string version:

webpackHotDevClient.js:138 srcApp.js
  Line 1:28:  'useState' is defined but never used  no-unused-vars
printWarnings @ webpackHotDevClient.js:138
simpleWorker.js:18 Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/microsoft/monaco-editor#faq
logOnceWebWorkerWarning @ simpleWorker.js:18
2simpleWorker.js:20 Uncaught SyntaxError: Unexpected token '<'
logOnceWebWorkerWarning @ simpleWorker.js:20
:3003/editor.worker.bundle.js:1 Uncaught SyntaxError: Unexpected token '<'
localhost/:1 Failed to decode downloaded font: http://localhost:3003/8e177a557add1e5add06a1b5e20465ce.ttf
localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135

I’ll show below how to reproduce that error. However, it take some time so guesses on what could be the issue are accepted too.

To reproduce this error, create a new react app with npx like npx create-react-app deleteme then modify the App.js as the following:

import React, { useEffect, useState } from "react";
import './App.css';

function CodeEditor() {
  useEffect(() => {
    const script = document.createElement("script");
    //script.async = true
    //script.id = scriptId;
    script.crossOrigin = "";
    script.src = 'http://localhost:3005/main.bundle.js'
    document.head.appendChild(script);
    return () => {
      document.body.removeChild(script);
    }
  })

  const cstyle = {
    "width": "800px",
    "height": "600px",
    "border": "1px solid grey"
  }

  return <div id="container" style={cstyle}></div>
}

function App() {
  return (
    <div className="App">
      <CodeEditor/>
    </div>
  );
}

export default App;

modify the start property in the package.json as the foollowing:

"start": "SET PORT=3003 && react-scripts start"

now clone the repo monaco-languageclient repo. We need to build the project in /example folder running at 3005 port number. Before doing that, go to /example folder and modify the server.ts file as the following:

import * as express from "express";
import * as cors from "cors"

const app = express()
app.use(cors())
app.use(express.static(__dirname))
app.listen(3005)

add the cors module to that project:

yarn add cors

download the packages by running yarn then do:

yarn run build

yarn run start

if everything worked perfectly, you can see it at http://localhost:3005 . Look at the console window, one of the error messages I put in this thread should be there. Now go to deleteme project and type yarn run start go to http://localhost:3003. The error messages should be in the console window. How do I fix that?

Source: JavaSript – Stack Overflow

September 20, 2021
Category : News
Tags: javascript | monaco-editor | monaco-languageserver | npm | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.