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 几乎已经是最新的了。
我通过命令使用 运行 故事书时遇到问题: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 几乎已经是最新的了。