Comments (7)
joeldenning
commented on August 10, 2024
Hi @aflauberts, good question. Could you run the following in the browser console to help diagnose?
System.import('single-spa').then(singleSpa => {
// Should return MOUNTED
console.log(singleSpa.getAppStatus('@vue-mf/product'))
// Should return ['@vue-mf/product']
console.log(singleSpa.checkActivityFunctions())
})Additionally, you can check the browser devtools Inspector tab and search for <div id="single-spa-application:@vue-mf/product">. It should exist within the <body>
from root-config.
aflauberts
commented on August 10, 2024
Hello @joeldenning , tnks for quick response.
here´s my complete registration object for knowledge:
import { registerApplication, start } from "single-spa";
registerApplication({
name: "@vue-mf/navbar",
app: () => System.import("@vue-mf/navbar"),
activeWhen: () => true,
});
registerApplication({
name: "@vue-mf/dogs-dashboard",
app: () => System.import("@vue-mf/dogs-dashboard"),
activeWhen: "/storefront",
});
registerApplication({
name: "@vue-mf/product",
app: () => System.import("@vue-mf/product"),
activeWhen: ["/product/:sku"],
});
start();Coming from http://localhost:9000/storefront to http://localhost:9000/product/104550265, it works as shown below:
but, when force reload , the reference is lost and browser try to download "importmap" again from /product path:
from root-config.
joeldenning
commented on August 10, 2024
That error looks like your import map's src attribute is incorrect within your index.ejs file. Can you share the contents of the index.ejs file? It should be something like <script type="systemjs-importmap" src="/importmap.json">
from root-config.
aflauberts
commented on August 10, 2024
sure,
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Loja Online Vivo</title>
<meta name="importmap-type" content="systemjs-importmap" />
<script type="systemjs-importmap" src="src/importmap.json"></script>
<% if (isLocal) { %>
<script type="systemjs-importmap">
{
"imports": {
"@vue-mf/root-config": "http://localhost:9000/vue-mf-root-config.js"
}
}
</script>
<% } %>
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides/dist/import-map-overrides.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/named-exports.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<script>
System.import('@vue-mf/styleguide');
System.import('@vue-mf/root-config');
</script>
<import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>importmap.json
{
"imports": {
"@vue-mf/root-config": "https://vue.microfrontends.app/root-config/d0b3a0e07d664c29a33851d78692feb57bd57da8/vue-mf-root-config.js",
"@vue-mf/styleguide": "https://localhost:9001/vue-mf-styleguide.js",
"@vue-mf/navbar": "https://localhost:8501/js/app.js",
"@vue-mf/dogs-dashboard": "https://localhost:8502/js/app.js",
"@vue-mf/product": "https://localhost:8503/js/app.js",
"single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
"vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js",
"vue-router": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"
}
}folder tree:
from root-config.
joeldenning
commented on August 10, 2024
<script type="systemjs-importmap" src="src/importmap.json"></script>
^ Note how src/importmap.json is a relative URL. This means that it will download from a different location depending on the page URL. To fix, you likely need to make it an absolute URL:
<script type="systemjs-importmap" src="/src/importmap.json"></script>
from root-config.
aflauberts
commented on August 10, 2024
yes!, tnks a lot! at this moment i can not use external link to provide this json, so I put it content in-line on index.ejs and it's working.
tnks again!
from root-config.
joeldenning
commented on August 10, 2024
👍 glad to hear you've got it working.
from root-config.
Related Issues (7)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from root-config.