marnusw/date-fns-tz

ERR_UNSUPPORTED_DIR_IMPORT error when used with Vite + Nuxt + Histoire

Opened this issue · 0 comments

did commented

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!