I moved my Next.js to use Preact, but as side-effect Storybook not working more as spected. The output log below, and at the end the commands to reproduce the issue:
yarn build-storybook
yarn run v1.22.17
warning ../package.json: No license field
$ build-storybook
info @storybook/preact v6.4.19
info
info => Cleaning outputDir: /storybook-static
info => Loading presets
WARN Failed to load preset: "/node_modules/@storybook/preact/node_modules/@storybook/manager-webpack4/dist/cjs/presets/manager-preset.js"
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at resolveFileName (/node_modules/resolve-from/index.js:29:39)
ERR! at resolveFrom (/node_modules/resolve-from/index.js:43:9)
ERR! at module.exports (/node_modules/resolve-from/index.js:46:47)
ERR! at Object.<anonymous> (/node_modules/@storybook/ui/paths.js:17:18)
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> (/node_modules/@storybook/preact/node_modules/@storybook/manager-webpack4/dist/cjs/presets/manager-preset.js:63:38)
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at resolveFileName (/node_modules/resolve-from/index.js:29:39)
ERR! at resolveFrom (/node_modules/resolve-from/index.js:43:9)
ERR! at module.exports (/node_modules/resolve-from/index.js:46:47)
ERR! at Object.<anonymous> (/node_modules/@storybook/ui/paths.js:17:18)
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> (/node_modules/@storybook/preact/node_modules/@storybook/manager-webpack4/dist/cjs/presets/manager-preset.js:63:38) {
ERR! code: 'MODULE_NOT_FOUND',
ERR! path: '/node_modules/react/package.json'
ERR! }
info => Compiling preview..
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:99:19)
ERR! at _default (/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:196:46)
ERR! at async Object.build (/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:174:16)
ERR! at async Promise.all (index 1)
ERR! at async buildStaticStandalone (/node_modules/@storybook/preact/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR! at async buildStatic (/node_modules/@storybook/preact/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5)
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:99:19)
ERR! at _default (/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:196:46)
ERR! at async Object.build (/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:174:16)
ERR! at async Promise.all (index 1)
ERR! at async buildStaticStandalone (/node_modules/@storybook/preact/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR! at async buildStatic (/node_modules/@storybook/preact/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5) {
ERR! code: 'MODULE_NOT_FOUND',
ERR! path: '/node_modules/react/package.json'
ERR! }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The complete process to reproduce the issue is below:
npx yarn init -yp; npx yarn
npx sb init --type preact
yarn add \
preact \
react@npm:@preact/compat \
react-dom@npm:@preact/compat \
react-ssr-prepass@npm:preact-ssr-prepass \
preact-render-to-string
yarn build-storybook