[Bug] Regression with resolve.alias as array

rlesniak commented 2 years ago

What version of `vite` are you using?

2.9.13

System info and storybook versions

  System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.6/bin/yarn
    npm: 8.5.1 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: 6.5.0 => 6.5.0
    @storybook/addon-essentials: 6.5.0 => 6.5.0
    @storybook/addon-links: 6.5.0 => 6.5.0
    @storybook/builder-vite: 0.1.37 => 0.1.37
    @storybook/node-logger: 6.5.0 => 6.5.0
    @storybook/react: 6.5.0 => 6.5.0

Describe the Bug

I found regression in 0.1.37, perhaps in this line

(packages/builder-vite/code-generator-plugin.ts:70)

I have configured Vite to have resolve.alias as array, so ie.

resolve: {
  alias: [
    {
        find:  'features',
        replacement: resolve(__dirname, 'src',  'features'),
    },
    {
        find: /(@fontsource)/,
        replacement: 'node_modules/$1',
    },
  ],
},

And because of that i cant run storybook because many errors like

 ERROR  The following dependencies are imported but could not be resolved: 
 features/products/components/ProductAttributesDropdown (imported by /Users/bla/workspace/black/src/features/products/components/ProductOptions/ProductAttributeEdit.tsx) 

Are they installed?

Last version without this issue is 0.1.36. I am on React 17

Please add support for arrays as well

Link to Minimal Reproducible Example

No response

Participation

[ ] I am willing to submit a pull request for this issue.

IanVS commented 2 years ago

When you say I have configured Vite, do you mean in your vite.config.js? Have you made the same changes in your viteFinal of .storybook/main.js?

rlesniak commented 2 years ago

Yes, I mean vite.config.ts Yes, viteFinal is merged config


core: {
    builder: '@storybook/builder-vite',
},
async viteFinal(config, { configType }) {
    const { config: userConfig } = await loadConfigFromFile(
        path.resolve(__dirname, '../vite.config.ts'),
    );

    // Keep storybook plugins in storybookPlugins
    const storybookPlugins = config.plugins;
    config.plugins = [];

    return mergeConfig(config, {
        ...userConfig,
        plugins: [
            // Replace @vitejs/plugin-react from storybook by ours
            ...storybookPlugins.filter(
                (plugin) =>
                    !(
                        Array.isArray(plugin) &&
                        plugin[0].name === 'vite:react-babel'
                    ),
            ),
            react({
                // Copied from https://github.com/eirslett/storybook-builder-vite/blob/917d8868943ec5f58c9c2c6900e196637f0d05e3/packages/storybook-builder-vite/vite-config.ts#L95
                // Do not treat story files as HMR boundaries, storybook itself needs to handle them.
                exclude: [/\.stories\.([tj])sx?$/, /node_modules/],
            }),
            svgrPlugin(),
        ],
    });
},```

IanVS commented 2 years ago

Thanks for pointing this out, and for doing the work to find the cause!

IanVS commented 2 years ago

This is fixed in 0.1.39.

rlesniak commented 2 years ago

Thank you very much 🙂

storybookjs / builder-vite