storybook icon indicating copy to clipboard operation
storybook copied to clipboard

Error when a page route imports an entire template

Open drewbaker opened this issue 4 years ago • 2 comments
trafficstars

Version

@nuxtjs/storybook: 3.3.1 nuxt: 2.15

Reproduction Link

https://github.com/funkhaus/fuxt

Steps to reproduce

  1. Install Nuxt Storybook module into any project (if using provided repo, skip to step 4)
  2. Have this /pages/_.vue that contains this:
<script>
// This is how to reuse a template
import PageDefault from "~/templates/page-default"
export default PageDefault
</script>
  1. And then in in ~/templates/page-default you can have a regular Vue SFC.
  2. Load up Storybook (npm run storybook in 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.

drewbaker avatar Feb 18 '21 01:02 drewbaker

my setup works OK with ~ and @ I use a jsconfig.json in the root.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

sebalaini avatar Feb 27 '21 16:02 sebalaini

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.

drewbaker avatar May 28 '21 12:05 drewbaker

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.

tobiasdiez avatar May 01 '24 07:05 tobiasdiez