Nuxt + typescript + Storybook = Error must install `typescript`

[lowbits]

Version

@nuxtjs/storybook: ^3.3.1 nuxt: 2.14.6 fork-ts-checker-webpack-plugin: ^6.1.0

What is actually happening?

After installing storybook by the documentation, i can't either run yarn nuxt or yarn nuxt-storybook. Even if i turn off checked in nuxt.config

storybook { typescript: { check: false } } Booth produce following error:

Error: When you use this plugin you must install typescript. at ForkTsCheckerWebpackPlugin.validateTypeScript (/Users/_/git/_/node_modules/fork-ts-checker-webpack-plugin/src/index.ts:250:13) at new ForkTsCheckerWebpackPlugin (/Users/_/git/_/node_modules/fork-ts-checker-webpack-plugin/src/index.ts:197:14) at WebpackBundler.<anonymous> (/Users/_/git/_/node_modules/@nuxt/typescript-build/src/index.ts:77:28) at WebpackBundler.<anonymous> (/Users/_/git/_/node_modules/@nuxt/utils/dist/utils.js:1888:29) at WebpackBundler.<anonymous> (/Users/_/git/_/node_modules/@nuxt/utils/dist/utils.js:1888:29) at WebpackBundler.<anonymous> (/Users/_/git/_/node_modules/@nuxt/utils/dist/utils.js:1888:29) at WebpackClientConfig.extendConfig (/Users/_/git/_/node_modules/@nuxt/webpack/dist/webpack.js:4879:37) at WebpackClientConfig.config (/Users/_/git/_/node_modules/@nuxt/webpack/dist/webpack.js:4914:45) at WebpackClientConfig.config (/Users/_/git/_/node_modules/@nuxt/webpack/dist/webpack.js:5078:26) at WebpackBundler.getWebpackConfig (/Users/_/git/_/node_modules/@nuxt/webpack/dist/webpack.js:5386:19) at /Users/_/git/_/node_modules/@nuxtjs/storybook/dist/index.js:106:55 at Generator.next (<anonymous>) at fulfilled (/Users/_/git/_/node_modules/@nuxtjs/storybook/dist/index.js:5:58

[farnabaz]

Hey, thank you for the report :slightly_smiling_face: Could you provide a reproduction sample on codesandbox?

[TinaDrog]

I have the same problem

[lowbits]

Trying to repoduce this issue. Dont know if it has something todo with yarn workspaces and a plugin which uses typescript and composition-api. If i can reproduce the issue, i will provide it.

[lowbits]

Fixed my problem by adding noHoist in my root package.json. Then delete all node_modules and yarn.lock.

"workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/fork-ts-checker-webpack-plugin",
      "**/fork-ts-checker-webpack-plugin/**"
    ]
  },

[farnabaz]

@lowbits What is your node version?

[lowbits]

@lowbits What is your node version?

v15.7.0

[lowbits]

But i have now this problem

ERROR in ./.nuxt-storybook/components/index.js
Module build failed (from /Users/_/git/_/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/_/git/_/packages/storefront-example/.nuxt-storybook/components/index.js: Unexpected token, expected "," (15:31)

  13 | export { default as SideNavigation } from '../../components/navigation/SideNavigation.vue'
  14 | export { default as SideNavigationList } from '../../components/navigation/SideNavigationList.vue'
> 15 | export { default as ProductCard.stories } from '../../components/product/ProductCard.stories.ts'

with a marker at the dot from ProductCard.stories

[farnabaz]

Unfortunately I couldn't reproduce the issue to find the cause

[lowbits]

Okay, clone this repo, create an Logo.stories.ts in ``packages/nuxt-composition-api-storybook/components```

with

import { storiesOf } from '@storybook/vue'
import Logo from '~/components/Logo.vue'

storiesOf('Logo', module).add('default', () => ({
  components: { Logo },
  template: `
      <Logo :product="mockedProduct"/>`,
}))

run yarn nuxt storybookin packages/nuxt-composition-api-storybook

[lowbits]

This Error only occurs when ProductCard.stories.ts start with uppercase letter.

ERROR in ./.nuxt-storybook/components/index.js
Module build failed (from /Users/_/git/_/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/_/git/_/packages/storefront-example/.nuxt-storybook/components/index.js: Unexpected token, expected "," (15:31)

  13 | export { default as SideNavigation } from '../../components/navigation/SideNavigation.vue'
  14 | export { default as SideNavigationList } from '../../components/navigation/SideNavigationList.vue'
> 15 | export { default as ProductCard.stories } from '../../components/product/ProductCard.stories.ts'

[farnabaz]

I see, ignoring typescript stories in Nuxt components will do the trick. Update nuxt.config.js:

export default {
  componets: {
     path: "~/components",
     ignore: '**/*.stories.ts'
  }
}

[gekkedev]

@farnabaz I speficied your snippet like this to comply with the type declarations, not sure if it still has the same meaning:

components: {
    dirs: [
      {
        path: "~/components",
        ignore: ["**/*.stories.ts"]
      }
    ]
  }

Did not work for me. Before that I've tried the linked bugfix by updating to v1.2.6 and manually checking if the changes are present in the file system. Executing nuxt generate still caused me to get complaints about imports and subsequently missing dev dependencies, etc. related to the storybook file (which should be ignored). WIth and without the bugfix (or the nuxt config change), the only way to get storybook files ignored was for me to stop using nuxt components or not using typescript in stories at all.

[lowbits]

Yeah, dont use nuxt-components auto import, it is better for performance reasons anyway.

[gekkedev]

If you efficiently balance your use of lazy-loading there should be nothing wrong with nuxt-components. I'm still looking for a solution though and not a workaround. There already is a bugfix in place at nuxt/components#135 to prevent accidentally importing stories, but it doesn't seem to work for me.

[farnabaz]

@gekkedev The good news is, Nuxt 2.15.0 is out. Just update your Nuxt and issue will resolve :)

[MrJmpl3]

@gekkedev The good news is, Nuxt 2.15.0 is out. Just update your Nuxt and issue will resolve :)

I have Nuxt 2.15.1 and this issue persist

[gekkedev]

Same for me, the issue still persists after updating Nuxt. It used to occur when doing a storybook generate, but with Nuxt 2.15 it also affects nuxt dev. That's currently keeping me from updating.

[fujiten]

I encountered same error, and this command worked for me.

yarn add -D typescript fork-ts-checker-webpack-plugin

[productdevbook]

@farnabaz some problem "@nuxtjs/storybook": "^4.0.2", yarn nuxt storybook build

[seuros]

What worked for me was adding yarn add -D @storybook/preset-typescript then adding in nuxt.config.ts

storybook: {
    addons: [
      '@storybook/preset-typescript',
      ..
      ]
 }

[tobiasdiez]

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.