histoire-dev / histoire-dev/histoire

SyntaxError: Unexpected token 'export' while collecting a story

Open
#425 3 comments 0 reactions 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

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.