Closed armadillo-dev closed 4 years ago
@armadillo-dev I think you need to specify in your ts-loader options to use .vue
files as well as .ts
files.
@Aaron-Pool thank you for you comment.
I removed @storybook/preset-typescript
package.
And then modified config in .storybook/main.js
It working!
module.exports = {
webpackFinal: (config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [{
loader: require.resolve('ts-loader'),
options: { appendTsSuffixTo: [/\.vue$/] }
}],
});
config.resolve.extensions.push('.ts', '.tsx');
...
return config
},
...
}
@shilman Let's add this to the vue docs. Do you think adding a "Using with Typescript" section to the vue guide would suffice? Or should we make the preset more intelligent somehow so this extra step could be eliminated?
@graup Good question. I think the best thing would be to make the typescript preset smarter since Vue is one of the major frameworks (React, Vue, Angular) we want to support, and therefore I don't mind hard-coding it in the preset.
function webpack(webpackConfig = {}, options = {}) {
...
if(options.framework === 'vue) {
rules.push(...)
}
}
That said, the preset needs some love and I haven't had the bandwidth go get to it for the past month... 😭
Good, I'll make a PR for this as well then.
@graup 감사합니다!
@graup @shilman I tried to add the config mentioned below to my main.ts, but in my case when I launch Storybook again it crashes, and the reason is probably that that I don't have ts-loader in my case, should I install it, and is there any changes that I should do after installation to make things working?
I'm using @nuxt/storybook
module, and @storybook/preset-typescript
is not installed
Hi @BennaceurHichem, you should not need any extra config anymore. Ts-loader is required but should be installed automatically as a dependency of storybook/vue. Could you open a new issue with the error you are encountering?
@graup , I'm using nuxt-storybook module, I will open a new issue with more details
@BennaceurHichem I´m having the same issue regarding nuxt-storybook. Can you send a link to the issue you have created? Thanks
Describe the bug
I wanna build storybook with nuxt + typescript. When I pass props or define data in component, I show below message.
To Reproduce Steps to reproduce the behavior: 1. setting config
.storybook/main.js
2. define component.
TestComponent.vue
3. write stories
TestComponent.stories.ts
4. run storybook with
npm run storybook
Expected behavior render below
Actual behavior
with warn
System: