#Import issues in v7 with builder-vite, nextjs and pnpm (monorepo with ESM)

2 messages · Page 1 of 1 (latest)

glossy totem
#

Config file:

import { join } from "node:path";

import type { StorybookConfig } from "@storybook/builder-vite";
import { mergeConfig } from "vite";

const storybookConfig: StorybookConfig = {
    addons: [/** truncated */],
    core: {
        builder: "@storybook/builder-vite",
        // disableTelemetry: true,
    },
    docs: {
        docsPage: true,
    },
    features: {
        storyStoreV7: true,
    },
    framework: {
        name: "@storybook/nextjs",
        options: {},
    },
    stories: [/** truncated */],
    typescript: {
        check: true,
    },
    async viteFinal(config, _) {
        return mergeConfig(config, {
            optimizeDeps: {
                include: ["@storybook/addon-essentials", "storybook-addon-designs"],
            },
        });
    },
};

export default storybookConfig;

Environment info:

  System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    npm: 9.1.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Safari: 16.1
  npmPackages:
    @storybook/addon-a11y: ^7.0.0-alpha.48 => 7.0.0-alpha.48 
    @storybook/addon-essentials: ^7.0.0-alpha.48 => 7.0.0-alpha.48 
    @storybook/addon-interactions: ^7.0.0-alpha.48 => 7.0.0-alpha.48 
    @storybook/addon-links: ^7.0.0-alpha.48 => 7.0.0-alpha.48 
    @storybook/addon-storysource: ^7.0.0-alpha.48 => 7.0.0-alpha.48 
    @storybook/builder-vite: 7.0.0-alpha.48 => 7.0.0-alpha.48 
    @storybook/cli: 7.0.0-alpha.48 => 7.0.0-alpha.48 
    @storybook/nextjs: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/react: 7.0.0-alpha.48 => 7.0.0-alpha.48

Is anyone familiar with this issue?

violet juniper
#

I believe that nextjs requires webpack for storybook. @eager escarp can confirm whether there are any workarounds.