Storybook: Unable to set up Storybook with Vue/typescript

[milankracht]

Hi there,

I tried to set up Storybook with a Vue/typescript app. I get errors when running storybook, even before I even set up a story

To Reproduce
I created a sample project with vue-cli, enabling TS support. Then I installed Storybook (npx -p @storybook/cli sb init), I changed .storybook.js according to https://github.com/storybookjs/storybook/issues/new?template=bug_report.md.

I installed fork-ts-checker-webpack-plugin and than ran npm run storybook

The console returned:

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es6.object.keys' in '/Users/milankracht/Sites/typescript-app/.storybook'
 @ ./.storybook/preview.js-generated-config-entry.js 21:0-42
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es7.object.get-own-property-descriptors' in '/Users/milankracht/Sites/typescript-app/.storybook'
 @ ./.storybook/preview.js-generated-config-entry.js 17:0-66
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' in '/Users/milankracht/Sites/typescript-app/.storybook'
 @ ./.storybook/preview.js-generated-config-entry.js 19:0-43
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

Meanwhile I installed core-js 3 as well, but it didn't help.

This is my package.json:
{
"name": "typescript-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.1.0",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@storybook/addon-actions": "^6.0.4",
"@storybook/addon-essentials": "^6.0.4",
"@storybook/addon-links": "^6.0.4",
"@storybook/vue": "^6.0.4",
"@types/jest": "^23.1.4",
"@vue/cli-plugin-babel": "^3.12.0",
"@vue/cli-plugin-eslint": "^3.12.0",
"@vue/cli-plugin-typescript": "^3.12.0",
"@vue/cli-plugin-unit-jest": "^3.12.0",
"@vue/cli-service": "^3.12.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/eslint-config-typescript": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.1.0",
"core-js": "^3.6.5",
"corejs-upgrade-webpack-plugin": "^4.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"fork-ts-checker-webpack-plugin": "^5.0.14",
"react-is": "^16.13.1",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"ts-jest": "^23.0.0",
"ts-loader": "^8.0.2",
"typescript": "^3.4.3",
"vue-template-compiler": "^2.6.10"
}
}

Can somebody help me? Thank you in advance!

[pocka]

@milankracht
Could you share a reproduction repository or CodeSandbox?
It's hard to diagnose core-js related issues without configuration or seeing the entire project. Repro would be super helpful for everyone digging into this issue 👍

One thing I noticed here is, I'm not sure you're using it though, corejs-upgrade-webpack-plugin is deprecated FYI.

[milankracht]

Hi,

I created a public repo on https://github.com/milankracht/vue-typescrip-app
Hope this helps!

[Aaron-Pool]

If you're using Vue cli, you should install the Vue cli storybook plugin, it makes using your Vue cli config in storybook much simpler!

[pocka]

@milankracht
It turned out the problem is in the babel preset, rather than in Storybook. Commenting out the preset lines let Storybook start successfully.
But, as @Aaron-Pool said, we strongly recommend you to use vue-cli-plugin-storybook.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!