nuxt-modules / storybook

Storybook integration with Nuxt.
https://storybook.nuxtjs.org
402 stars 91 forks source link

The requested module '/node_modules/jsdoc-type-pratt-parser/dist/index.js?v=dd771ee8' does not provide an export named 'parse' #776

Open tomrob270 opened 4 days ago

tomrob270 commented 4 days ago

Getting above error when adding storybook. It is correctly picking up .stories.ts files image

.storybook/main

import type { StorybookConfig } from "@storybook-vue/nuxt";

const config: StorybookConfig = {
  stories: [
    "stories/**/*.mdx",
    "stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

nuxt config

  modules: [
    "nuxt-quasar-ui",
    "@vueuse/nuxt",
    "@pinia/nuxt",
    "@pinia-plugin-persistedstate/nuxt",
    "@formkit/auto-animate/nuxt",
    "@hebilicious/vue-query-nuxt",
    "@nuxt/eslint",
    "@nuxtjs/i18n",
    "nuxt-monaco-editor",
    "nuxt-lodash",
    "@nuxtjs/storybook",
  ],

package.json

  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/eslint": "^0.5.0",
    "@nuxt/test-utils": "^3.14.0",
    "@nuxtjs/i18n": "latest",
    "@nuxtjs/storybook": "^8.2.0",
    "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
    "@storybook/addon-essentials": "^8.3.1",
    "@types/jsurl": "^0.1.2",
    "@types/lodash": "^4.17.7",
    "@types/md5": "^2.3.5",
    "@types/sanitize-html": "^2.11.0",
    "drizzle-kit": "latest",
    "eslint": "^9.8.0",
    "eslint-plugin-prettier": "^5.1.3",
    "nuxt": "^3.11.2",
    "nuxt-lodash": "latest",
    "nuxt-monaco-editor": "latest",
    "nuxt-quasar-ui": "^2.0.6",
    "pg": "^8.11.3",
    "prettier": "^3.3.2",
    "sass": "^1.69.5",
    "typescript": "^5.4.5",
    "vite-plugin-node-polyfills": "^0.22.0",
    "vitest": "^2.0.4",
    "vue": "^3.3.10",
    "vue-component-type-helpers": "^2.0.6",
    "vue-router": "^4.2.5"
  },
tobiasdiez commented 4 days ago

Could you please provide a minimal reproduction In particular, test if one of the plugins are creating the issue. As a workaround, you may try to add jsdoc-type-pratt-parser to optimizeDeps.include.

CraigThatcher commented 3 days ago

This appears to be introduced with 8.3.x in @storybook/core. This is not shown in the online examples linked to StackBlitz from the website. Those examples are currently experiencing a 404 bug looking for /sb-preview/runtime.js.

The workaround provided above for optimizeDeps.include does fix the problem.

cheindl commented 3 days ago

I got the same error; but the workaround does not work for me. I put jsdoc-type-pratt-parser to optimizeDeps.include within .storybook/main.ts, but then it show the same error with vue itself:

The requested module '/node_modules/vue/dist/vue.runtime.esm-bundler.js?v=89f1e65f' does not provide an export named 'useId'

package.json:

"devDependencies": {
    "@graphql-codegen/cli": "^5.0.2",
    "@graphql-codegen/near-operation-file-preset": "^3.0.0",
    "@graphql-codegen/typed-document-node": "^5.0.6",
    "@graphql-codegen/typescript": "^4.0.6",
    "@graphql-codegen/typescript-operations": "^4.2.0",
    "@nuxt/eslint": "^0.5.0",
    "@nuxt/eslint-config": "^0.5.0",
    "@nuxt/icon": "^1.2.1",
    "@nuxt/test-utils": "^3.13.1",
    "@nuxtjs/i18n": "8.5.2",
    "@nuxtjs/storybook": "~8.2.0",
    "@pinia/nuxt": "^0.5.1",
    "@storybook-vue/nuxt": "~8.2.0",
    "@storybook/addon-a11y": "~8.3.0",
    "@storybook/addon-essentials": "~8.3.0",
    "@storybook/addon-interactions": "~8.3.0",
    "@storybook/addon-links": "~8.3.0",
    "@storybook/blocks": "~8.3.0",
    "@storybook/test": "~8.3.0",
    "@types/node": "^20.0.0",
    "@urql/vue": "^1.3.2",
    "@vue/test-utils": "^2.4.6",
    "@vuepic/vue-datepicker": "^9.0.0",
    "@vueuse/core": "^11.0.0",
    "@vueuse/nuxt": "^11.0.0",
    "@vueuse/router": "^11.0.0",
    "dayjs-nuxt": "^2.1.9",
    "eslint": "^9.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "happy-dom": "14.12.3",
    "husky": "^9.1.4",
    "lint-staged": "^15.2.7",
    "nuxt": "3.13.1",
    "nuxt-swiper": "^1.2.2",
    "pinia": "^2.1.7",
    "playwright-core": "^1.45.0",
    "prettier": "^3.3.3",
    "sass": "^1.78.0",
    "storybook": "~8.3.0",
    "typescript": "^4.9.3",
    "venobox": "^2.1.8",
    "vitest": "^1.6.0"
  },

.storybook/main.ts

import type { StorybookConfig } from '@storybook-vue/nuxt';
import { mergeConfig } from 'vite';

const config: StorybookConfig = {
  core: {
    disableTelemetry: true,
  },
  stories: ['../components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
  ],
  framework: {
    name: '@storybook-vue/nuxt',
    options: {},
  },
  staticDirs: [{ from: '../public/assets', to: 'assets' }],
  async viteFinal(config) {
     return mergeConfig(config, {
      optimizeDeps: {
        include: ['jsdoc-type-pratt-parser'],
      }
    });
  }
};
export default config;
AtsMultanen commented 2 days ago

Not sure if it'll make a difference @cheindl but try adding optimizeDeps.include: ['jsdoc-type-pratt-parser'] into nuxt.config.ts https://nuxt.com/docs/api/nuxt-config#vite

tomrob270 commented 2 days ago

Could you please provide a minimal reproduction In particular, test if one of the plugins are creating the issue. As a workaround, you may try to add jsdoc-type-pratt-parser to optimizeDeps.include.

This fixes the error

tobiasdiez commented 2 days ago

Let's try to find a proper solution for this (which might be that we always add the optimizeDeps entry in the module).

First, it would be good to know with which storybook version this occurs first. Is it 8.3.0 or 8.3.1? In the latter case, this might be triggered by https://github.com/storybookjs/storybook/pull/29134