Storybook 运行 问题,我该如何解决?

Storybook run problem, how can I solve it?

我通过命令使用 运行 故事书时遇到问题:npm 运行 故事书。这是给我我的终端:

./.nuxt-storybook/storybook/nuxt-entry.js 中的错误 找不到模块:错误:无法解析“/home/usr/Desktop/work/maddevs/.nuxt-storybook/storybook”中的“@storybook/vue/dist/client/preview/globals” ./.nuxt-storybook/storybook/nuxt-entry.js 中的错误 找不到模块:错误:无法在“/home/usr/Desktop/work/maddevs/.nuxt-storybook/storybook”

中解析“@storybook/vue/dist/client/preview/util”

数据:

"@nuxtjs/storybook": "^3.1.1",
"@storybook/vue": "^3.3.1",
"nuxt": "^2.15.7",
"core-js": "^3.17.3"

这是我的 nuxt.config.js 文件

module.exports = {
  srcDir: 'client/',
  target: process.env.NUXT_TARGET || 'server',
  /*
   ** Server settings
   */
  server: {
    host: process.env.HOST || '0',
    port: process.env.PORT || 3000,
  },
  /*
   ** Headers of the page
   */
  head: {
    htmlAttrs: {
      lang: 'en',
    },
    title: 'Mad Devs: Software & Mobile App Development Company',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'yandex-verification', content: '1cce4e9bf6ebcdff' },
      { name: 'facebook-domain-verification', content: 'gjmbb6g9th5cxl6awr0dx598t7ruz3' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ],
    script: [
      { src: 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver' },
    ],
  },
  /*
   ** Customize the progress bar color
   */
  loading: {
    color: '#ec1c24',
    height: '2px',
  },
  components: true,
  /*
   ** Component will be ignored in building
   */
  generate: {
    routes: getRoutes,
    fallback: '404.html',
  },
  css: [
    {
      src: '~/assets/styles/index.scss',
      lang: 'scss',
    },
    {
      src: 'simplebar/dist/simplebar.min.css',
    },
  ],
  /*
   ** Server middlewares
   */
  serverMiddleware: [{ path: '/', handler: '~/../server/index.js' }],
  /*
   ** Build configuration
   */
  build: {
    /*
     ** Run ESLint on save
     */
    babel: {
      plugins: [
        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
      ],
    },
    vendor: ['axios'],
    transpile: ['swiper', 'dom7', 'vue-slicezone', 'nuxt-sm'],
    followSymlinks: true,
    cache: true,
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true,
          },
        })
      }
    },
  },
  /*
  ** Plugins
  */
  plugins: [
    '~/plugins/vuelidate.js',
    '~/plugins/vue-social-sharing.js',
    '~/plugins/get-media-from-s3.js',
    '~/plugins/header-handler.js',
    '~/plugins/feature-flags.js',
    '~/plugins/vue-prlx.js',
    { src: '~/plugins/sentry.js', mode: 'client' },
    { src: '~/plugins/img-comparison-slider.js', mode: 'client' },
    { src: '~/plugins/vue-parallax', mode: 'client' },
  ],
  /*
  ** Nuxt Modules
  */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/robots',
    '@nuxtjs/prismic',
    '@nuxtjs/sitemap',
    '@nuxtjs/gtm',
    '@nuxtjs/style-resources',
    ['nuxt-lazy-load', {
      defaultImage: '/DoNotRemove/nuxt-lazy-load-fallback.svg',
      directiveOnly: true,
    }],
    [
      'nuxt-i18n',
      {
        strategy: 'prefix_except_default',
        defaultLocale: 'en',
        langDir: '~/locales/',
        locales: [
          { code: 'ru', iso: 'ru-RU', file: 'ru.json' },
          { code: 'en', iso: 'en-EN', file: 'en.json' },
        ],
      },
    ],
    ['@nuxtjs/prismic', {
      endpoint: process.env.NODE_PRISMIC_API,
    }],
    ['nuxt-sm'],
  ],
  sitemap: {
    gzip: false,
    path: '/sitemap.xml',
    exclude: ['/**'],
    routes: async () => {
      const routes = await getSitemapRoutes()
      return routes
    },
  },
  axios: {
    baseURL: '/',
  },
  robots: {
    ...getRobots(process.env.FF_ENVIRONMENT),
  },
  prismic: {
    endpoint: process.env.NODE_PRISMIC_API,
    linkResolver: '@/plugins/link-resolver',
    htmlSerializer: '@/plugins/html-serializer',
    preview: false,
  },
  gtm: {
    enabled: true,
    id: process.env.NODE_GOOGLE_TAG_MANAGER_ID,
  },
  storybook: {
    stories: [...getStoriesPaths(), '~/prismicSlices/**/*.stories.js', '~/assets/styles/storybook.css'],
  },
  ignore: ['**/*.stories.js'],
  env: {
    environment: process.env.NODE_ENV,
    s3PublicUrl: process.env.NODE_S3_PUBLIC_URL,
    domain: process.env.NODE_DOMAIN,
    reserveVacancyId: process.env.NODE_HUNTFLOW_RESERVE_VACANCY_ID,
    emailHR: process.env.NODE_EMAIL_HR,
    emailCV: process.env.NODE_EMAIL_CV,
    emailContact: process.env.NODE_EMAIL_CONTACT,
    emailMarketing: process.env.NODE_EMAIL_MARKETING,
    sentryDsnFront: process.env.NODE_SENTRY_DSN_FRONT,
    ffEnvironment: process.env.FF_ENVIRONMENT,
    prismicApi: process.env.NODE_PRISMIC_API,
    ipInfoToken: process.env.NODE_IP_INFO_TOKEN,
  },
  router: {
    trailingSlash: true,
    extendRoutes: routes => {
      routes.push(...CUSTOM_PAGE_ROUTES)
      return routes
    },
  },
  styleResources: {
    scss: [
      '~/assets/styles/_vars.scss',
      '~/assets/styles/_mixins.scss',
    ],
  },
}

问题已通过将 storybook 升级到最新的稳定版本又名 4.1.0 解决,如下所示:https://github.com/nuxt-community/storybook/releases

Nuxt 几乎已经是最新的了。