question-mark
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] Regression with resolve.alias as array

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
rlesniakcommented, Jul 6, 2022

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(),
        ],
    });
},```
0reactions
rlesniakcommented, Jul 7, 2022

Thank you very much 🙂

Read more comments on GitHub >

github_iconTop Results From Across the Web

Feature: resolve alias array of directories · Issue #6817 - GitHub
Do you want to request a feature or report a bug? Feature. What is the current behaviour? Alias accepts single directory path.
Read more >
Resolve | webpack
resolve.alias. object. Create aliases to import or require certain modules more easily. For example, to alias a bunch of commonly used src/ folders:....
Read more >
Resolve - webpack
Create aliases to import or require certain modules more easily. ... array. Automatically resolve certain extensions. This defaults to:
Read more >
Why does VSCode's "Go to definition" fail on my project using ...
Accepted answer is correct, except my solution was simply: import something from '~/something';. jsconfig.json looks like this:
Read more >
59124 – [6 Regression] Wrong warnings "array subscript is ...
I'll go ahead and resolve this as fixed. I suggest to open a separate bug for any new/outstanding issues in this area to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found