"Failed to build the preview" with React Component

[gregfenton]

Hey all! I'm new to Storybook.

I have created a new React component and have multiple stories for it. When I run storybook dev -p 6006 I am able to browse each of my stories and they work great!!

However, when I run storybook build I get the output:

$ storybook build

@storybook/cli v7.5.3

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (195 ms)
info => Building preview..
info => Copying static files: /Users/greg/my-icon-picker/node_modules/@storybook/manager/static at /Users/greg/nosync/my-icon-picker/storybook-static/sb-common-assets
=> Failed to build the preview
TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at configResolved (file://./node_modules/vite-plugin-dts/dist/index.mjs:581:100)
    at file://./node_modules/vite/dist/node/chunks/dep-bb8a8339.js:66031:28
    at Array.map (<anonymous>)
    at resolveConfig (file://./node_modules/vite/dist/node/chunks/dep-bb8a8339.js:66031:14)
    at async build (file://./node_modules/vite/dist/node/chunks/dep-bb8a8339.js:47926:20)
    at async build (./node_modules/@storybook/builder-vite/dist/index.js:159:11030)
    at async Promise.all (index 0)
    at async Module.build2 (./node_modules/@storybook/builder-vite/dist/index.js:159:13349)
    at async Promise.all (index 0)

Lots of output is generated to ./storybook-static but when I try to browse it either locally with file:///........./storybook-static/index.html or by running a local HTTP server, the page doesn't fully load and the NETWORK tab shows a 404 trying to access:

http://localhost:8080/iframe.html?viewMode=docs&id=stories-myiconpicker--docs

though that same page works fine with storybook dev -p 6060

Any thoughts?

[valentinpalkovic]

Do you have a custom vite plugin named "vite-plugin-dts" in place? If so, can you try to remove it and try to build it once again?

[gregfenton]

Do you have a custom vite plugin named "vite-plugin-dts" in place? If so, can you try to remove it and try to build it once again?

Yes, I do (or did 😁 )

I commented out all references to "dts" in my entire project (it was only referenced in vite.config.ts) and I uninstalled the plugin (npm uninstall vite-plugin-dts).

I then cleaned my builds (rm -rf dist storybook-static).

Running storybook build I still get an error with this new stack trace:

$ storybook build

@storybook/cli v7.5.3

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (141 ms)
info => Building preview..
info => Copying static files: /Users/greg/nosync/my-icon-picker/node_modules/@storybook/manager/static at /Users/greg/nosync/my-icon-picker/storybook-static/sb-common-assets
vite v4.5.0 building for production...
Cannot convert undefined or null to object
=> Failed to build the preview
TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at resolveBuildOutputs (file://./node_modules/vite/dist/node/chunks/dep-bb8a8339.js:48170:20)
    at build (file://./node_modules/vite/dist/node/chunks/dep-bb8a8339.js:48036:25)
    at async build (./node_modules/@storybook/builder-vite/dist/index.js:159:11030)
    at async Promise.all (index 0)
    at async Module.build2 (./node_modules/@storybook/builder-vite/dist/index.js:159:13349)
    at async Promise.all (index 0)
    at async buildStaticStandalone (./node_modules/@storybook/core-server/dist/index.js:99:2252)
    at async withTelemetry (./node_modules/@storybook/core-server/dist/index.js:103:3903)
    at async build (./node_modules/@storybook/cli/dist/generate.js:473:1059)

[valentinpalkovic]

@IanVS Does the error sound familiar? @gregfenton could you provide a reproduction?

[gregfenton]

Yes, it is the vite-and-storybook branch of this repo (which is a fork):

https://github.com/gregfenton/react-fa-icon-picker-mui/tree/vite-and-storybook

Repro steps:

1. git clone https://github.com/gregfenton/react-fa-icon-picker-mui.git
2. cd react-fa-icon-picker-mui
3. git checkout vite-and-storybook
4. npm install
5. npm run build-storybook

[valentinpalkovic]

I've checked out your reproduction and I was able to reproduce the issue. Upgrading vite-plugin-lib-inject-css to ^2.1.0 fixes the issue :)