histoire-dev / histoire-dev/histoire
date-fns-tz doesn't work with Histoire
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
I described the issue and the solution here: https://github.com/marnusw/date-fns-tz/issues/299
When building my stories in a brand new Nuxt app embedding the date-fns-tz lib, I got this 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)
```
The `viteNodeInlineDeps` trick didn't help.
### Reproduction
1. generate a brand Nuxt app
2. add the `date-fns-tz` lib
3. generate a component and its story
4. in the component, include `import { fromZonedTime } from 'date-fns-tz/fromZonedTime';` and use it in the code.
5. run `yarn story:build`
### System Info
```shell
System:
OS: macOS 14.6.1
CPU: (12) arm64 Apple M2 Pro
Memory: 136.34 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
pnpm: 9.1.3 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
Browsers:
Safari: 17.6
npmPackages:
@histoire/plugin-nuxt: ^0.17.17 => 0.17.17
@histoire/plugin-vue: ^0.17.17 => 0.17.17
histoire: ^0.17.17 => 0.17.17
```
### Used Package Manager
yarn
### Validations
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Research direction
Reproduce the issue in a new Nuxt app using the listed steps and run `yarn story:build`. Start by tracing how Histoire and vite-node resolve the `date-fns-tz/fromZonedTime` import; done means the story builds without the unsupported directory import error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript, vite
- Domain
- build-system, devtools
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100