vite icon indicating copy to clipboard operation
vite copied to clipboard

Support loading jsr module specifiers and transpile its commonjs dependencies

Open danielbeeke opened this issue 7 months ago • 7 comments

Description

As a developer using Vite and jsr.io I would like to be able to load module specifiers such as npm:@iconify-icon/react@^3.0.0/dist/iconify.mjs in Vite while using node and NPM.

The part that is not working, is picking up the module specifiers and then transpiling commonjs modules.

Suggested solution

Support loading specifiers such as npm:@iconify-icon/react@^3.0.0/dist/iconify.mjs by rewriting them to iconify-icon/react/dist/iconify.mjs and also triggering the commonjs plugin on it to transpile to the contents.

Alternative

I tried creating a plugin for this. For resolveId I was able to get it to work, however the commonjs part seems to be a separate process where it is statically calculated. Is this a correct assumption?

Additional context

Related issue on jsr repo: https://github.com/jsr-io/jsr/issues/1097

Validations

danielbeeke avatar May 05 '25 14:05 danielbeeke

Hello @danielbeeke. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

github-actions[bot] avatar May 06 '25 00:05 github-actions[bot]

From the description alone, it's not clear what you are trying to do. Can you provide a reproduction to show what errors you are getting?

hi-ogawa avatar May 06 '25 00:05 hi-ogawa

The MWE is here:

https://github.com/danielbeeke/mwe-jsr-react-commonjs

danielbeeke avatar May 06 '25 07:05 danielbeeke

I tried creating a plugin for this. For resolveId I was able to get it to work

Can you also include that part?

hi-ogawa avatar May 06 '25 08:05 hi-ogawa

Deno has a Vite plugin that supports this: https://github.com/denoland/deno-vite-plugin. I'm not sure about the commonjs part but in any case it doesn't seem like something Vite-specific and would be handled in the plugin instead

bluwy avatar May 06 '25 08:05 bluwy

I tried creating a plugin for this. For resolveId I was able to get it to work

Can you also include that part?

Here it is: https://gist.github.com/danielbeeke/e8bf73fe17128c7c44263d80a28118f7

danielbeeke avatar May 06 '25 16:05 danielbeeke

Deno has a Vite plugin that supports this: https://github.com/denoland/deno-vite-plugin. I'm not sure about the commonjs part but in any case it doesn't seem like something Vite-specific and would be handled in the plugin instead

The problem with plugin is that you probably need to do dependency tree resolution because the pre-bundling runs before the plugins.

danielbeeke avatar May 06 '25 16:05 danielbeeke