ERR_UNSUPPORTED_DIR_IMPORT error when used with Vite + Nuxt + Histoire
Opened this issue · 0 comments
Hey all,
First, thanks @marnusw for your awesome lib!
A bit of context first:
- I've got a brand new Nuxt 3 project (Vite being the build mechanism) with Histoire (kinda of Storybook for Vue projects).
- I'm using date-fns-tz of course :-)
- my Nuxt app works great with date-fns-tz. No build error
However, when I build my Histoire stories thru the Histoire CLI, I got this weird compiling error:
Error while collecting story /Users/foo/hello-world/components/HelloWord.story.vue:
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/foo/hello-world/node_modules/date-fns-tz/dist/esm' is not supported resolving ES modules imported from /Users/foo/hello-world/node_modules/vite-node/dist/client.mjs
Did you mean to import "/Users/foo/hello-world/node_modules/date-fns-tz/dist/esm/index.js"?
at finalizeResolution (node:internal/modules/esm/resolve:259:11)
at moduleResolve (node:internal/modules/esm/resolve:933:10)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
at ModuleLoader.import (node:internal/modules/esm/loader:322:34)
at importModuleDynamically (node:internal/modules/esm/translators:160:35)
at importModuleDynamicallyCallback (node:internal/modules/esm/utils:225:14)
at ViteNodeRunner.importExternalModule (file:///Users/foo/hello-world/node_modules/vite-node/dist/client.mjs:357:5)
Sure Histoire is definitively doing something wrong since it works without it. I tried to understand what was wrong here.
It turned out that in a specific case, Vite doesn't pick the ESM files of a lib even if the package.json file tells so.
A good explanation has been written here: https://github.com/sheremet-va/dual-packaging
Indeed, if I modified manually the package.json
file by replacing the file extension for ESM files ("import": "./dist/esm/fromZonedTime/index.js"
-> `"import": "./dist/esm/fromZonedTime/index.mjs") and of course, renaming the files accordingly, the error vanishes.
My conclusion is that the date-fns-tz build:esm
script should be generate mjs
files.
(might be related to #273).
Thanks!