I have setup a new vue project and added storybook to the project. When I have components that use the @/components
path, it does not run correctly.
Can't resolve '@/components/EntityGrid/EntityGrid.Component.vue'
I have tried multiple webpack.config.js without any luck. What is the simplest webpack.config.js to fix this
This is happening in the default configuration without a webpack.config.js.
I managed to resolve this issue by adding the following in .storybook/main.js
const path = require("path");
module.exports = {
stories: ['./../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
...
webpackFinal: async (config) => {
config.resolve.alias = {
...config.resolve.alias,
"@": path.resolve(__dirname, "../src/"),
};
// keep this if you're doing typescript
// config.resolve.extensions.push(".ts", ".tsx");
return config;
},
}
Here are some useful links to help provide further context:
I have no idea what the cause for your issue is, but here is my working vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
config.module
.rule("i18n")
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use("i18n")
.loader("@kazupon/vue-i18n-loader")
.end();
},
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': path.join(__dirname, '/src')
}
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
]
},
},
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/sass/_variables.scss"; @import "@/assets/sass/_mixins.scss";`,
}
}
}
}
Just ignore all the stuff that you dont need
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With