Storybook / webpack unable to find components / nested components via an alias

user_7173869 0
Viewed 85

Im trying to hook up a project to story book and having some problem getting components to be found

Creating a story link this works and im able to see my story

import FooterComponent from '../components/HeaderAndFooter/FooterComponent.vue';

// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
export default {
  title: 'Footer',
  component: FooterComponent,
  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
  argTypes: {
  },
};

however what i want to try and do is to reference components as followed

import FooterComponent from '@/components/HeaderAndFooter/FooterComponent.vue';

This is how the rest of the project is set up and assumingly why when loading the footer component with the @ for its nested components it can not find the component.

My understanding is its something in the main.js webpackFinal property I need to set in order to sort out this alias, but not 100% sure what is needed for this.

storybook webpack
1 Answers

After a little bit of playing around i added this to the webpackFinal in main.js and appears to have resolved the issues

    config.resolve.alias['@'] = path.resolve(__dirname, '../src')
user_71738690
Related