Error: Unable to resolve bare specifier 'react'

[grgicpetar]

Hello guys,

I've been trying for the last few days to get one single-spa app shown with root config, but I'm failing to do that.

Steps I have taken:

1. Created root config app with "npx create-single-spa", type root-config
2. Created single-spa app with "npx create-single-spa", type app-parcel
3. in root config, I have registered single-spa app with:

svg-root-config.ts

registerApplication({
  name: "@svg/demo-app",
  app: () => System.import("@svg/demo-app"),
  activeWhen: (location) => location.pathname.startsWith("/"),
});

4. in index file, added import maps values:

   <script type="systemjs-importmap">
   {
     "imports": {
       "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.0/lib/system/single-spa.min.js",
       "@svg/demo-app": "//localhost:8500/svg-demo-app.js"
     }
   }
   </script>

<script>
    System.import('@svg/root-config');
    System.import("@svg/demo-app")
  </script>

5. updated single-spa app webpack with :

   output: { libraryTarget: "system" },

6. ran single-spa app with "npm start -- --port 8500" (in playground it works)

7. ran root config with "npm start"

And on localhost:9000 i am getting the following error: "system.js:552 Uncaught (in promise) Error: application '@svg/demo-app' died in status LOADING_SOURCE_CODE: Unable to resolve bare specifier 'react' from http://localhost:8500/svg-demo-app.js (SystemJS Error#8 https://git.io/JvFET#8)"

What am I missing?

[joeldenning]

Hi @5arg - it looks like you may have found the solution to this since you closed the issue already. However, the answer is to add react to your import map. You can do this inside of your index.ejs file within the root config:

<script type="systemjs-importmap">
  {
    "imports": {
      "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.1/lib/system/single-spa.min.js",
      "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
      "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"
    }
  }
</script>

We are aware that the create-single-spa initial developer experience could be improved here, and have an open PR that will help future users walk through this process more easily in the future. We hope that others won't run into that same issue without explanation!

[grgicpetar]

@joeldenning that was indeed the solution, if anyone else comes across this issue.

[mostafaasad]

I have included all the imports correctly still I am having the error, how to resolve this?

[joeldenning]

@mostafaasad here are a few things that could cause the problem:

1. Your import map script is incorrect. It needs to be <script type="systemjs-importmap"> and have {"imports": {}} at the top level. The spelling of "react" and "react-dom" is case sensitive. Trailing commas are not allowed in JSON, so watch for those.
2. You're inserting an import map into the DOM after the first System.import() occurs. This is explicitly disallowed by the import map specification, but systemjs allows you to work around it by calling System.prepareIImport(true) or using the dynamic-import-maps extra.

If you provide a demonstration of the issue, I can take a look.

[ytudt]

react

how to set react ant react-dom into importmap in the js file?

[SigmaVX]

I am seeing the same error. I used npx create-single-spa and am using the the following import map:

<script type="systemjs-importmap">
            {
                "imports": {
                    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
                    "react": "https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js",
                    "react-dom": "https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"
                }
            }
        </script>

However, I am getting the same error as the OP. Note the root and child SPS do mount but I am new in the single spa world so would like to know what is behind the error that i am missing. Note I configured the root with the optional Layout option.

[jmiguel221093]

Is there a way to import react as a local dependency? I mean from root expose any dependency to micro fronts?

[rutbergphilip]

@joeldenning Can't believe I missed that.. This worked!

[aviinaash]

@joeldenning Still I am getting the same error

app-errors.js:12 Uncaught Error: application '@jsw/access-control' died in status LOADING_SOURCE_CODE: Unable to resolve bare specifier 'react' from http://localhost:8081/jsw-access-control.js (SystemJS Error#8 )

`<!DOCTYPE html>

`

assets manager app is loading fine but the problem is with the access control app only

[joeldenning]

@aviinaash the information you provided isn't enough to diagnose the issue. A code repo, zip, or sandbox demonstrating the issue would be needed.