Storybook: How to use with nuxt.config.ts and Nuxt Typescript?

[snapwich]

Using nuxt-ts storybook will ignore the presence of a nuxt.config.ts file and seems to load a base nuxt config somewhere outside the project.

Using nuxt-ts storybook -c nuxt.config.ts will generate syntax errors if your nuxt.config.ts file contains any typescript syntax.

[odanado]

I found a workaround.

That is to run yarn ts-node node_modules/.bin/nuxt-storybook instead of yarn nuxt storybook

[odanado]

I think the problem is caused by the fact that the execa used inside @nuxt/cli is using node instead of ts-node.

[snapwich]

@odanado I think you mean ts-node node_modules/@nuxtjs/storybook/bin/nuxt-storybook ? node_modules/.bin/nuxt-storybook is a sh script.

Using ts-node on nuxt-storybook got me further (as in it seems to load the config and parse the components correctly initially), but it now the console is littered with these warnings:

[vue-docgen-loader] failed to parse the component file with docgen-api: Cannot read property 'length' of undefined
[vue-docgen-loader] failed to parse the component file with docgen-api: Unexpected token (233:28)

I'm not sure what the length errors stem from, but those unexpected tokens are typescript syntax inside my vue components. I looked at that library but couldn't find any information related to typescript. It looks like it depends on this package which should support typescript so I'm not sure what the problem is.

@farnabaz have you tested this module against a typescript project or have any examples of how to use it with nuxt typescript? (@nuxt/typescript-runtime and @nuxt/typescript-build).

I can keep poking around at this, just don't want to spend a lot of time if this is something that's not supported or intended to be supported. Thanks for any information you can provide!

[farnabaz]

Using nuxt-ts does not help because as @odanado said, nuxt always run commands using node and not ts-node.
I order to support typescript on runtime should register ts-node before nuxt build. But it needs a logic to detect whether to inject ts-node or not.
I think checking for existed tsconfig.json file will do the trick.

[ErickPetru]

I tried locally the changes proposed on #164 and almost everything is working, but global parameters are not loaded from a nuxt.config.ts file.

[farnabaz]

@ErickPetru This is related to another issue. Take a look at https://github.com/nuxt-community/storybook/issues/168#issuecomment-724578057.

[ErickPetru]

@farnabaz I'm not updated about how releases are handled in this project, but is there any estimative about when the changes of #164 will be available as a new release of the npm package?

[farnabaz]

@ErickPetru The next version will be out this week, within two days.

[farnabaz]

@ErickPetru It took more than two days, but v3.2.0 is out now