search

storybookjs / builder-vite

A builder plugin to run and build Storybooks with Vite
MIT License
891 stars 106 forks source link

[Bug] compiling to publish results in an error - still using webpack #463

Closed orizens closed 2 years ago

orizens commented 2 years ago

What version of vite are you using?

3.0.2

System info and storybook versions

System: OS: macOS 12.4 CPU: (10) arm64 Apple M1 Max Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm Browsers: Chrome: 103.0.5060.134 Safari: 15.5 npmPackages: @storybook/addon-actions: 6.5.9 => 6.5.9 @storybook/addon-essentials: 6.5.9 => 6.5.9 @storybook/addon-interactions: 6.5.9 => 6.5.9 @storybook/addon-links: 6.5.9 => 6.5.9 @storybook/builder-vite: 0.2.1 => 0.2.1 @storybook/preset-scss: 1.0.3 => 1.0.3 @storybook/react: 6.5.9 => 6.5.9 @storybook/testing-library: 0.0.13 => 0.0.13

Describe the Bug

running build-storybook displays this error in terminal:

> build-storybook

info @storybook/react v6.5.9
info 
info => Cleaning outputDir: /Users/my_user/Projects/my_project/storybook-static
info => Loading presets
info => Compiling manager..
/Users/my_user/Projects/my_project/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:143
                        throw new TypeError(
                        ^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/my_user/Projects/my_project/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:143:10)
    at /Users/my_user/Projects/my_project/node_modules/terser-webpack-plugin/dist/index.js:566:67
    at SyncHook.eval [as call] (eval at create (/Users/my_user/Projects/my_project/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:85:1)
    at SyncHook.lazyCompileHook (/Users/my_user/Projects/my_project/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/my_user/Projects/my_project/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/my_user/Projects/my_project/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/my_user/Projects/my_project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/my_user/Projects/my_project/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/my_user/Projects/my_project/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/my_user/Projects/my_project/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/Compiler.js:321:11

the main.cjs:

const { resolve } = require('path');
const { mergeConfig } = require('vite');
const svgrPlugin = require('vite-plugin-svgr')
const tsconfigPaths = require('vite-tsconfig-paths').default;

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials", 
    "@storybook/addon-interactions",
    '@storybook/preset-scss',
    '@chakra-ui/storybook-addon'
  ],
  refs: {
    '@chakra-ui/react': {
      disable: true,
    },
  },
  features: {
    emotionAlias: false,
    storyStoreV7: true,
    previewMdx2: true,
  },

  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-vite",
    disableTelemetry: true,
  },
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      base: './',
      plugins: [
        tsconfigPaths(),
        svgrPlugin({
          svgrOptions: {
            icon: true,
          },
        }),
      ],
      resolve: {
        alias: { 
          src: resolve(__dirname, '../src/'),
          containers: resolve(__dirname, '../src/containers'),
          modules: resolve(__dirname, '../src/modules'),
          components: resolve(__dirname, '../src/components' ),
          utils: resolve(__dirname, '../src/utils' ),
          store: resolve(__dirname, '../src/store' ),
          api: resolve(__dirname, '../src/api' ),
          app: resolve(__dirname, '../src/app' ),
          theme: resolve(__dirname, '../src/theme' ),
          hooks: resolve(__dirname, '../src/hooks' ),
        },
      },
    });
  },
};

Link to Minimal Reproducible Example

No response

Participation

appreciate any help :)

IanVS commented 2 years ago

Can you share the output of npm ls webpack? When storybook uses the vite builder, it also uses webpack 4 to build the manager part of the UI (sidebar, addon panel, etc). Perhaps you have a version of webpack in your project that's conflicting with it?

You can also try running storybook with --no-manager-cache once just to be sure there's no old cached code hanging around.

orizens commented 2 years ago

@IanVS you're correct (i forgot to metion) - my app is based on create-react-app with webpack-5. any suggestion ?

