histoire-dev / histoire-dev/histoire
directory import is not supported resolving ES modules imported from csv-parse
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
Importing csv-parse's browser sync package in Svelte component breaks Histoire
```ts
import { parse } from "csv-parse/browser/esm/sync";
```
The resulting error:
```shell
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/path/to/app/packages/components/node_modules/csv-parse/dist/esm' is not supported resolving ES modules imported from /path/to/app/node_modules/histoire/node_modules/vite-node/dist/client.mjs
Did you mean to import /path/to/app/packages/components/node_modules/csv-parse/dist/esm/index.js?
at finalizeResolution (node:internal/modules/esm/resolve:249:11)
at moduleResolve (node:internal/modules/esm/resolve:908:10)
at defaultResolve (node:internal/modules/esm/resolve:1121:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleLoader.import (node:internal/modules/esm/loader:328:34)
at importModuleDynamically (node:internal/modules/esm/translators:146:35)
at importModuleDynamicallyCallback (node:internal/modules/esm/utils:176:14)
at ViteNodeRunner.importExternalModule (file:///path/to/app/node_modules/histoire/node_modules/vite-node/dist/client.mjs:357:5)
```
The recomended import path is invalid and irrelevant since they have named export paths, as seen [here](https://github.com/adaltas/node-csv/blob/master/packages/csv-parse/package.json#L59)
### Reproduction
Simply import `csv-parse/browser/esm/sync` into a component then write a story for that component.
https://github.com/danawoodman/histoire-csv-parse-bug
### System Info
```shell
System:
OS: macOS 14.4.1
CPU: (8) arm64 Apple M2
Memory: 157.14 MB / 24.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.0 - ~/Library/Caches/fnm_multishells/28490_1713902179205/bin/node
Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/28490_1713902179205/bin/yarn
npm: 10.2.4 - ~/Library/Caches/fnm_multishells/28490_1713902179205/bin/npm
pnpm: 8.7.1 - ~/Library/Caches/fnm_multishells/28490_1713902179205/bin/pnpm
bun: 1.1.2 - ~/.bun/bin/bun
Browsers:
Brave Browser: 123.1.64.116
Chrome: 124.0.6367.62
Safari: 17.4.1
Deps:
"@histoire/plugin-svelte": "^0.17.17",
"histoire": "^0.17.17",
"csv-parse": "^5.5.5",
"svelte": "^4.2.15",
"vite": "^5.2.10",
```
### Used Package Manager
npm
### 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
Start by reproducing the failure in the linked histoire-csv-parse-bug example, then inspect the named vite-node external-module import path and csv-parse package export paths. Done means a Svelte story can import csv-parse/browser/esm/sync without the ERR_UNSUPPORTED_DIR_IMPORT error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- node.js, 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
- 38/100