SyntaxError: Unexpected token 'export' while collecting a story

[nev3rm0re]

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.<anonymous> (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

<template>
  <Story title="Import moment">
    Meow!
  </Story>
</template>
<script>
import moment from 'moment';
</script>

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

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
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue 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.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[lozinsky]

You can try to specify the viteNodeInlineDeps setting:

export default defineConfig({
  viteNodeInlineDeps: [/moment/],
})

[ramonakira]

I have the same error in my Nuxt 3 project when I run npm run story:dev trying to import proj4:

Error while collecting story /workspaces/<project>/stories/<component>.story.vue:
/workspaces/<project>/node_modules/proj4/lib/constants/PrimeMeridian.js:2
export {exports as default};
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

If i add the following to the histoire.config.js

  viteNodeInlineDeps: [
    /proj4/,
  ],

I get the following error:

Error while collecting story /workspaces/<project>/stories/<component>.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/paths.mjs" is not defined in package /workspaces/<project>/node_modules/nuxt/package.json imported from /workspaces/<project>/node_modules/nuxt/dist/app/entry.js
    at new NodeError (node:internal/errors:399:5)
    at importNotDefined (node:internal/modules/esm/resolve:350:10)
    at packageImportsResolve (node:internal/modules/esm/resolve:777:9)
    at moduleResolve (node:internal/modules/esm/resolve:932:16)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

I have no clue on how to proceed. Any hints?

[jay-p-b-7span]

We need to set type module in package.json. It runs fine 👍

// package.json
{
"type" : "module"
}