histoire-dev / histoire-dev/histoire

Error:

Open
#455 2 comments 1 reaction 0 assignees View on GitHub
to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

[naiveui](https://www.naiveui.com/en-US/os-theme) not working with Histoire

When I try to build (or runtime in dev) I catch the error:
```
> histoire build

Using 9 threads for story collection
src/components/MyTemplate/MyTemplate.story.vue 2650ms (setup:32ms, execute:16ms, run:2603ms)
src/components/MyHeader/MyHeader.story.vue 2662ms (setup:31ms, execute:16ms, run:2615ms)
(node:95318) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Error while collecting story /Users/andreisoroka/git/other/test/src/components/MyForm/MyForm.story.vue:
/Users/andreisoroka/git/other/test/node_modules/@juggle/resize-observer/lib/utils/scheduler.js:1
import { process } from './process';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1149:20)
at Module._compile (node:internal/modules/cjs/loader:1190:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
at Module.load (node:internal/modules/cjs/loader:1089:32)
at Module._load (node:internal/modules/cjs/loader:930:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^

/Users/andreisoroka/git/other/test/node_modules/@juggle/resize-observer/lib/utils/scheduler.js:1
import { process } from './process';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1149:20)
at Module._compile (node:internal/modules/cjs/loader:1190:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
at Module.load (node:internal/modules/cjs/loader:1089:32)
at Module._load (node:internal/modules/cjs/loader:930:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node.js v18.14.0

Process finished with exit code 1
```

### Reproduction

```bash
npm init vue@latest; # I use with TS
npm i -D histoire @histoire/plugin-vue;
npm i -D naive-ui
```

1. Create any component where you use `naive-ui`
2. Create story for component

full install instructions:
- [vue](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)
- [histoire](https://histoire.dev/guide/vue3/getting-started.html)
- [naiveui](https://www.naiveui.com/en-US/light/docs/installation)

### System Info

```shell
System:
OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Memory: 102.84 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.14.0 - /usr/local/bin/node
npm: 9.3.1 - /usr/local/bin/npm
Browsers:
Chrome: 109.0.5414.119
Safari: 15.6.1
npmPackages:
@histoire/plugin-vue: ^0.15.8 => 0.15.8
@vitejs/plugin-vue: ^4.0.0 => 4.0.0
histoire: ^0.15.8 => 0.15.8
vite: ^4.0.0 => 4.1.2
```

### 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

Open the contributing guide

Research direction

Reproduce the failure using the listed npm installation steps and run `histoire build` with a story that uses naive-ui. Start with the failing `@juggle/resize-observer/lib/utils/scheduler.js` entry point and the reported Histoire/Vite setup. Done means the story builds and runs without the ES-module syntax error.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.