I want to create a storybook build from my project. If I start storybook with the command storybook dev -p 6006 it is working. But if I run storybook build it creates something, but in the console a Parse error is thrown and the build does not work. When I start it with npx http-server ./path/to/build I can access the server, but it shows an endles loading bar, if I want to access a component. In the browser console, a 404 error is shown.
started storybook server with corrupted build
Here are the logs during the build (storybook build):
> storybook build
@storybook/cli v7.0.23
info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (244 ms)
info => Copying static files: /Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/manager/static at /Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/storybook-static/sb-common-assets
vite v4.3.9 building for production...
./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
✓ 13 modules transformed.
✓ built in 6.72s
[storybook:external-globals-plugin] Parse error @:3:13
file: /Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-interactions/dist/preview.mjs
ERR! Error: Parse error @:3:13
ERR! at parse (/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/es-module-lexer/dist/lexer.cjs:1:402)
ERR! at Object.transform (/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/builder-vite/dist/index.js:368:55)
ERR! at file:///Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/rollup/dist/es/shared/node-entry.js:24533:40
ERR! Error: Parse error @:3:13
ERR! at parse (/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/es-module-lexer/dist/lexer.cjs:1:402)
ERR! at Object.transform (/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/builder-vite/dist/index.js:368:55)
ERR! at file:///Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/rollup/dist/es/shared/node-entry.js:24533:40 {
ERR! idx: 92,
ERR! code: 'PLUGIN_ERROR',
ERR! plugin: 'storybook:external-globals-plugin',
ERR! hook: 'transform',
ERR! id: '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-interactions/dist/preview.mjs',
ERR! watchFiles: [
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/iframe.html',
ERR! '/virtual:/@storybook/builder-vite/vite-app.js',
ERR! '\x00vite/modulepreload-polyfill',
ERR! '/virtual:/@storybook/builder-vite/setup-addons.js',
ERR! '/virtual:/@storybook/builder-vite/storybook-stories.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/react/dist/config.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-links/dist/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/docs/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/actions/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/measure/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/outline/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-interactions/dist/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-styling/dist/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/.storybook/preview.tsx',
ERR! '\x00vite/preload-helper',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/prop-types/index.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/html-tags/index.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/escodegen/escodegen.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/ts-dedent/esm/index.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/acorn-jsx/index.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/lodash/isPlainObject.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/lodash/isFunction.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/lodash/isString.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/react-element-to-jsx-string/dist/esm/index.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/react/index.js',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/react/dist/chunk-JWY6Y6NU.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/docs-tools/dist/index.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/react/node_modules/acorn/dist/acorn.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/react/node_modules/acorn-walk/dist/walk.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-links/dist/chunk-VJY7NXNQ.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-links/dist/chunk-DXNAW7Q2.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-links/dist/chunk-JT3VIYBO.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-actions/dist/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-docs/dist/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-backgrounds/dist/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-outline/dist/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-measure/dist/preview.mjs',
ERR! '/Users/Marcel/IdeaProjects/monday/batch-hero-for-monday/node_modules/@storybook/addon-highlight/dist/preview.mjs'
ERR! ]
ERR! }
transforming (2361) node_modules/es-abstract/helpers/isPropertyDescriptor.js"{}-cache" is imported by "{}-cache?commonjs-external", but could not be resolved – treating it as an external dependency.
✔ Would you like to help improve Storybook by sending anonymous crash reports? … yes
Dependencies (react, typescript, vite, redux)
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"redux": "^4.2.1"
"typescript": "5.0.4",
"vite": "^4.3.9",
main.ts (Storybook config)
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../packages/**/src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-styling",
],
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {
autodocs: "tag",
},
};
export default config;
preview.tsx (added theming)
import type {Preview} from "@storybook/react";
import {withThemeByClassName} from "@storybook/addon-styling";
import {Provider} from "react-redux";
import {store} from "../packages/shared";
import './storybook-theming.css';
import "monday-ui-react-core/dist/main.css";
import 'monday-ui-kit/dist/style.css';
const preview: Preview = {
decorators: [
withThemeByClassName(
{
themes: {
Light: 'light-app-theme',
Dark: 'dark-app-theme',
Black: 'black-app-theme',
Hacker: 'hacker_theme-app-theme'
},
defaultTheme: 'Light'
}
),
(Story) => (
<Provider store={store}>
<Story/>
</Provider>
)
]
};
export default preview;
storybook dev dependencies (package.json)
"@storybook/addon-essentials": "^7.0.23",
"@storybook/addon-interactions": "^7.0.23",
"@storybook/addon-links": "^7.0.23",
"@storybook/addon-styling": "^1.3.0",
"@storybook/blocks": "^7.0.23",
"@storybook/react": "^7.0.23",
"@storybook/react-vite": "^7.0.23",
"@storybook/testing-library": "^0.0.14-next.2",
"storybook": "^7.0.23",
I checked for the same problem in the internet. Unfortunately did not find any solution.
Looks like I found the fix by myself. It was a problem in the vite.config.ts, where we set the config.define.global variable to an empty object, because of another build problem.
import {defineConfig} from 'vitest/config';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
let config: any = {
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
include: ['**/*.test.{ts,tsx}']
}
};
if (mode !== "test") {
config.define = {
global: {}
};
}
return config;
});
Also in the main.ts file, the core builder was missing: main.ts
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../packages/**/src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-docs",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-themes"
],
core: {
builder: '@storybook/builder-vite'
},
framework: {
name: "@storybook/react-vite",
options: {}
},
docs: {
autodocs: "tag"
}
};
export default config;