$ npm ls webpack
├─┬ @cypress/react@5.12.4
│ ├─┬ babel-loader@8.2.5
│ │ └── webpack@5.73.0 deduped
│ └─┬ webpack@5.73.0
│   └─┬ terser-webpack-plugin@5.3.3
│     └── webpack@5.73.0 deduped
├─┬ @cypress/webpack-dev-server@1.8.3
│ ├─┬ html-webpack-plugin@5.5.0
│ │ └── webpack@5.73.0 deduped
│ ├─┬ webpack-dev-server@4.9.3
│ │ ├─┬ webpack-dev-middleware@5.3.3
│ │ │ └── webpack@5.73.0 deduped
│ │ └── webpack@5.73.0 deduped
│ └── webpack@5.73.0 deduped
├─┬ @cypress/webpack-preprocessor@5.11.1
│ └── webpack@5.73.0 deduped
├─┬ @storybook/addon-essentials@6.5.9
│ └─┬ @storybook/core-common@6.5.9
│   ├─┬ fork-ts-checker-webpack-plugin@6.5.2
│   │ └── webpack@5.73.0 deduped
│   └─┬ webpack@4.46.0
│     └─┬ terser-webpack-plugin@1.4.5
│       └── webpack@4.46.0 deduped
├─┬ @storybook/preset-scss@1.0.3
│ ├─┬ css-loader@3.6.0
│ │ └── webpack@5.73.0 deduped
│ ├─┬ sass-loader@12.6.0
│ │ └── webpack@5.73.0 deduped
│ └─┬ style-loader@1.3.0
│   └── webpack@5.73.0 deduped
├─┬ @storybook/react@6.5.9
│ ├─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
│ │ └── webpack@5.73.0 deduped
│ ├─┬ @storybook/core@6.5.9
│ │ ├─┬ @storybook/core-client@6.5.9
│ │ │ └── webpack@5.73.0 deduped
│ │ ├─┬ @storybook/core-server@6.5.9
│ │ │ ├─┬ @storybook/builder-webpack4@6.5.9
│ │ │ │ ├─┬ html-webpack-plugin@4.5.2
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ postcss-loader@4.3.0
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ raw-loader@4.0.2
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ terser-webpack-plugin@4.2.3
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ url-loader@4.1.1
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ webpack-filter-warnings-plugin@1.2.1
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ └─┬ webpack@4.46.0
│ │ │ │   └─┬ terser-webpack-plugin@1.4.5
│ │ │ │     └── webpack@4.46.0 deduped
│ │ │ ├─┬ @storybook/manager-webpack4@6.5.9
│ │ │ │ ├─┬ html-webpack-plugin@4.5.2
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ └─┬ webpack@4.46.0
│ │ │ │   └─┬ terser-webpack-plugin@1.4.5
│ │ │ │     └── webpack@4.46.0 deduped
│ │ │ └─┬ webpack@4.46.0
│ │ │   └─┬ terser-webpack-plugin@1.4.5
│ │ │     └── webpack@4.46.0 deduped
│ │ └── webpack@5.73.0 deduped
│ ├─┬ @storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
│ │ └── webpack@5.73.0 deduped
│ └── webpack@5.73.0 deduped
└─┬ react-scripts@5.0.0
  ├─┬ css-loader@6.7.1
  │ └── webpack@5.73.0 deduped
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ └── webpack@5.73.0 deduped
  ├─┬ eslint-webpack-plugin@3.2.0
  │ └── webpack@5.73.0 deduped
  ├─┬ file-loader@6.2.0
  │ └── webpack@5.73.0 deduped
  ├─┬ mini-css-extract-plugin@2.6.1
  │ └── webpack@5.73.0 deduped
  ├─┬ postcss-loader@6.2.1
  │ └── webpack@5.73.0 deduped
  ├─┬ source-map-loader@3.0.1
  │ └── webpack@5.73.0 deduped
  ├─┬ style-loader@3.3.1
  │ └── webpack@5.73.0 deduped
  ├─┬ terser-webpack-plugin@5.3.3
  │ └── webpack@5.73.0 deduped
  ├─┬ webpack-manifest-plugin@4.1.1
  │ └── webpack@5.73.0 deduped
  ├── webpack@5.73.0 deduped
  └─┬ workbox-webpack-plugin@6.5.3
    └── webpack@5.73.0 deduped
IanVS commented 2 years ago

If you're using CRA and webpack, you should continue to use the webpack builder for storybook. If you're migrating your app from CRA to vite, then you'll need to remove webpack and any webpack loaders from your dependencies in package.json. There is a guide in the readme: https://github.com/storybookjs/builder-vite#migration-from-webpack--cra

orizens commented 2 years ago

@IanVS thanks for the advice. To be clear, i'm able to run storybook with vite locally and view at localhost. i received too many errors when i tried to setup storybook with weback.

IanVS commented 2 years ago

Let's consolidate this discussion into https://github.com/storybookjs/builder-vite/issues/466.