histoire-dev / histoire-dev/histoire
SyntaxError: Unexpected token 'export' while collecting a story
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When importing the component I'm writing a story for I'm getting the following error in the output of the `npm run story:dev` command:
```
(node:92196) 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/username/Projects/legacy_project/src/stories/ComponentOne.story.vue:
/Users/username/Projects/legacy_project/node_modules/moment/dist/moment.js:5677
export default hooks;
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:74:18)
at wrapSafe (node:internal/modules/cjs/loader:1141:20)
at Module._compile (node:internal/modules/cjs/loader:1182:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
Collect stories end 1155ms
```
package.json
```
...
"@histoire/plugin-vue2": "^0.12.4",
"histoire": "^0.12.4",
...
```
Some imported dependency in the component imports moment like this:
```
import moment from 'moment';
```
Project is running with Vite, and has no issues.
### Reproduction
```
Meow!
import moment from 'moment';
```
This is enough to cause above error to appear in the console.
When importing minified version of moment.js, e.g. `import moment from 'moment/min/moment.min'` error disappears. Unfortunately moment is imported in a lot of places in our project and I cannot justify changing it everywhere just for the Histoire to work. Is there a way to make it work with `import moment from 'moment';` clause?
### System Info
```shell
System:
OS: macOS 12.0.1
CPU: (8) arm64 Apple M1
Memory: 61.22 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
Browsers:
Chrome: 108.0.5359.124
Firefox Developer Edition: 109.0
Safari: 15.1
npmPackages:
@histoire/plugin-vue2: ^0.12.4 => 0.12.4
histoire: ^0.12.4 => 0.12.4
vite: ^4.0.3 => 4.0.3
```
### 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
Run npm run story:dev with the reproduction in src/stories/ComponentOne.story.vue and inspect the package.json setup for story collection. Trace how the imported moment dependency is processed, then verify that collecting the story succeeds while retaining import moment from 'moment';.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript, vite
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100