histoire中使用naive-ui报错

[messchow]

描述错误

// MIcon.story.vue
<template>
    <Story>
        Simple story in Nuxt
        <n-button type="tertiary">
            Tertiary
        </n-button>
    </Story>
</template>
<script setup lang="ts">
import {NButton} from 'naive-ui'
</script>

使用时报错：

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;

https://github.com/tusen-ai/naive-ui/issues/4641 根据讨论内容添加：

// histoire.config.ts
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/tusen-ai/naive-ui/issues/4641
            // 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/@babel+runtime@7.24.8/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/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2102:19)
    at resolveSync (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2111:10)
    at resolvePathSync (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2121:24)
    at resolvePath (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2125:28)
    at isValidNodeImport (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/mlly@1.7.1/node_modules/mlly/dist/index.mjs:2585:30)
    at _shouldExternalize (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/vite-node@0.34.7_sass@1.79.3/node_modules/vite-node/dist/server.mjs:78:32)
    at shouldExternalize (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/vite-node@0.34.7_sass@1.79.3/node_modules/vite-node/dist/server.mjs:55:19)
    at ViteNodeServer.shouldExternalize (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/vite-node@0.34.7_sass@1.79.3/node_modules/vite-node/dist/server.mjs:225:12)
    at ViteNodeServer._fetchModule (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/vite-node@0.34.7_sass@1.79.3/node_modules/vite-node/dist/server.mjs:322:36)
    at ViteNodeServer.fetchModule (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/vite-node@0.34.7_sass@1.79.3/node_modules/vite-node/dist/server.mjs:261:14)
    at Object.fetchModule (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/histoire@0.17.17_sass@1.79.3_vite@5.3.4/node_modules/histoire/dist/node/collect/index.js:50:37)
    at MessagePort.<anonymous> (file:///Users/messchow/code/mess_admin/node_modules/.pnpm/birpc@0.1.1/node_modules/birpc/dist/index.mjs:16:41)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:826:20)

相关的文章：https://github.com/histoire-dev/histoire/issues/488

复现步骤

1. pnpm install
2. npm run story:dev

最小复现链接

https://github.com/messchow/test

系统信息

System:
    OS: macOS 12.7.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 680.48 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/Library/Caches/fnm_multishells/45349_1726972344407/bin/node
    Yarn: 1.22.22 - ~/Library/Caches/fnm_multishells/45349_1726972344407/bin/yarn
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/45349_1726972344407/bin/npm
    pnpm: 8.15.4 - ~/Library/Caches/fnm_multishells/45349_1726972344407/bin/pnpm
  Browsers:
    Edge: 129.0.2792.52
    Safari: 15.6.1
  npmPackages:
    naive-ui: ^2.39.0 => 2.39.0 
    vue: ^3.5.7 => 3.5.7

使用的包管理器

pnpm

验证

• [X] 阅读 贡献指南。
• [X] 阅读 文档。
• [X] 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• [X] 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• [X] 提供的复现是最小可复现的示例。

[jahnli]

提供的复现 最小可复现的示例

[messchow]

noExternal: ["naive-ui"],

注释这一行能看按到报错1，不注释报错2

[tomhah]

I have the same issue 👍