Support Storybook

[birkskyum]

Storybook - Website - GitHub

What version of Bun is running?

0.7.0

What platform is your computer?

Darwin 22.5.0 arm64 arm

What steps can reproduce the bug?

First create the Vite project.

• bun x create-vite@latest

✔ Project name: … vite-project
✔ Select a framework: › Solid
✔ Select a variant: › TypeScript

• cd vite-project
• bun i
• bun --bun run dev (Check that the Vite + Solid project runs as expected)

Second init the storybook:

• bun --bun x storybook@latest init

What is the expected behavior?

This is the case if ran just as bun x storybook@latest init without the --bun flag.

➜ bun --bun x storybook@latest init       

 storybook init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓
 • Preparing to install dependencies. ✓



up to date, audited 942 packages in 1s

176 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
. ✓
 • Detected Vite project. Setting builder to Vite. ✓
 • Adding Storybook support to your "SolidJS" app
  ✔ Getting the correct version of 0 packages
. ✓
 • Preparing to install dependencies. ✓



up to date, audited 942 packages in 996ms

176 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
. ✓
╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   Storybook was successfully installed in your project! 🎉                   │
│   To run Storybook manually, run npm run storybook. CTRL+C to stop.          │
│                                                                              │
│   Wanna know more about Storybook? Check out https://storybook.js.org/       │
│   Having trouble or want to chat? Join us at https://discord.gg/storybook/   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Running Storybook

> [email protected] storybook
> storybook dev -p 6006 --quiet

@storybook/cli v7.1.0

info => Starting manager..

What do you see instead?

➜ bun --bun x storybook@latest init


