CODEWITHSUNDEEP
single-spasingle-spa-react
jingjielim
jingjielim

Reputation: 1

ReactSharedInternals is undefined in single-spa application

I'm trying to set up a demo single-spa application by using the npx create-single-spa command and faced the following error.

Uncaught TypeError: application '@single-spa/react-app' died in status LOADING_SOURCE_CODE: ReactSharedInternals

I created the root-config with the following options:

? Directory for new project root-config
? Select type to generate single-spa root config
? Which package manager do you want to use? npm
? Will this project use Typescript? No
? Would you like to use single-spa Layout Engine Yes
? Organization name (can use letters, numbers, dash or underscore) single-spa

I then created a React app with the following options:

? Directory for new project react-app
? Select type to generate single-spa application / parcel
? Which framework do you want to use? react
? Which package manager do you want to use? npm
? Will this project use Typescript? No
? Organization name (can use letters, numbers, dash or underscore) single-spa
? Project name (can use letters, numbers, dash or underscore) react-app

I added the shared dependencies as advised by single-spa docs, and added my react app to the imports so my index.ejs looks like

<!DOCTYPE html>
...
    <script type="injector-importmap">
      {
        "imports": {
          "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/es2015/esm/single-spa.min.js",
          "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
          "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"
        }
      }
    </script>
...
    <% if (isLocal) { %>
    <script type="injector-importmap">
      {
        "imports": {
          "@single-spa/root-config": "//localhost:9000/single-spa-root-config.js",
          "@single-spa/welcome": "https://cdn.jsdelivr.net/npm/single-spa-welcome/dist/single-spa-welcome.min.js",
          "@single-spa/react-app":"http://localhost:8500/single-spa-react-app.js"
        }
      }
    </script>
    <% } %>
...

I also edited the microfrontend-layout.html to

<single-spa-router>
  <main>
    <route default>
      <application name="@single-spa/react-app"></application>
    </route>
  </main>
</single-spa-router>

When I load http://localhost:9000/ I expected to see the react app but instead keep hitting that error. I found some posts that says that my react and react-dom versions are not the same but I checked and the in browser react and react-dom scripts are v17.0.2 which is the same version as required by my react-app which has the following dependencies.

"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "single-spa-react": "^4.3.1"
  }

Any ideas what else might be wrong?

Upvotes: 0

Views: 881

Answers (1)

jingjielim
jingjielim

Reputation: 1

Solution TLDR: Upgrade React version v18.3.1

After tinkering for a whole day, I tried to upgrade to react 18.3.1

react-app package.json file:

...
"dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "single-spa-react": "^4.3.1"
  }
...

Changed the imports for react and react-dom in root-config index.ejs file:

...
    <script type="injector-importmap">
      {
        "imports": {
          "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/es2015/esm/single-spa.min.js",
          "react": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
          "react-dom": "https://ga.jspm.io/npm:[email protected]/dev.index.js"
        },
        "scopes": {
          "https://ga.jspm.io/": {
            "scheduler": "https://ga.jspm.io/npm:[email protected]/dev.index.js"
          }
        }
      }
    </script>
...

Initially I thought that it was still not working as the error message did not change. I then used the import map overrides tool to reset import map overrides and the react app immediately loaded up.

Steps to reset import map overrides:

  1. Go to the root-config page at localhost:9000
  2. In the browser console, run localStorage.setItem('devtools', true)
  3. Refresh the page.
  4. Click the small yellowish rectangle at the bottom right of the page.
  5. Click "Reset all overrides" button.
  6. Verify that react and react-dom is now coming from "ga.jspm.io"

Upvotes: 0

Related Questions