storybook
storybook copied to clipboard
Error when a page route imports an entire template
Version
@nuxtjs/storybook: 3.3.1 nuxt: 2.15
Reproduction Link
https://github.com/funkhaus/fuxt
Steps to reproduce
- Install Nuxt Storybook module into any project (if using provided repo, skip to step 4)
- Have this
/pages/_.vuethat contains this:
<script>
// This is how to reuse a template
import PageDefault from "~/templates/page-default"
export default PageDefault
</script>
- And then in in
~/templates/page-defaultyou can have a regular Vue SFC. - Load up Storybook (
npm run storybookin the provided repo)
What is Expected?
Storybook would work with the stories provided.
What is actually happening?
PageDefault is not defined
ReferenceError: PageDefault is not defined
at Module../pages/_.vue (http://localhost:3003/pages/_.3d5a31d40d1bf2504c11.bundle.js:443:1)
at __webpack_require__ (http://localhost:3003/runtime~main.3d5a31d40d1bf2504c11.bundle.js:854:30)
at fn (http://localhost:3003/runtime~main.3d5a31d40d1bf2504c11.bundle.js:151:20)
I suspect this is caused by a page template containing import PageDefault from "~/templates/page-default" and Storybook not knowing how to process the ~ alias perhaps?
If there is a more recommended way to reuse entire page templates in Nuxt that I am not aware of, then I'm happy to change to that way. Otherwise I think Nuxt Storybook needs to fix this.
my setup works OK with ~ and @ I use a jsconfig.json in the root.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}
Narrowed this down to require two things.
You must have a ~/pages/_.vue template, and that template must just be an import of another template like:
<script>
// This is how to reuse a template
import PageDefault from "~/templates/page-default"
export default PageDefault
</script>
Storybook will then give the error shown above.
v4 of this module is no longer actively supported. Please try the newest version and open an new issue if the problem persists. Thank you for your understanding.