Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Storybook addons don't work after migrating to vite

See original GitHub issue

Describe the bug

I’ve been trying migrating storybook to vite, but when it start, storybook addons don’t seem to work

Steps to reproduce the behavior

Here is my example config in main.js:

var path = require('path');
const { mergeConfig } = require('vite')

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
    '@storybook/addon-a11y',
    '@storybook/addon-controls',
    'storybook-addon-jsx'
  ],
  framework: "@storybook/react",
  core: {
    builder: '@storybook/builder-vite'
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      optimizeDeps: {
        include: [
          '@storybook/addon-docs/blocks',
          '@storybook/addon-docs/dist/esm/frameworks/common/config.js',
          '@storybook/addon-docs/dist/esm/frameworks/react/config.js',
          '@storybook/react/dist/esm/client/preview/config',
          '@storybook/addon-links/dist/esm/preset/addDecorator.js',
          '@storybook/addon-actions/dist/esm/preset/addDecorator.js',
          '@storybook/addon-actions/dist/esm/preset/addArgs.js',
          '@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js',
          '@storybook/addon-backgrounds/dist/esm/preset/addParameter.js',
          '@storybook/addon-measure/dist/esm/preset/addDecorator.js',
          '@storybook/addon-outline/dist/esm/preset/addDecorator.js',
          '@storybook/addon-a11y/dist/esm/a11yRunner.js',
          '@storybook/addon-a11y/dist/esm/a11yHighlight.js',
          'antd',
          'styled-components',
          'clsx',
          "@fortawesome/fontawesome-free",
          'html-react-parser',
          'react-text-mask',
          '@ant-design/icons',
          'text-mask-addons/dist/createNumberMask',
          'react-otp-input',
          'date-fns',
          'moment',
          'rxjs',
          'rxjs/operators',
          'antd/lib/table',
          'virtualizedtableforantd4',
          'draft-js',
          'react-toastify',
          'draft-convert',
          'antd/lib/switch',
          'moment/locale/id',
          'moment/locale/en-gb',
          'rc-picker/lib/generate/dateFns',
          'antd/lib/date-picker/generatePicker',
          'date-fns/locale',
        ],
        exclude: []
      }
    })
  }
};

Expected behavior

Screenshots and/or logs

N/A

Environment

OS: macOS Monterey v12.3
Node.js version: v14.17.0
NPM version: 6.14.4

Additional context

N/A

Issue Analytics

State:
Created a year ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

renardelyoncommented, Apr 22, 2022

One other thing you can try, is to set the reactDocgen option manually:
// main.js

module.exports = {
	typescript: {
		reactDocgen: 'react-docgen',
	},
	...
}

I tried it and it worked. I think this issue has been resolved. Thanks, @IanVS for your help.

0reactions

IanVScommented, Apr 24, 2022

@joshwooding I wonder if we should always default to react-docgen, and maybe give some kind of suggestion in the terminal output to use react-docgen-typescript if we detect typescript. The failure mode exposed here when we guess incorrectly is pretty disastrous.