遷移到Storybook 6.4
我有一個正在加載Vue組件的故事，但我一直失敗并出現以下錯誤：
ModuleParseError: Module parse failed: Unexpected token (92:0)
File was processed with these loaders:
* ./node_modules/vue-docgen-loader/lib/index.js
* ./node_modules/vue-docgen-loader/lib/index.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .my-card {
這.my-card出現在我<style>的 vue 檔案中的標簽之后，所以我懷疑關于 typescript、babel 或 webpack 的一些東西——特別是不使用vue-loader加載 SFC
我的故事書main.js已framework: "@storybook/vue",
設定webpackFinal為決議“@”、“css”和“scss”
這是我的.storybook/main.js：
const path = require('path')
module.exports = {
stories: [ '../src/**/*.stories.(js|jsx|ts|tsx|mdx)' ],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-actions',
{
name: '@storybook/addon-docs',
options: {
babelOptions: {
presets: [
[
'@vue/cli-plugin-babel/preset',
{
jsx: false
}
]
]
}
}
},
'@storybook/addon-knobs',
'@storybook/addon-links',
'@storybook/addon-notes'
],
webpackFinal: async config => {
config.resolve.alias = {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, "../src")
}
// Sass loader
config.module.rules.push({
test: /\.sass$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
indentedSyntax: true,
},
prependData: "@import '@/sass/variables.sass'",
},
},
],
include: path.resolve(__dirname, '../'),
})
config.module.rules.push({
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
]
})
return config;
},
framework: "@storybook/vue",
features: { postcss: false }
}
uj5u.com熱心網友回復：
我錯過了 Vue 打字稿加載器。將此添加到 .storybook/main.js 有助于：
webpackFinal: async config => {
config.module.rules.push({
test: /\.ts$/,
loader: "ts-loader",
options: { appendTsSuffixTo: [/\.vue$/] },
});
return config;
}
也升級我vue-loader的16.8.2幫助
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459404.html