How to use scopes attribute ?

[xjArea]

Polyfill has the scopes attribute, but I can't understand how to use it, I write the code like below, but it can't work, DevTool report : GET http://localhost:2334/test/old/vue2 net::ERR_ABORTED 404 (Not Found), does anyone can tell me why ? I searched in the readme.md but without any useful info. 😓

<script async="async" src="https://cdn.jsdelivr.net/npm/es-module-shims@1.8.0/dist/es-module-shims.min.js"></script>
<script type="importmap">
{
	"imports" : {
		"vue3" : "https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.esm-browser.prod.js"
	},
	"scopes" : {
		"./old" : { "vue2": "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js" }
	}
}
</script>

<script type="module">
import * as vue3 from 'vue3';
import * as vue2 from './old/vue2';

console.log(vue3.version);
console.log(vue2.version);

// GET http://localhost:2334/test/old/vue2 net::ERR_ABORTED 404 (Not Found)
</script>

[chase-moskal]

👋 hello, @xjArea

• you can read about how to use import maps scopes feature here — https://github.com/WICG/import-maps#scoping-examples
• my import map generator importly, which is designed to work with es-module-shims, implements package scopes in order to properly load specific versions of subdependencies (when you feed it your package-lock.json) — https://github.com/chase-moskal/importly

[xjArea]

@chase-moskal Thank you for your reply. 🌹
After checking the WICG link, I try, but fail again, what's wrong with my demo. 😩

<script async="async" src="https://cdn.jsdelivr.net/npm/es-module-shims@1.8.0/dist/es-module-shims.min.js"></script>
<script type="importmap">
{
	"imports" : {
		"vue" : "https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.esm-browser.prod.js"
	},
	"scopes" : {
		"/" : { "vue": "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.esm.browser.min.js" }
	}
}
</script>

<script type="module">
import vue from './vue';
console.log(vue);
</script>

[chase-moskal]

@xjArea

perhaps compare yours against this importmap.example.json generated by importly, which works, as far as i know.

strictly speaking, this issue is not related to es-module-shims — so i suggest asking for support regarding import maps somewhere like stackoverflow, or the webdev subreddit, or an ai like chatgpt.

however, if you do find a working solution, it would be prudent to post it here anyways, as people with a similar problem may be redirected here by a search engine.

cheers 👋

[corebsp]

@xjArea

This is a simple fix. Your import should be 'vue' not './vue'.
If you make that change it works.