I was doing an update of the packages and had Storybook continue to fail so after performing different runs was able to narrow the issue to the update of the slice-machine-ui from 0.1.1 --> 0.1.2 causes storybook to fail to launch with the following error
yarn storybook
yarn run v1.22.17
$ nuxt storybook
WARN css-loader@3.6.0 is installed but >=4.2.0 is expected 12:25:22
WARN sass-loader@12.4.0 is installed but ^10.1.1 is expected 12:25:22
ℹ Merging Tailwind config from ~/tailwind.config.js nuxt:tailwindcss 12:25:28
ℹ Preparing project for development 12:25:29
ℹ Initial build may take a while 12:25:29
ℹ Discovered Components: .nuxt-storybook/components/readme.md 12:25:29
✔ Builder initialized 12:25:29
✔ Nuxt files generated 12:25:29
ℹ Waiting for file changes 12:25:29
info @nuxtjs/storybook v4.2.0
info
info => Loading presets
WARN Failed to load preset: "/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/manager-webpack4/dist/cjs/presets/manager-preset.js"
ERR! Error: Cannot find module 'react-dom/package.json'
ERR! Require stack:
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/ui/noop.js
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERR! at resolveFileName (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/resolve-from/index.js:29:39)
ERR! at resolveFrom (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/resolve-from/index.js:43:9)
ERR! at module.exports (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/resolve-from/index.js:46:47)
ERR! at Object.<anonymous> (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/ui/paths.js:18:24)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR! at Module.require (internal/modules/cjs/loader.js:974:19)
ERR! at require (internal/modules/cjs/helpers.js:93:18)
ERR! at Object.<anonymous> (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/manager-webpack4/dist/cjs/manager-webpack.config.js:50:38)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR! Error: Cannot find module 'react-dom/package.json'
ERR! Require stack:
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/ui/noop.js
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERR! at resolveFileName (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/resolve-from/index.js:29:39)
ERR! at resolveFrom (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/resolve-from/index.js:43:9)
ERR! at module.exports (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/resolve-from/index.js:46:47)
ERR! at Object.<anonymous> (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/ui/paths.js:18:24)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR! at Module.require (internal/modules/cjs/loader.js:974:19)
ERR! at require (internal/modules/cjs/helpers.js:93:18)
ERR! at Object.<anonymous> (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/manager-webpack4/dist/cjs/manager-webpack.config.js:50:38)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12) {
ERR! code: 'MODULE_NOT_FOUND',
ERR! requireStack: [
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/ui/noop.js'
ERR! ]
ERR! }
info => Serving static files from /Users/martin.rojas/Documents/Projects/client-partners/static at /
info => Loading 1 config file in "/Users/martin.rojas/Documents/Projects/client-partners/.nuxt-storybook/storybook"
info => Loading 8 other files in "/Users/martin.rojas/Documents/Projects/client-partners/.nuxt-storybook/storybook"
info => Adding stories defined in "/Users/martin.rojas/Documents/Projects/client-partners/.nuxt-storybook/storybook/main.js"
ERR! Error: Cannot find module 'react-dom/package.json'
ERR! Require stack:
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/presets/preview-preset.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/server.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/dist/index.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/dist/cli.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:99:19)
ERR! at _default (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:190:52)
ERR! at async Object.start (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:95:16)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR! at async buildDevStandalone (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR! at async buildDev (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)
ERR! Error: Cannot find module 'react-dom/package.json'
ERR! Require stack:
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/presets/preview-preset.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/server.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/dist/index.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/dist/cli.js
ERR! - /Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:99:19)
ERR! at _default (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:190:52)
ERR! at async Object.start (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:95:16)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/dev-server.js:123:28)
ERR! at async buildDevStandalone (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR! at async buildDev (/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5) {
ERR! code: 'MODULE_NOT_FOUND',
ERR! requireStack: [
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/builder-webpack4/dist/cjs/presets/preview-preset.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/dist/cjs/server.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@storybook/core/server.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/dist/index.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/dist/cli.js',
ERR! '/Users/martin.rojas/Documents/Projects/client-partners/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js'
ERR! ]
ERR! }
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
FATAL Failed to run command nuxt-storybook: 12:25:33
Error: Command failed with exit code 1: nuxt-storybook
╭────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Failed to run command `nuxt-storybook`: │
│ Error: Command failed with exit code 1: nuxt-storybook │
│ │
╰────────────────────────────────────────────────────────────╯
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Package.json
{
"name": "slice-library-starter-nuxt",
"version": "0.0.1",
"description": "A Boiler Plate to launch a Nuxt.js and Slice Machine project",
"author": "22squared",
"main": "slices/index.js",
"scripts": {
"dev": "nuxt",
"nuxt:build": "nuxt build",
"build": "nuxt generate",
"start": "nuxt start",
"generate": "nuxt generate",
"prepublishOnly": "node ./node_modules/sm-commons/scripts/bundle",
"storybook": "nuxt storybook",
"build-storybook": "nuxt storybook build",
"slicemachine": "start-slicemachine --port 9999"
},
"dependencies": {
"@heroicons/vue": "^1.0.5",
"@nuxtjs/prismic": "^1.4.0",
"cookies": "^0.8.0",
"nuxt": "^2.15.8",
"nuxt-sm": "0.0.9",
"vue-essential-slices": "^0.3.0",
"vue-slicezone": "latest"
},
"devDependencies": {
"@nuxtjs/storybook": "^4.1.1",
"@nuxtjs/tailwindcss": "^4.2.1",
"core-js": "^3.20.3",
"nodemon": "^2.0.15",
"postcss": "^8.4.5",
"sass": "^1.49.0",
"sass-loader": "^12.4.0",
"slice-machine-ui": "^0.1.2"
},
"repository": {
"type": "git",
"url": "https://github.com/prismicio-community/slice-library-starter-nuxt"
}
}
nut.config.js
import smConfig from './sm.json';
import { getStoriesPaths } from 'slice-machine-ui/helpers/storybook';
if (!smConfig.apiEndpoint) {
console.warn(
"Looks like Slice Machine hasn't been bootstraped already.\nCheck the `Getting Started` section of the README file :)"
);
}
export default {
// Target (https://go.nuxtjs.dev/config-target)
target: 'static',
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'slice-library-starter-nuxt',
meta: [
{
charset: 'utf-8',
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
hid: 'description',
name: 'description',
content: '',
},
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico',
},
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Roboto:wght@300;500;700&display=swap',
},
],
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: ['@/assets/css/global.css'],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: ['@nuxtjs/tailwindcss'],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
[
'@nuxtjs/prismic',
{
endpoint: smConfig.apiEndpoint || '',
apiOptions: {
routes: [
{
type: 'page',
path: '/:uid',
},
],
},
},
],
['nuxt-sm'],
],
generate: {
// fallback: '404.html', // Netlify reads a 404.html, Nuxt will load as an SPA
fallback: true,
},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
transpile: ['vue-slicezone', 'nuxt-sm'],
},
storybook: {
// This is a bug with `getStoriesPaths` and Nuxt that is awaiting to be fixed
stories: [...getStoriesPaths().map((path) => path.replace('../', '~/'))],
},
// This is a bug with `getStoriesPaths` and Nuxt that is awaiting to be fixed
ignore: [...getStoriesPaths().map((path) => path.replace('../', '~/'))],
};