故事书运行问题，我该如何解决？

Posted 2023-02-19

【中文标题】故事书运行问题，我该如何解决？

【英文标题】：Storybook run problem, how can I solve it?

【发布时间】：2021-11-09 16:59:51

【问题描述】：

我在通过命令运行故事书时遇到问题：npm run storybook。这就是给我我的终端：

./.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” p>

数据：

"@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',
    ],
  ,

【问题讨论】：

你是一个大版本迟到了：github.com/nuxt-community/storybook/releases 也许试着看看它是否有助于将它升级到最新版本。另外，也许可以分享您的nuxt.config.js 文件。

感谢您的回答！这是我的 nuxt.config.js 文件：codepen.io/tangopj/pen/abwLOya?editors=0110

那么，您是否尝试过提升故事书的版本？

是的，现在我正在升级它，所以我是否也应该升级 Nuxt 版本？

@kissu 你把我从痛苦中救了出来，伙计！非常感谢，它对我有用！正如你所建议的那样，我删除了 node_modules 文件夹 && package.lock.json 文件。然后我升级了 Nuxt JS：npm upgrade nuxt --latest，然后运行了这个命令：npx npm-check-updates '/storybook/' -u && npm install 再次感谢您！ :)

【参考方案1】：

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

Nuxt 几乎已经是最新的了。