histoire-dev
The requested module 'eventemitter2' is a CommonJS module, which may not support all module.exports as named exports.
Describe the bug
I am trying to introduce historie in our pnpm project, I am running into tje following message while collecting story.
I think this might be due to the eventemitter2 package problems, but I am not sure how to solve this.
Error while collecting story xxx/xxx/xxx/XTable.story.vue:
file:///C:/Users/xxxxx/Documents/frontend/xxx/packages/emitter/dist/index.mjs:1
import { EventEmitter2 } from "eventemitter2";
^^^^^^^^^^^^^
SyntaxError: Named export 'EventEmitter2' not found. The requested module 'eventemitter2' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'eventemitter2';
const { EventEmitter2 } = pkg;
here's the historie.config.ts setting
import { defineConfig } from 'histoire';
import { HstVue } from '@histoire/plugin-vue';
export default defineConfig({
plugins: [HstVue()],
setupFile: './histoire.setup.ts',
});
Reproduction
May not be able to reproduce this considering this is a problem due to the packages.
System Info
System:
OS: Windows 10 10.0.22000
CPU: (12) x64 Intel(R) Core(TM) i7-10810U CPU @ 1.10GHz
Memory: 12.20 GB / 31.80 GB
Binaries:
Node: 16.19.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\node_modules\.bin\yarn.CMD
npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (111.0.1661.44)
Internet Explorer: 11.0.22000.120
npmPackages:
@histoire/plugin-vue: ^0.15.8 => 0.15.8
histoire: ^0.15.8 => 0.15.8
vite: ^2.0.0 => 2.9.8
Used Package Manager
pnpm
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.
Same here, I'm getting this error when I'm try to use one of the naive-ui package.
import { VResizeObserver } from 'vueuc';
^^^^^^^^^^^^^^^
SyntaxError: Named export 'VResizeObserver' not found. The requested module 'vueuc' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'vueuc';
const { VResizeObserver } = pkg;
Same here, I'm getting this error when I'm try to use one of the naive-ui package.
import { VResizeObserver } from 'vueuc'; ^^^^^^^^^^^^^^^ SyntaxError: Named export 'VResizeObserver' not found. The requested module 'vueuc' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'vueuc'; const { VResizeObserver } = pkg;
Same here.
naive-ui 2.38.2 histoire 0.17.17
Same here, I'm getting this error when I'm try to use one of the naive-ui package.
import { VResizeObserver } from 'vueuc'; ^^^^^^^^^^^^^^^ SyntaxError: Named export 'VResizeObserver' not found. The requested module 'vueuc' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'vueuc'; const { VResizeObserver } = pkg;Same here.
naive-ui 2.38.2 histoire 0.17.17
@FlacorLopes In the root of your vite.config.ts file try this
histoire: {
setupFile: '...',
storyMatch: ['...'],
vite: {
ssr: {
noExternal: ['naive-ui'],
},
},
},
I found this in a deep Chinese forum 😂
Same here, I'm getting this error when I'm try to use one of the naive-ui package.
import { VResizeObserver } from 'vueuc'; ^^^^^^^^^^^^^^^ SyntaxError: Named export 'VResizeObserver' not found. The requested module 'vueuc' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'vueuc'; const { VResizeObserver } = pkg;Same here. naive-ui 2.38.2 histoire 0.17.17
@FlacorLopes In the root of your vite.config.ts file try this
histoire: { setupFile: '...', storyMatch: ['...'], vite: { ssr: { noExternal: ['naive-ui'], }, }, },I found this in a deep Chinese forum 😂
My hero! Thank you
import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue'
import { HstNuxt } from '@histoire/plugin-nuxt'
export default defineConfig({
plugins: [
HstVue(),
HstNuxt(),
],
vite: {
ssr: {
// https://github.com/histoire-dev/histoire/issues/488
noExternal: ["naive-ui"],
},
}
})
Error reported after use：
Error while collecting story /Users/messchow/code/mess_admin/design/MIcon/MIcon.story.vue:
Error: Cannot find module /Users/messchow/code/mess_admin/node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime/helpers/esm imported from file:///Users/messchow/code/mess_admin, file:///Users/messchow/code/, file:///Users/messchow/code/mess_admin/_index.js, file:///Users/messchow/code/node_modules
at _resolve (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2102:19)
at resolveSync (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2111:10)
at resolvePathSync (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2121:24)
at resolvePath (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2125:28)
at isValidNodeImport (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2585:30)
import { defineConfig } from 'histoire' import { HstVue } from '@histoire/plugin-vue' import { HstNuxt } from '@histoire/plugin-nuxt' export default defineConfig({ plugins: [ HstVue(), HstNuxt(), ], vite: { ssr: { // https://github.com/histoire-dev/histoire/issues/488 noExternal: ["naive-ui"], }, } })使用后报错：
Error while collecting story /Users/messchow/code/mess_admin/design/MIcon/MIcon.story.vue: Error: Cannot find module /Users/messchow/code/mess_admin/node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime/helpers/esm imported from file:///Users/messchow/code/mess_admin, file:///Users/messchow/code/, file:///Users/messchow/code/mess_admin/_index.js, file:///Users/messchow/code/node_modules at _resolve (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2102:19) at resolveSync (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2111:10) at resolvePathSync (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2121:24) at resolvePath (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2125:28) at isValidNodeImport (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2585:30)
Same problem,Have you solved it yet?
@cereschen @messchow in your package.json try adding this:
"overrides": {
"histoire": {
"vite-node": "2.1.4"
}
}
@cereschen @messchow in your
package.jsontry adding this:"overrides": { "histoire": { "vite-node": "2.1.4" } }
Not work...
With pnpm, The overrides should be like this
"pnpm": {
"overrides": {
"histoire>vite-node": "2.1.4"
}
}
But there are still errors
@cereschen @messchow in your
package.jsontry adding this:"overrides": { "histoire": { "vite-node": "2.1.4" } }Not work...
With pnpm, The overrides should be like this
"pnpm": { "overrides": { "histoire>vite-node": "2.1.4" } }
But there are still errors