#Rollup failed to resolve import components

15 messages · Page 1 of 1 (latest)

uncut crypt
#

Hello there, I'm getting this error only when I build storybook.
Error: [vite]: Rollup failed to resolve import "@components/Spinner" from "src/components/Button.tsx".

What does it mean? What I have to do? my vite config, tsconfig and main.cjs of storybook have the alias.

my vite config

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@images': path.resolve(__dirname, './public/images'),
      '@services': path.resolve(__dirname, './src/services'),
      '@utils': path.resolve(__dirname, './src/utils'),
      '@components': path.resolve(__dirname, './src/components'),
      '@styles': path.resolve(__dirname, './src/styles'),
      '@screens': path.resolve(__dirname, './src/screens'),
      '@hooks': path.resolve(__dirname, './src/hooks'),
      '@contexts': path.resolve(__dirname, './src/contexts'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@locales': path.resolve(__dirname, './src/locales/'),
    },
  },
  plugins: [reactSvgPlugin(), react()],
});

storybook config

webpackFinal: async (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        '@images': path.resolve(__dirname, './public/images'),
        '@services': path.resolve(__dirname, './src/services'),
        '@utils': path.resolve(__dirname, './src/utils'),
        '@components': path.resolve(__dirname, './src/components'),
        '@styles': path.resolve(__dirname, './src/styles'),
        '@screens': path.resolve(__dirname, './src/screens'),
        '@hooks': path.resolve(__dirname, './src/hooks'),
        '@contexts': path.resolve(__dirname, './src/contexts'),
        '@assets': path.resolve(__dirname, './src/assets'),
        '@locales': path.resolve(__dirname, './src/locales/'),
      },
    },
  }),

Thanks

amber path
#

Hi bardaxx!
Your Storybook config contains webpackFinal, but when using Vite that should be viteFinal instead.

let me know if changing that works.

uncut crypt
#

hey @amber path thanks for the reply. Do you have any example of config for this? 'cause just changing the name doesn't work

amber path
#

that's strange. can you share

  1. full main config
  2. list of Storybook dependencies from package.json
uncut crypt
# 
const path = require('path');
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          postcssOptions: {
            plugins: [require.resolve('tailwindcss')],
          },
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-vite',
  },
  features: {
    storyStoreV7: true,
  },
  viteFinal: async (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        '@images': path.resolve(__dirname, './public/images'),
        '@services': path.resolve(__dirname, './src/services'),
        '@utils': path.resolve(__dirname, './src/utils'),
        '@components': path.resolve(__dirname, './src/components'),
        '@styles': path.resolve(__dirname, './src/styles'),
        '@screens': path.resolve(__dirname, './src/screens'),
        '@hooks': path.resolve(__dirname, './src/hooks'),
        '@contexts': path.resolve(__dirname, './src/contexts'),
        '@assets': path.resolve(__dirname, './src/assets'),
        '@locales': path.resolve(__dirname, './src/locales/'),
      },
    },
  }),
};
#

actually the error is changed into this

amber path
#

do you get any errors in the terminal, when restarting storybook? your config looks fine

#

maybe try removing the async keyword from viteFinal

uncut crypt
#

no. no errors in terminal

#

no luck even without async

#

this error happens only in the Button story

#

the problem is
import Spinner from '@components/Spinner';
inside button component.
if I change it in import Spinner from './Spinner'; it works. So I guess the main config doesen't work properly

amber path
#

hmm I assume that your config is at .storybook/main.cjs? in that case, I think your paths needs to account for that, so you have to use '@images': path.resolve(__dirname, '../public/images'), instead of '@images': path.resolve(__dirname, './public/images'),