Storybook/vue causing issues with aliases not functioning as intended

I'm currently utilizing Storybook for Vue and I am endeavoring to integrate aliases into the webpack config within storybook/main.js:

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src'),
        '@': 'src',
      '@src': 'src'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

This illustrates how my directory structure appears:

https://i.sstatic.net/dzkD9.png

The error message that is being generated reads as follows:

npm run storybook
    > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c3d3c3c39ddcdfd1d4d5c29dd5c8d1ddc0dcd5f0809e819e80">[email protected]</a> storybook /Users/test/Documents/webdev/test/scss-loader-example
    > start-storybook -p 6006

    info @storybook/vue v5.3.17
    ...
    WARN You may need to refresh the browser.

Furthermore, there are problematic paths specified within Balance.vue:

import helper from '@/js/utils/helper'
import automationConstants from '@/js/automation-const'

Are you able to identify any missteps in my approach?

javascriptvue.jswebpackstorybook

Answer №1

In order to improve the organization of my project, I decided to create a new file named webpack.config.js within the .storybook folder. Here is the configuration that I used:

config.resolve.alias = {
    ...config.resolve.alias,
    '@': path.resolve(__dirname, '../src/'),
    vue$: 'vue/dist/vue.esm.js'
};

It's important to remember to include vue$ as well, as failing to do so can result in the vue compiler breaking.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to detect when a Bootstrap Alert is displayed?

I am using a flask app that flashes messages to an HTML file. When these flashed messages are caught, they are displayed as a bootstrap alert. Here is an example: {% with messages = get_flashed_messages() %} {% if messages %} {% for message in mes ...

javascriptjqueryeventsbootstrap-4

What could be causing the responsive grid to not stack items properly?

I'm struggling to make my page responsive on mobile devices. The elements are not stacking as intended, but rather aligning side by side. How can I fix this issue? My attempts to adjust spacing, padding, and flex-grow values have not yielded the desi ...

javascriptreactjsmaterial-uiresponsive-designgrid

Clicking on a button within the parent element will enable you to remove the parent element multiple times with the use of VanillaJS

Within a ul element, each li contains multiple elements in the following structure: <ul> <li> <div> <p>some text </p> <button>delete</button> <div> </li> <li> ...

javascripthtml

Issue with datetime picker in JavaScript/jQuery: Input fields added dynamically are not showing the datetime picker

I am currently investigating why the datetime picker does not work on a dynamically added input block within a table cell. A code snippet below serves as a proof of concept for this issue. In its present state, the default input tag (id: dti1) functions co ...

javascriptjqueryjquery-uidatetimepickerappendchild

Error: When executing the npm run build command, I encountered a TypeError stating that Ajv is not a

I keep encountering an issue whenever I try to execute npm run build error: /node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/validate.js:66 const ajv = new Ajv({ ^ TypeError: Ajv is not a constructor at Object.<anon ...

javascriptreactjsnpmbuildajv

Troubleshooting VueJs and vue-i18n issues

Currently, I am utilizing the Webpack CLI Template. As a next step, I proceed to install using the command npm install --save vue-i18n Within my main.js file, I undertake the necessary importation and configuration by setting the locale to "en" import ...

javascriptinternationalizationvue.js

Activation of states in response to item clicks

Recently, I started using the US-Map plugin created by newsignature (). I have put together a chart that highlights various state laws for comparison on a per-state basis. Currently, the setup allows me to compare 3 states at a time. Users can easily clos ...

javascriptjqueryonclick

React Error: The property 'i' cannot be read as it is undefined

I am encountering an issue with my code: class Albs extends React.Component{ constructor(props){ super(props); this.state = { i: 0, anh: this.props.hinhanh[this.state.i] }; var hinhanh = ["1.png", "2.png", "3.png"]; this. ...

javascriptreactjstypeerror

Exploring nested arrays within JSON objects - techniques for accessing specific properties

Having some difficulty with the JSON data I received. The structure is as follows: [ [ { "items": [ { "id": "xxxxxxx", "name": "xxxxxxxxxx", "description": "xxxxxxxxxxx" } ...

javascriptarraysjsonnested

Looking for the location of a matching brace in a dataset?

As a newbie in the world of coding, I have embarked on learning about NodeJs file system module. Currently, my focus is on handling a large data file stored as a string. The challenge that I am facing is with locating the matching close brace and its pos ...

javascripthtmlnode.jsangularjs

Navigate to a different page upon submission

I'm currently working on a JavaScript login page where the correct username and password should redirect users to another page. However, I'm struggling to get the new page to load after successful validation. Below is the HTML code: <body&g ...

javascriptjquery

Can you tell me the name of the Javascript "protocol" or "custom" being referred to here?

From what I can gather, the requests array seems to consist of functions with unique formatting and syntax. However, I'm struggling to find relevant search terms to help me better understand it: var requests = { rewardPoints: function(cb) { io ...

javascript

The 'property' is not found within the type '{ my_function(): void; }'

I am just starting out with TypeScript and VueJS. Currently, I am pondering the best approach for setting the type of a JSON key that should start off as null. <script lang="ts"> import Vue from 'vue'; export default Vue. ...

typescriptvue.js

Issues with jagged borders in three.js while working with gltf documents

Seeking assistance for resolving an issue with a bug. https://i.sstatic.net/F1fov.png The problem is seen in the gltf import of a "sheep-like" object, exported by blockbench. Adjusting the scale does not solve the bugged edges that persist no matter what ...

javascriptthree.js3d

Application of Criteria for Zod Depending on Data Stored in Array Field

I am currently working on an Express route that requires validation of the request body using Zod. The challenge arises when I need to conditionally require certain fields based on the values in the "channels" field, which is an array of enums. While my cu ...

javascripttypescriptzod

Tips for preventing the use of inline styling in React

I am facing an issue with some variables set at the top of my functional component that are not being used except in styles: const testWidth = 100; const testHeight = 100; Although I use some of these variables in my styles... I am considering moving my ...

javascripthtmlcssreactjsinline-styles

What is the reason this switch statement functions only with one case?

Why is the switch statement not functioning properly? It seems to correctly identify the values and match them with the appropriate case, but it only works when there is a single case remaining. If there are multiple cases to choose from, nothing happens. ...

javascripthtmlfunctionswitch-statementlet

Prevent users from entering past dates in the date input field

In my project, I have decided to use input type date instead of datepicker. Is there a way to prevent users from selecting back dates in input type date without using datepicker? If you have any suggestions, please let me know. Thank you! ...

javascriptphphtml

What is the best way to remove the class "active" from only one of the <li> elements using jQuery?

I am currently facing a challenge in figuring out how to remove the "active" class from just one of my lists. Here is an example of my navigation bar: <div class="container"> <ul class="nav"> <li class="active"><a href="#">& ...

javascriptjqueryhtml

Error: Trying to access the length property of an undefined or null reference in JSON formatted data fetched through Ajax

I am attempting to populate a jQuery DataTables with JSON data retrieved from a Web API ajax call, but encountering the following error: An unhandled exception occurred at line 38, column 314 in 0x800a138f - JavaScript runtime error: Unable to get proper ...

javascriptjqueryjsonajaxdatatables