Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ERR_UNSUPPORTED_DIR_IMPORT error when used with Vite + Nuxt + Histoire #299

Open
did opened this issue Sep 12, 2024 · 0 comments
Open

ERR_UNSUPPORTED_DIR_IMPORT error when used with Vite + Nuxt + Histoire #299

did opened this issue Sep 12, 2024 · 0 comments

Comments

@did
Copy link

did commented Sep 12, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant