If you try to use browser apis in storybook, there's a bug during the build. There should be a test to make sure that the WxtVitest() plugin mocks are actually working with storybook.
✘ [ERROR] Could not resolve "../pkg"
../../node_modules/.pnpm/lightningcss@1.29.2/node_modules/lightningcss/node/index.js:17:27:
17 │ module.exports = require(`../pkg`);
╵ ~~~~~~~~
✘ [ERROR] No loader is configured for ".node" files: ../../node_modules/.pnpm/fsevents@2.3.3/node_modules/fsevents/fsevents.node
../../node_modules/.pnpm/fsevents@2.3.3/node_modules/fsevents/fsevents.js:13:23:
13 │ const Native = require("./fsevents.node");
╵ ~~~~~~~~~~~~~~~~~
1:08:16 PM [vite] (client) error while updating dependencies:
Error: Build failed with 2 errors:
../../node_modules/.pnpm/fsevents@2.3.3/node_modules/fsevents/fsevents.js:13:23: ERROR: No loader is configured for ".node" files: ../../node_modules/.pnpm/fsevents@2.3.3/node_modules/fsevents/fsevents.node
../../node_modules/.pnpm/lightningcss@1.29.2/node_modules/lightningcss/node/index.js:17:27: ERROR: Could not resolve "../pkg"
at failureErrorWithLog (/Users/<user>/Development/temp/examples/storybook/node_modules/.pnpm/esbuild@0.25.2/node_modules/esbuild/lib/main.js:1477:15)
at /Users/<user>/Development/temp/examples/storybook/node_modules/.pnpm/esbuild@0.25.2/node_modules/esbuild/lib/main.js:946:25
at /Users/<user>/Development/temp/examples/storybook/node_modules/.pnpm/esbuild@0.25.2/node_modules/esbuild/lib/main.js:1355:9
at process.processTicksAndRejections (node:internal/process/task_queues:104:5)For example:
https://github.com/wxt-dev/examples/blob/main/examples/storybook/components/test-Button.stories.ts
import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
+ import { browser } from "wxt/browser";
import { Button } from "./Button";
+ console.log(browser);
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
component: Button,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: "centered",
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ["autodocs"],
// More on argTypes: https://storybook.js.org/docs/api/argtypes
argTypes: {
backgroundColor: { control: "color" },
},
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
args: { onClick: fn() },
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
args: {
primary: true,
label: "Button",
},
};
export const Secondary: Story = {
args: {
label: "Button",
},
};
export const Large: Story = {
args: {
size: "large",
label: "Button",
},
};
export const Small: Story = {
args: {
size: "small",
label: "Button",
},
};
If you try to use browser apis in storybook, there's a bug during the build. There should be a test to make sure that the
WxtVitest()plugin mocks are actually working with storybook.For example:
https://github.com/wxt-dev/examples/blob/main/examples/storybook/components/test-Button.stories.ts
import type { Meta, StoryObj } from "@storybook/react"; import { fn } from "@storybook/test"; + import { browser } from "wxt/browser"; import { Button } from "./Button"; + console.log(browser); // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { component: Button, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout layout: "centered", }, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ["autodocs"], // More on argTypes: https://storybook.js.org/docs/api/argtypes argTypes: { backgroundColor: { control: "color" }, }, // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args args: { onClick: fn() }, } satisfies Meta<typeof Button>; export default meta; type Story = StoryObj<typeof meta>; // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args export const Primary: Story = { args: { primary: true, label: "Button", }, }; export const Secondary: Story = { args: { label: "Button", }, }; export const Large: Story = { args: { size: "large", label: "Button", }, }; export const Small: Story = { args: { size: "small", label: "Button", }, };