jspm:import-mapping plugin never trigger

[veonline]

Seems that the resolveId hook fo the jspm:import-mapping plugin never triggers. I've npm create vite@latest my-vue-app -- --template vue and added the jspm plugin in my vite config as

export default defineConfig({
  plugins: [jspmPlugin({debug: true}), vue()] 
})

The import map is correctly generated and written in the index.html, but the the output js of the build seems to contain all the modules and when I serve the build directory the browser is not fetching anything from anywhere except the bundle's index.js from the localhost and the es-module-shims.js from ga.jspm.io.

In my package.json i have those deps

  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.3.2",
    "vite-plugin-jspm": "^0.4.0"
  }

Am I missing some piece of configuration or something trivial?

[JayaKrishnaNamburu]

Hello, can you try the latest 0.5 version of the plugin please. And feel free to share a repo if it still happens

[soulsam480]

seeing the same issue too after bundling. After running vite build or 'vite dev' it still bundles the entire library instead of loading it from CDN. I see an empty import map in the bundled html file. Here is a repro URL. I'm on

• vite -> 4.4.5
• jspm-plugin -> 0.5.1 https://stackblitz.com/edit/vitejs-vite-rjkm5r?file=dist%2Findex.html

[soulsam480]

I found out that in my case this only happens when the dependency in package.json. when it's there, this plugin doesn't generate a import map and vite bundles the app by taking the dependency from node_modules. as soon as I remove it, it works. is there any way to make the plugin force generate an import map even if the dependency is there in package.json ? or some form of include/exclude list ?

[JayaKrishnaNamburu]

Looks like vite might be resolving the deps from the node_modules before hitting the plugin. We should look into the use-case. So, the plugin get's resolved all the time even when deps are installed.

[soulsam480]

I don't have much idea about vite plugins, but I think plugin ordering can help https://github.com/jspm/vite-plugin-jspm/blob/main/plugin/src/index.ts#L180 https://vitejs.dev/guide/using-plugins.html#enforcing-plugin-ordering

I've started a thread in vite help channel of discord and linked this issue. https://discord.com/channels/804011606160703521/1174703054101168219/1174703054101168219 if you're there on discord please check it out. thank you for initiative

[soulsam480]

I think we can do something like this, I'll try to make it work this weekend https://github.com/MilanKovacic/vite-plugin-externalize-dependencies/blob/main/src/index.ts

[JayaKrishnaNamburu]

Hi @soulsam480 thanks for the follow-up on this. Highly appreciate it 😄

[soulsam480]

hey @JayaKrishnaNamburu , I made it work without the downloadDeps option https://github.com/soulsam480/vite-plugin-jspm/commit/71023ee9d260ba6d28f0270c99ef66b129e41f79#diff-8a5fbf50d373626ae826a0917ccac02a9a838e8dc7dc7f4cc34ea2fc00402219. I don't fully understand how downloadDeps is handled. if you can kindly point me to a doc explaining how the plugin is architected currently that'd be a great help.

Also the reason why it didn't work earlier is the deps were marked external in the post resolveId phase, which won't have any effect on deps externalization as vite has already built the app. also the tests couldn't catch it as it doesn't have a package.json. I've added a playground package which can be used to test it out.

[JayaKrishnaNamburu]

Hi @soulsam480 thanks for looking into this again. We can actually re-write the whole plugin. I was actually hopping to do it once. Here is a very simple implementation for the same with a rollup-plugin https://github.com/jspm/jspm-cli/blob/main/src/build/rollup-importmap-plugin.ts

The downloadDeps can just fetch the module and return the value and return to the build in load step. Or it can just mark it as external and then we can inject the import-map into the index.html file.