npm specifiers don't seem to work in islands

[nnmrts]

Using npm specifiers like import { camelCase } from "npm:lodash" or import { optimize } from "npm:svgo" works fine outside of islands, but using them in islands throws with this error:

Listening on http://localhost:8000/
[Function]
✘ [ERROR] Do not know how to load path: deno:npm:lodash-es

    deno:file:///Volumes/hdd1/projects/fresh-npm-test/islands/Counter.tsx:4:26:
      4 │ import { camelCase } from "npm:lodash-es";
        ╵                           ~~~~~~~~~~~~~~~

An error occurred during route handling or page rendering. Error: Build failed with 1 error:
deno:file:///Volumes/hdd1/projects/fresh-npm-test/islands/Counter.tsx:4:26: ERROR: Do not know how to load path: deno:npm:lodash-es
    at failureErrorWithLog (https://deno.land/x/esbuild@v0.14.51/mod.js:1601:15)
    at https://deno.land/x/esbuild@v0.14.51/mod.js:1243:28
    at runOnEndCallbacks (https://deno.land/x/esbuild@v0.14.51/mod.js:1023:63)
    at buildResponseToResult (https://deno.land/x/esbuild@v0.14.51/mod.js:1241:7)
    at https://deno.land/x/esbuild@v0.14.51/mod.js:1354:14
    at https://deno.land/x/esbuild@v0.14.51/mod.js:655:9
    at handleIncomingPacket (https://deno.land/x/esbuild@v0.14.51/mod.js:752:9)
    at readFromStdout (https://deno.land/x/esbuild@v0.14.51/mod.js:621:7)
    at https://deno.land/x/esbuild@v0.14.51/mod.js:1880:11

The site still seems to load fine and the affected component even renders once, but obviously stops working after that. I guess only the browser rendered part of the component crashes but I honestly don't really know.

Normally a workaround for this would be using something like https://esm.sh, but for some modules like svgo or dompurify I can't seem to find a way to get it working without using npm:dompurify.

Made a reproduction repo: https://github.com/nnmrts/fresh-npm-test

Sorry if this is expected, perhaps because npm specifiers are still unstable (I think?), but would still appreciate some sort of workaround.

[codesculpture]

Greetings, I think npm specifiers stabled. But our actual islands code or any route code are all transpiled using esbuild - A transpiler to convert ts, jsx to js. So the thing is esbuild is not specifically built for deno. So it not transpile source from npm specifiers yet. Maybe in future it will be. I hope. Thank You

[truepilot]

I've run into the same issue today. It's driving me bonkers.

[codesculpture]

A small hack that is
Change the add --node-modules-dir flag at start task in deno.json. And now u can see node_modules folder in your current directory. If u want to install some package from npm. Just import it in somewhere route folder and remove the import from code. But now u can see in node_modules the package. So directly import by its location island. Yeah it seems bad. But yet there is no update from es-build and fresh. :(

[mitchwadair]

I am also running into this issue. It would be very helpful to support npm specifiers in islands

[codesculpture]

I am also running into this issue. It would be very helpful to support npm specifiers in islands

evanw/esbuild#2782
Here opened a issue regarding this in Esbuild..

[mitchwadair]

I took a quick look at how Fresh builds with esbuild. Looks like it uses a deno loader plugin. The plugin already has an open issue to address this problem

[codesculpture]

Hey, thanks for the information that it uses denoplugin. But i think that issue is for http imports i guess. And it resolved. And it seem they dint talked about npm-specifiers there. But apart, from that i have an idea to implement npm specifier bundling in denoPlugin..
So if you are going to do please inform here.

[mitchwadair]

you can go for it if you want 👍

[jimisaacs]

Not sure if this is dup #974, maybe. Will follow what is mentioned here.

[codesculpture]

It was almost done.. i made a PR here need some tests... Just making sure everything is fine..lucacasonato/esbuild_deno_loader#33

[lucacasonato]

Closing as duplicate of #978