warn: Invalid original column value
/Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:1:0 132039execa/lib/errname: unable to establish process.binding('uv') 4111 |     if (typeof r.getSystemErrorName == "function")
4112 |       e.exports = r.getSystemErrorName;
4113 |     else {
4114 |       try {
4115 | 
4116 |         if (typeof (o = process.binding("uv")).errname != "function")
                           ^
TypeError: process.binding() is not supported in Bun. If that breaks something, please file an issue and include a reproducible code sample.
      at /Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:4116:24
      at n (/Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:8:13)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:3168:119
      at n (/Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:8:13)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:3154:25
      at n (/Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:8:13)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:3141:37
      at n (/Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:8:13)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/envinfo/dist/envinfo.js:3100:12

56 |         Please check the logfile generated at ./storybook.log for troubleshooting and try again.`)}await removeLogFile()}async runRemoveDeps(dependencies){let args=[...dependencies];await this.executeCommand({command:"pnpm",args:["remove",...args,...this.getInstallArgs()],stdio:"inherit"})}async runGetVersions(packageName,fetchAllVersions){let args=[fetchAllVersions?"versions":"version","--json"],commandResult=await this.executeCommand({command:"pnpm",args:["info",packageName,...args]});try{let parsedOutput=JSON.parse(commandResult);if(parsedOutput.error)throw new Error(parsedOutput.error.summary);return parsedOutput}catch{throw new Error(`Unable to find versions of ${packageName} using pnpm`)}}mapDependencies(input){let acc={},existingVersions={},duplicatedDependencies={},items=input.reduce((curr,item)=>{let{devDependencies,dependencies,peerDependencies}=item,allDependencies={...devDependencies,...dependencies,...peerDependencies};return Object.assign(curr,allDependencies)},{}),recurse=([name,packageInfo])=>{var _a;if(!name||!name.includes("storybook"))return;let value={version:packageInfo.version,location:""};(_a=existingVersions[name])!=null&&_a.includes(value.version)||(acc[name]?acc[name].push(value):acc[name]=[value],existingVersions[name]=[...existingVersions[name]||[],value.version],existingVersions[name].length>1&&(duplicatedDependencies[name]=existingVersions[name])),packageInfo.dependencies&&Object.entries(packageInfo.dependencies).forEach(recurse)};return Object.entries(items).forEach(recurse),{dependencies:acc,duplicatedDependencies,infoCommand:"pnpm list --depth=1"}}parseErrorFromLogs(logs){let finalMessage="PNPM error",match=logs.match(PNPM_ERROR_REGEX);if(match){let[errorCode]=match;errorCode&&(finalMessage=`${finalMessage} ${errorCode}`)}return finalMessage.trim()}};var import_ts_dedent5=__toESM(require("ts-dedent")),import_find_up5=require("find-up"),import_fs6=require("fs"),import_path9=__toESM(require("path")),import_fslib=require("@yarnpkg/fslib"),import_libzip=require("@yarnpkg/libzip"),import_semver7=__toESM(require("semver"));var parsePackageData=(packageName="")=>{let[first,second,third]=packageName.trim().split("@"),version=(third||second).replace("npm:","");return{name:third?`@${second}`:first,value:{version,location:""}}};var YARN2_ERROR_REGEX=/(YN\d{4}):.*?Error:\s+(.*)/i,YARN2_ERROR_CODES={YN0000:"UNNAMED",YN0001:"EXCEPTION",YN0002:"MISSING_PEER_DEPENDENCY",YN0003:"CYCLIC_DEPENDENCIES",YN0004:"DISABLED_BUILD_SCRIPTS",YN0005:"BUILD_DISABLED",YN0006:"SOFT_LINK_BUILD",YN0007:"MUST_BUILD",YN0008:"MUST_REBUILD",YN0009:"BUILD_FAILED",YN0010:"RESOLVER_NOT_FOUND",YN0011:"FETCHER_NOT_FOUND",YN0012:"LINKER_NOT_FOUND",YN0013:"FETCH_NOT_CACHED",YN0014:"YARN_IMPORT_FAILED",YN0015:"REMOTE_INVALID",YN0016:"REMOTE_NOT_FOUND",YN0017:"RESOLUTION_PACK",YN0018:"CACHE_CHECKSUM_MISMATCH",YN0019:"UNUSED_CACHE_ENTRY",YN0020:"MISSING_LOCKFILE_ENTRY",YN0021:"WORKSPACE_NOT_FOUND",YN0022:"TOO_MANY_MATCHING_WORKSPACES",YN0023:"CONSTRAINTS_MISSING_DEPENDENCY",YN0024:"CONSTRAINTS_INCOMPATIBLE_DEPENDENCY",YN0025:"CONSTRAINTS_EXTRANEOUS_DEPENDENCY",YN0026:"CONSTRAINTS_INVALID_DEPENDENCY",YN0027:"CANT_SUGGEST_RESOLUTIONS",YN0028:"FROZEN_LOCKFILE_EXCEPTION",YN0029:"CROSS_DRIVE_VIRTUAL_LOCAL",YN0030:"FETCH_FAILED",YN0031:"DANGEROUS_NODE_MODULES",YN0032:"NODE_GYP_INJECTED",YN0046:"AUTOMERGE_FAILED_TO_PARSE",YN0047:"AUTOMERGE_IMMUTABLE",YN0048:"AUTOMERGE_SUCCESS",YN0049:"AUTOMERGE_REQUIRED",YN0050:"DEPRECATED_CLI_SETTINGS",YN0059:"INVALID_RANGE_PEER_DEPENDENCY",YN0060:"INCOMPATIBLE_PEER_DEPENDENCY",YN0061:"DEPRECATED_PACKAGE",YN0062:"INCOMPATIBLE_OS",YN0063:"INCOMPATIBLE_CPU",YN0068:"UNUSED_PACKAGE_EXTENSION",YN0069:"REDUNDANT_PACKAGE_EXTENSION",YN0071:"NM_CANT_INSTALL_EXTERNAL_SOFT_LINK",YN0072:"NM_PRESERVE_SYMLINKS_REQUIRED",YN0074:"NM_HARDLINKS_MODE_DOWNGRADED",YN0075:"PROLOG_INSTANTIATION_ERROR",YN0076:"INCOMPATIBLE_ARCHITECTURE",YN0077:"GHOST_ARCHITECTURE"},Yarn2Proxy=class extends JsPackageManager{constructor(){super(...arguments);this.type="yarn2"}getInstallArgs(){return this.installArgs||(this.installArgs=[]),this.installArgs}async initPackageJson(){await this.executeCommand({command:"yarn",args:["init"]})}getRunStorybookCommand(){return"yarn storybook"}getRunCommand(command2){return`yarn ${command2}`}runPackageCommandSync(command2,args,cwd,stdio){return this.executeCommandSync({command:"yarn",args:[command2,...args],cwd,stdio})}async runPackageCommand(command2,args,cwd){return this.executeCommand({command:"yarn",args:[command2,...args],cwd})}async findInstallations(pattern){let commandResult=await this.executeCommand({command:"yarn",args:["info","--name-only","--recursive",pattern.map(p=>`"${p}"`).join(" "),`"${pattern}"`]});try{return this.mapDependencies(commandResult)}catch{return}}async getPackageJSON(packageName,basePath=this.cwd){let pnpapiPath=(0,import_find_up5.sync)([".pnp.js",".pnp.cjs"],{cwd:basePath});if(pnpapiPath)try{let pnpApi=require(pnpapiPath),resolvedPath=await pnpApi.resolveToUnqualified(packageName,basePath,{considerBuiltins:!1}),pkgLocator=pnpApi.findPackageLocator(resolvedPath),pkg2=pnpApi.getPackageInformation(pkgLocator),zipOpenFs=new import_fslib.ZipOpenFS({libzip:(0,import_libzip.getLibzipSync)()}),virtualFs=new import_fslib.VirtualFS({baseFs:zipOpenFs}),crossFs=new import_fslib.PosixFS(virtualFs),virtualPath=import_path9.default.join(pkg2.packageLocation,"package.json");return crossFs.readJsonSync(virtualPath)}catch(error){return error.code!=="MODULE_NOT_FOUND"&&console.error("Error while fetching package version in Yarn PnP mode:",error),null}let packageJsonPath=await(0,import_find_up5.sync)(dir=>{let possiblePath=import_path9.default.join(dir,"node_modules",packageName,"package.json");return(0,import_fs6.existsSync)(possiblePath)?possiblePath:void 0},{cwd:basePath});return packageJsonPath?JSON.parse((0,import_fs6.readFileSync)(packageJsonPath,"utf-8")):null}async getPackageVersion(packageName,basePath=this.cwd){var _a;let packageJSON=await this.getPackageJSON(packageName,basePath);return packageJSON?((_a=import_semver7.default.coerce(packageJSON.version))==null?void 0:_a.version)??null:null}getResolutions(packageJson,versions){return{resolutions:{...packageJson.resolutions,...versions}}}async runInstall(){await this.executeCommand({command:"yarn",args:["install",...this.getInstallArgs()],stdio:"inherit"})}async runAddDeps(dependencies,installAsDevDependencies){let args=[...dependencies];installAsDevDependencies&&(args=["-D",...args]);let{logStream,readLogFile,moveLogFile,removeLogFile}=await createLogStream();try{await this.executeCommand({command:"yarn",args:["add",...this.getInstallArgs(),...args],stdio:["ignore",logStream,logStream]})}catch{let stdout=await readLogFile(),errorMessage=this.parseErrorFromLogs(stdout);throw await moveLogFile(),new Error(import_ts_dedent5.default`${errorMessage}
57 |         
58 |         Please check the logfile generated at ./storybook.log for troubleshooting and try again.`)}await removeLogFile()}async runRemoveDeps(dependencies){let args=[...dependencies];await this.executeCommand({command:"yarn",args:["remove",...this.getInstallArgs(),...args],stdio:"inherit"})}async runGetVersions(packageName,fetchAllVersions){let field=fetchAllVersions?"versions":"version",args=["--fields",field,"--json"],commandResult=await this.executeCommand({command:"yarn",args:["npm","info",packageName,...args]});try{return JSON.parse(commandResult)[field]}catch{throw new Error(`Unable to find versions of ${packageName} using yarn 2`)}}mapDependencies(input){let lines=input.split(`
59 | `),acc={},existingVersions={},duplicatedDependencies={};return lines.forEach(packageName=>{var _a;if(!packageName||!packageName.includes("storybook"))return;let{name,value}=parsePackageData(packageName.replaceAll('"',""));(_a=existingVersions[name])!=null&&_a.includes(value.version)||(acc[name]?acc[name].push(value):acc[name]=[value],existingVersions[name]=[...existingVersions[name]||[],value.version],existingVersions[name].length>1&&(duplicatedDependencies[name]=existingVersions[name]))}),{dependencies:acc,duplicatedDependencies,infoCommand:"yarn why"}}parseErrorFromLogs(logs){let finalMessage="YARN2 error",match=logs.match(YARN2_ERROR_REGEX);if(match){let errorCode=match[1];errorCode&&(finalMessage=`${finalMessage} ${errorCode}`);let errorType=YARN2_ERROR_CODES[errorCode];errorType&&(finalMessage=`${finalMessage} - ${errorType}`);let errorMessage=match[2];errorMessage&&(finalMessage=`${finalMessage}: ${errorMessage}`)}return finalMessage.trim()}};var import_ts_dedent6=__toESM(require("ts-dedent")),import_find_up6=require("find-up"),import_fs7=require("fs"),import_path10=__toESM(require("path")),import_semver8=__toESM(require("semver"));var YARN1_ERROR_REGEX=/^error\s(.*)$/gm,Yarn1Proxy=class extends JsPackageManager{constructor(){super(...arguments);this.type="yarn1"}getInstallArgs(){return this.installArgs||(this.installArgs=["--ignore-workspace-root-check"]),this.installArgs}async initPackageJson(){await this.executeCommand({command:"yarn",args:["init","-y"]})}getRunStorybookCommand(){return"yarn storybook"}getRunCommand(command2){return`yarn ${command2}`}runPackageCommandSync(command2,args,cwd,stdio){return this.executeCommandSync({command:"yarn",args:[command2,...args],cwd,stdio})}async runPackageCommand(command2,args,cwd){return this.executeCommand({command:"yarn",args:[command2,...args],cwd})}async getPackageJSON(packageName,basePath=this.cwd){let packageJsonPath=await(0,import_find_up6.sync)(dir=>{let possiblePath=import_path10.default.join(dir,"node_modules",packageName,"package.json");return(0,import_fs7.existsSync)(possiblePath)?possiblePath:void 0},{cwd:basePath});return packageJsonPath?JSON.parse((0,import_fs7.readFileSync)(packageJsonPath,"utf-8")):null}async getPackageVersion(packageName,basePath=this.cwd){var _a;let packageJson=await this.getPackageJSON(packageName,basePath);return packageJson?((_a=import_semver8.default.coerce(packageJson.version))==null?void 0:_a.version)??null:null}async findInstallations(pattern){let commandResult=await this.executeCommand({command:"yarn",args:["list","--pattern",pattern.map(p=>`"${p}"`).join(" "),"--recursive","--json"]});try{let parsedOutput=JSON.parse(commandResult);return this.mapDependencies(parsedOutput)}catch{return}}getResolutions(packageJson,versions){return{resolutions:{...packageJson.resolutions,...versions}}}async runInstall(){await this.executeCommand({command:"yarn",args:["install",...this.getInstallArgs()],stdio:"inherit"})}async runAddDeps(dependencies,installAsDevDependencies){let args=[...dependencies];installAsDevDependencies&&(args=["-D",...args]);let{logStream,readLogFile,moveLogFile,removeLogFile}=await createLogStream();try{await this.executeCommand({command:"yarn",args:["add",...this.getInstallArgs(),...args],stdio:["ignore",logStream,logStream]})}catch{let stdout=await readLogFile(),errorMessage=this.parseErrorFromLogs(stdout);throw await moveLogFile(),new Error(import_ts_dedent6.default`${errorMessage}
60 |         
61 |         Please check the logfile generated at ./storybook.log for troubleshooting and try again.`)}await removeLogFile()}async runRemoveDeps(dependencies){let args=[...dependencies];await this.executeCommand({command:"yarn",args:["remove",...this.getInstallArgs(),...args],stdio:"inherit"})}async runGetVersions(packageName,fetchAllVersions){let args=[fetchAllVersions?"versions":"version","--json"],commandResult=await this.executeCommand({command:"yarn",args:["info",packageName,...args]});try{let parsedOutput=JSON.parse(commandResult);if(parsedOutput.type==="inspect")return parsedOutput.data;throw new Error(`Unable to find versions of ${packageName} using yarn`)}catch{throw new Error(`Unable to find versions of ${packageName} using yarn`)}}mapDependencies(input){if(input.type==="tree"){let{trees}=input.data,acc={},existingVersions={},duplicatedDependencies={},recurse=tree=>{var _a;let{children}=tree,{name,value}=parsePackageData(tree.name);!name||!name.includes("storybook")||((_a=existingVersions[name])!=null&&_a.includes(value.version)||(acc[name]?acc[name].push(value):acc[name]=[value],existingVersions[name]=[...existingVersions[name]||[],value.version],existingVersions[name].length>1&&(duplicatedDependencies[name]=existingVersions[name])),children.forEach(recurse))};return trees.forEach(recurse),{dependencies:acc,duplicatedDependencies,infoCommand:"yarn why"}}throw new Error("Something went wrong while parsing yarn output")}parseErrorFromLogs(logs){var _a;let finalMessage="YARN1 error",match=logs.match(YARN1_ERROR_REGEX);if(match){let errorMessage=(_a=match[0])==null?void 0:_a.replace(/^error\s(.*)$/,"$1");errorMessage&&(finalMessage=`${finalMessage}: ${errorMessage}`)}return finalMessage.trim()}};var NPM_LOCKFILE="package-lock.json",PNPM_LOCKFILE="pnpm-lock.yaml",YARN_LOCKFILE="yarn.lock",JsPackageManagerFactory=class{static getPackageManager({force}={},cwd){if(force==="npm")return new NPMProxy({cwd});if(force==="pnpm")return new PNPMProxy({cwd});if(force==="yarn1")return new Yarn1Proxy({cwd});if(force==="yarn2")return new Yarn2Proxy({cwd});let yarnVersion=getYarnVersion(cwd),closestLockfilePath=(0,import_find_up7.sync)([YARN_LOCKFILE,PNPM_LOCKFILE,NPM_LOCKFILE],{cwd}),closestLockfile=closestLockfilePath&&import_node_path.default.basename(closestLockfilePath),hasNPMCommand=hasNPM(cwd),hasPNPMCommand=hasPNPM(cwd);if(yarnVersion&&(closestLockfile===YARN_LOCKFILE||!hasNPMCommand&&!hasPNPMCommand))return yarnVersion===1?new Yarn1Proxy({cwd}):new Yarn2Proxy({cwd});if(hasPNPMCommand&&closestLockfile===PNPM_LOCKFILE)return new PNPMProxy({cwd});if(hasNPMCommand)return new NPMProxy({cwd});throw new Error("Unable to find a usable package manager within NPM, PNPM, Yarn and Yarn 2")}};function hasNPM(cwd){return(0,import_cross_spawn.sync)("npm",["--version"],{cwd,shell:!0}).status===0}function hasPNPM(cwd){return(0,import_cross_spawn.sync)("pnpm",["--version"],{cwd,shell:!0}).status===0}function getYarnVersion(cwd){let yarnVersionCommand=(0,import_cross_spawn.sync)("yarn",["--version"],{cwd,shell:!0});if(yarnVersionCommand.status!==0)return;let yarnVersion=yarnVersionCommand.output.toString().replace(/,/g,"").replace(/"/g,"");return/^1\.+/.test(yarnVersion)?1:2}var import_fs_extra6=require("fs-extra"),import_node_logger2=require("@storybook/node-logger"),import_path11=__toESM(require("path")),import_prompts2=__toESM(require("prompts"));var generateStorybookBabelConfigInCWD=async()=>{let target=process.cwd();return generateStorybookBabelConfig({target})},getBabelPresets=({typescript,jsx})=>{let dependencies=["@babel/preset-env"];return typescript&&dependencies.push("@babel/preset-typescript"),jsx&&dependencies.push("@babel/preset-react"),dependencies},writeBabelConfigFile=async({location,typescript,jsx})=>{let fileLocation=location||import_path11.default.join(process.cwd(),".babelrc.json"),presets=[["@babel/preset-env",{targets:{chrome:100}}]];typescript&&presets.push("@babel/preset-typescript"),jsx&&presets.push("@babel/preset-react");let contents=JSON.stringify({sourceType:"unambiguous",presets,plugins:[]},null,2);await(0,import_fs_extra6.writeFile)(fileLocation,contents)},generateStorybookBabelConfig=async({target})=>{import_node_logger2.logger.info(`Generating the Storybook default babel config at ${target}`);let fileName=".babelrc.json",location=import_path11.default.join(target,fileName);if(await(0,import_fs_extra6.pathExists)(location)){let{overwrite}=await(0,import_prompts2.default)({type:"confirm",initial:!1,name:"overwrite",message:`${fileName} already exists. Would you like overwrite it?`});if(overwrite===!1){import_node_logger2.logger.warn("Cancelled, babel config file was NOT written to file-system.");return}}let{typescript,jsx}=await(0,import_prompts2.default)([{type:"confirm",initial:!1,name:"typescript",message:"Do you want to add the TypeScript preset?"},{type:"confirm",initial:!1,name:"jsx",message:"Do you want to add the React preset?"}]),dependencies=getBabelPresets({typescript,jsx});import_node_logger2.logger.info(`Writing file to ${location}`),await writeBabelConfigFile({location,typescript,jsx});let packageManager=JsPackageManagerFactory.getPackageManager();import_node_logger2.logger.info(`Installing dependencies (${dependencies.join(", ")})`),await packageManager.addDependencies({installAsDevDependencies:!0},dependencies)};var import_fs_extra7=__toESM(require("fs-extra")),import_ts_dedent7=require("ts-dedent"),import_detect_indent=__toESM(require("detect-indent")),import_csf_tools=require("@storybook/csf-tools"),import_prompts3=__toESM(require("prompts")),import_chalk3=__toESM(require("chalk"));var SUPPORTED_ESLINT_EXTENSIONS=["js","cjs","json"],UNSUPPORTED_ESLINT_EXTENSIONS=["yaml","yml"],findEslintFile=()=>{let filePrefix=".eslintrc",unsupportedExtension=UNSUPPORTED_ESLINT_EXTENSIONS.find(ext=>import_fs_extra7.default.existsSync(`${filePrefix}.${ext}`));if(unsupportedExtension)throw new Error(unsupportedExtension);let extension=SUPPORTED_ESLINT_EXTENSIONS.find(ext=>import_fs_extra7.default.existsSync(`${filePrefix}.${ext}`));return extension?`${filePrefix}.${extension}`:null};async function extractEslintInfo(packageManager){let allDependencies=await packageManager.getAllDependencies(),packageJson=await packageManager.retrievePackageJson(),eslintConfigFile=null;try{eslintConfigFile=findEslintFile()}catch{}let isStorybookPluginInstalled=!!allDependencies["eslint-plugin-storybook"];return{hasEslint:allDependencies.eslint||eslintConfigFile||packageJson.eslintConfig,isStorybookPluginInstalled,eslintConfigFile}}async function configureEslintPlugin(eslintFile,packageManager){var _a;if(eslintFile)if(paddedLog(`Configuring Storybook ESLint plugin at ${eslintFile}`),eslintFile.endsWith("json")){let eslintConfig=await(0,import_fs_extra7.readJson)(eslintFile),existingConfigValue=Array.isArray(eslintConfig.extends)?eslintConfig.extends:[eslintConfig.extends].filter(Boolean);eslintConfig.extends=[...existingConfigValue||[],"plugin:storybook/recommended"];let eslintFileContents=await(0,import_fs_extra7.readFile)(eslintFile,"utf8"),spaces=(0,import_detect_indent.default)(eslintFileContents).amount||2;await(0,import_fs_extra7.writeJson)(eslintFile,eslintConfig,{spaces})}else{let eslint=await(0,import_csf_tools.readConfig)(eslintFile),extendsConfig=eslint.getFieldValue(["extends"])||[],existingConfigValue=Array.isArray(extendsConfig)?extendsConfig:[extendsConfig].filter(Boolean);eslint.setFieldValue(["extends"],[...existingConfigValue||[],"plugin:storybook/recommended"]),await(0,import_csf_tools.writeConfig)(eslint)}else{paddedLog("Configuring eslint-plugin-storybook in your package.json");let packageJson=await packageManager.retrievePackageJson();await packageManager.writePackageJson({...packageJson,eslintConfig:{...packageJson.eslintConfig,extends:[...((_a=packageJson.eslintConfig)==null?void 0:_a.extends)||[],"plugin:storybook/recommended"]}})}}var suggestESLintPlugin=async()=>{let{shouldInstall}=await(0,import_prompts3.default)({type:"confirm",name:"shouldInstall",message:import_ts_dedent7.dedent`
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               ^
error: Unable to find a usable package manager within NPM, PNPM, Yarn and Yarn 2
      at getPackageManager (/Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:61:2635)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:94:935
      at doInitiate (/Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:94:820)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:111:748
      at /Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/core-server/dist/index.js:113:3664
      at withTelemetry (/Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/core-server/dist/index.js:113:3318)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:111:601
      at initiate (/Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:111:587)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:435:2437
      at listener (/Users/admin/repos/storybook-test/vite-project/node_modules/commander/index.js:426:27)
      at _parseCommand (/Users/admin/repos/storybook-test/vite-project/node_modules/commander/index.js:1002:8)
      at _dispatchSubcommand (/Users/admin/repos/storybook-test/vite-project/node_modules/commander/index.js:953:6)
      at _parseCommand (/Users/admin/repos/storybook-test/vite-project/node_modules/commander/index.js:970:6)
      at parse (/Users/admin/repos/storybook-test/vite-project/node_modules/commander/index.js:801:4)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:440:49
      at globalThis (/Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/dist/generate.js:440:142)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/bin/index.js:9:0
      at globalThis (/Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/cli/bin/index.js:9:0)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/storybook/index.js:3:0
      at globalThis (/Users/admin/repos/storybook-test/vite-project/node_modules/storybook/index.js:3:0)

error: "storybook" exited with code 1 (SIGHUP)

Additional information

It seems like this is a clue:

TypeError: process.binding() is not supported in Bun. If that breaks something, please file an issue and include a reproducible code sample.

But also that Storybook searched for one of error: Unable to find a usable package manager within NPM, PNPM, Yarn and Yarn 2 but isn't satisfied with Bun as a package manager.

Related links:

• https://github.com/storybookjs/storybook/issues/23279
• https://github.com/oven-sh/bun/pull/5355

[birkskyum]

This is where bun is missing:

https://github.com/storybookjs/storybook/blob/a1406c739b17607c2fd763376a9a383145bb18a7/code/lib/cli/src/js-package-manager/JsPackageManagerFactory.ts#L17

The undertaking is somewhat similar to the Nest.js work

• https://github.com/nestjs/nest-cli/pull/2223
• https://gist.github.com/gtrabanco/38cb21f716253f75b9709521068498b1

[vafanassieff]

Also having issues with storybook and bun

When I run storybook dev I got the following errors :

With process.binding

storybook dev -h 0.0.0.0 -p 6006 --no-open --disable-telemetry
execa/lib/errname: unable to establish process.binding('uv') 1 | (function (bindingName){"use strict";if(bindingName==="constants")return @processBindingConstants;const issue={fs:3546,buffer:2020,natives:2254,uv:2891}[bindingName];if(issue)throw new Error(`process.binding("${bindingName}") is not implemented in Bun. Track the status & thumbs up the issue: https://github.com/oven-sh/bun/issues/${issue}`);@throwTypeError(`process.binding("${bindingName}") is not implemented in Bun. If that breaks something, please file an issue and include a reproducible code sample.`)})
                       ^
error: process.binding("uv") is not implemented in Bun. Track the status & thumbs up the issue: https://github.com/oven-sh/bun/issues/2891
      at binding (:1:20)
      at /home/user/node_modules/envinfo/dist/envinfo.js:1:0
      at n (/home/user/node_modules/envinfo/dist/envinfo.js:1:33779)
      at /home/user/node_modules/envinfo/dist/envinfo.js:1:128061
      at n (/home/user/node_modules/envinfo/dist/envinfo.js:1:33779)
      at /home/user/node_modules/envinfo/dist/envinfo.js:1:127427
      at n (/home/user/node_modules/envinfo/dist/envinfo.js:1:33779)
      at /home/user/node_modules/envinfo/dist/envinfo.js:1:126485
      at n (/home/user/node_modules/envinfo/dist/envinfo.js:1:33779)
      at /home/user/node_modules/envinfo/dist/envinfo.js:1:124600

One with zlib / brotli

TypeError: import_node_zlib.default.createBrotliDecompress is not a function. (In 'import_node_zlib.default.createBrotliDecompress()', 'import_node_zlib.default.createBrotliDecompress' is undefined)
      at /home/user/node_modules/@storybook/core-server/dist/index.js:101:36807
      at node:http:859:28

And one with module (seems related to this function in storybook code

TypeError: undefined is not an object (evaluating 'require("node:module")._extensions[".ts"]')
    at interopRequireDefault (/home/user/node_modules/@storybook/core-common/dist/index.js:31:3074)
    at serverRequire (/home/user/node_modules/@storybook/core-common/dist/index.js:36:409)
    at <anonymous> (/home/user/node_modules/@storybook/core-common/dist/index.js:49:6912)

[sjwilczynski]

Would love to get support for that and to be able to run tests based on composeStories API!

[birkskyum]

Now the storybook can be initialized with : bun --bun x storybook@latest init 🎉

But when trying to run it: bun --bun run storybook or bun --bun run build-storybook, this happens:

                                                                                      ^
TypeError: import_node_zlib.default.createBrotliDecompress is not a function. (In 'import_node_zlib.default.createBrotliDecompress()', 'import_node_zlib.default.createBrotliDecompress' is undefined)
      at /Users/admin/repos/storybook-test/vite-project/node_modules/@storybook/core-server/dist/index.js:113:35958
      at node:http:862:28
      at processTicksAndRejections (:55:76)
ERR! TypeError: undefined is not an object (evaluating 'require("module")._extensions[".ts"]')

[GustavoBlaze]

I could init the storybook with bun 1.0.2 but i couldn't start nor build. I got this error below 👇

Enviroment: Mac Os Ventura (13.5.2); 2,4 GHz 8-Core Intel Core i9

[rene-leanix]

I've encountered the missing Module._extensions when trying to use bun to run an existing Jest unit test suite, which would be a huge win until the bun test runner supports all the main Jest features (and until teams find the time to port their code).

It is one of several Node.js Module internals that are being used by multiple packages. I've also encountered the use of Module._preloadModules in ts-node.

The "public API" of node:module seems to be completely implemented already. Are there any plans to implement some of these frequently used private properties/functions as well, @birkskyum?

Should we create a new issue to track this?

[linkb15]

I was writing a tutorial about Bun + Storybook + Vite React App yesterda. Seems v1.0.3 works with bun storybook command and bun build-storybook as well - I have not tried their Jest integration yet. https://linkb.hashnode.dev/bunsh-with-react-typescript-tailwindcss-and-storybook

[iRyusa]

I was having same error as @birkskyum

Updated to 1.0.4 and now bunx storybook@latest init --skip-install works fine, and bun storybook run without any error 🙌

[birkskyum]

bun 1.0.16 Darwin 23.1.0 arm64 arm

This is what I get:

➜ bun --bun x storybook@latest init

 storybook init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓
 • Preparing to install dependencies. ✓


 • Installing dependencies(#########⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠼ idealTree: timing idealTree Com
up to date, audited 93 packages in 638ms

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
. ✓
 • Adding Storybook support to your "SolidJS" app
  ✔ Getting the correct version of 10 packages
⠋ Installing Storybook dependencies
An error occurred while installing dependencies:
NPM error

Please check the logfile generated at ./storybook.log for troubleshooting and try again.

     Error: NPM error

Please check the logfile generated at ./storybook.log for troubleshooting and try again.
    at new HandledError (/private/tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:21:4074)
    at <anonymous> (/private/tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:1494:93)
    at processTicksAndRejections (:61:39)

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

[CallMeLaNN]

@birkskyum I got the same error.

I try the versions that working above and using storybook version before the comment date to see if I can reproduce the working one, but all I got, is a the same NPM Error with empty log. Our result is inconsistent.

I'm using Apple chip, arm64.

Maybe, from now on, we should write a specific version and tell the platform env etc.

[CallMeLaNN]

Running Storybook using bun is not an issue, while runningstorybook@latest init is just one off. So it can be done with any of this:

1. In a bun project, just run bunx storybook@latest init without --bun and respect shebangs

2. Similarly, create using npm as usual: e.g. use create-vite then npx storybook@latest init then bun install. It will migrate package-lock.json

3. Install Storybook manually w/o their init script.

[jdalton]

Is this still an issue on latest Bun? I'm unable to reproduce.

[birkskyum]

checked just now, and i still experience this on an apple silicon mac

bun revision 1.0.23+83f2432da

[lucadibello]

Same here on apple silicon using latest Bun stable release.

✗ bunx storybook@latest init

error: Unable to find a usable package manager within NPM, PNPM, Yarn and Yarn 2
      at getPackageManager (/tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:66:2664)
      at /tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:124:307
      at doInitiate (/tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:124:34)
      at /tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:145:397
      at /tmp/storybook@latest--bunx/node_modules/@storybook/core-server/dist/index.js:65:3954
      at withTelemetry (/tmp/storybook@latest--bunx/node_modules/@storybook/core-server/dist/index.js:65:3497)
      at /tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:145:258
      at initiate (/tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:145:217)
      at /tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:516:1577
      at listener (/tmp/storybook@latest--bunx/node_modules/commander/index.js:426:28)
      at _parseCommand (/tmp/storybook@latest--bunx/node_modules/commander/index.js:1002:9)
      at _dispatchSubcommand (/tmp/storybook@latest--bunx/node_modules/commander/index.js:953:7)
      at _parseCommand (/tmp/storybook@latest--bunx/node_modules/commander/index.js:970:7)
      at parse (/tmp/storybook@latest--bunx/node_modules/commander/index.js:801:5)
      at /tmp/storybook@latest--bunx/node_modules/@storybook/cli/dist/generate.js:521:50
      at /tmp/storybook@latest--bunx/node_modules/@storybook/cli/bin/index.js:26:1
      at /tmp/storybook@latest--bunx/node_modules/storybook/index.js:3:1

Current version:

✗ bun --version
1.0.25

[gvilums]

Do you have node installed? The storybook init script is looking for a package manager, but can't find one as it only considers npm, pnpm and yarn.

[birkskyum]

Tried again now that storybook 8 is out (same result for react and solid):

bun 1.1.8-canary.1+3c082012b

➜ bun --bun run dev
$ vite

  VITE v5.2.11  ready in 626 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
^C

repos/bun-kitchensink/storybook-test via 🍞 v1.1.8 via 🅒 base took 7.5s 
➜ bun --bun x storybook@latest init
╭───────────────────────────────────────────────────────╮
│                                                       │
│   Adding Storybook version 8.0.10 to your project..   │
│                                                       │
╰───────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...


up to date, audited 85 packages in 736ms

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 • Adding Storybook support to your "SolidJS" app
  ✔ Getting the correct version of 9 packages
  ✔ Installing Storybook dependencies

     Error: Invariant failed
    at invariant (/private/tmp/bunx-501-storybook@latest/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:25)
    at <anonymous> (/private/tmp/bunx-501-storybook@latest/node_modules/@storybook/cli/dist/generate.js:59:11578)
    at getRendererDir (/private/tmp/bunx-501-storybook@latest/node_modules/@storybook/cli/dist/generate.js:59:11157)
    at <anonymous> (/private/tmp/bunx-501-storybook@latest/node_modules/@storybook/cli/dist/generate.js:61:3078)
    at templatePath (/private/tmp/bunx-501-storybook@latest/node_modules/@storybook/cli/dist/generate.js:61:2749)
    at <anonymous> (/private/tmp/bunx-501-storybook@latest/node_modules/@storybook/cli/dist/generate.js:61:3943)
    at processTicksAndRejections (:12:39)

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:

And running it (works without the --bun)

➜ bun --bun run storybook
$ storybook dev -p 6006
@storybook/cli v8.0.10

ENOENT: No such file or directory
    at readFileSync (native)
    at <anonymous> (./node_modules/chromatic/dist/chunk-2FVWIO6Q.js:176:145)
    at ZZ (./node_modules/chromatic/dist/chunk-2FVWIO6Q.js:176:39)
    at <anonymous> (./node_modules/@chromatic-com/storybook/dist/preset.js:589:436)
    at $tr (./node_modules/@chromatic-com/storybook/dist/preset.js:589:275)
    at <anonymous> (./node_modules/@storybook/core-common/dist/index.js:11:1215)
    at processTicksAndRejections (:12:39)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error: script "storybook" exited with code 1

[valentinpalkovic]

Is someone interested in supporting Bun's package manager? I have created an issue in Storybook's Monorepo: https://github.com/storybookjs/storybook/issues/28164

The Storybook Core Team has not planned to work on it in the next months, so this work has to be community-driven. Though, I would like to support and give guidance as much as I can.