使用Rollup构建React自定义NPM库时遇withKnobs导出错误求助

我正在使用Rollup构建一个React自定义NPM库，遇到错误：'withKnobs' is not exported by node_modules/@storybook/addon-knobs/dist/index.js，尝试搜索未找到有效解决方案，特此求助。

错误详情 #

./src/index.js → dist/index.js, dist/index.es.js...
[!] Error: 'withKnobs' is not exported by node_modules/@storybook/addon-knobs/dist/index.js, imported by src/components/Multiselectdropdown/Multiselectdropdown.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/components/Multiselectdropdown/Multiselectdropdown.js (2:9)
1: import React, { useState } from "react";
2: import { withKnobs, text, boolean, color} from '@storybook/addon-knobs';
            ^
3: import '../../../src/multiselectdropdown.css';
Error: 'withKnobs' is not exported by node_modules/@storybook/addon-knobs/dist/index.js, imported by src/components/Multiselectdropdown/Multiselectdropdown.js
    at error (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:198:30)
    at Module.error (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:12560:16)   
    at Module.traceVariable (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:12919:29)
    at ModuleScope.findVariable (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:11571:39)
    at Identifier.bind (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:7570:40) 
    at ArrayExpression.bind (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:5396:73)
    at Property.bind (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:5400:23)   
    at ObjectExpression.bind (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:5396:73)
    at ExportDefaultDeclaration.bind (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:5400:23)
    at Program.bind (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:5396:73)    
    at Module.bindReferences (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:12556:18)
    at Graph.sortModules (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:23193:20)
    at Graph.build (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:23071:14)    
    at C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:23768:13
    at catchUnfinishedHookActions (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:23247:20)
    at rollupInternal (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\shared\rollup.js:23765:5)  
    at build (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\bin\rollup:1528:20)
    at runRollup (C:\Users\imran\npmpackage\multiselect-package\node_modules\rollup\dist\bin\rollup:1668:21)

解决方案 #

• 适配新版addon-knobs：@storybook/addon-knobs 7.x及以上版本已移除withKnobs高阶组件，改用直接调用控件函数，无需包裹组件。修改导入和使用方式：

  // 移除withKnobs导入
  import { text, boolean, color } from '@storybook/addon-knobs';
  
  // 组件内直接使用
  const buttonText = text('按钮文本', '默认内容');
  const isDisabled = boolean('禁用状态', false);
  

• 降级到兼容版本：如果需要保留withKnobs，将addon-knobs降级到6.x版本（推荐6.4.24），执行命令：

  npm install @storybook/addon-knobs@6.4.24 --save-dev
  

• 排除外部依赖：如果你的NPM库不需要打包Storybook相关代码，在Rollup配置中把@storybook/addon-knobs设为外部依赖，避免Rollup处理它：

  export default {
    // 其他配置...
    external: ['@storybook/addon-knobs'],
    // 其他配置...
  };
  

• 修正导入路径：部分旧版本的addon-knobs将withKnobs导出在react子路径下，尝试修改导入语句：

  import { withKnobs, text, boolean, color } from '@storybook/addon-knobs/react';
  

内容的提问来源于stack exchange，提问作者Tricky Tipsy