[BUG] Error on first run of "npm run storybook"

[09:10:04] Documentation generated in ./ in 0.473 seconds info @storybook/angular v6.3.12 info info => Loading presets WARN Failed to load preset: “/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js” ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@angular/compiler-cli/bundles/ngcc/index.js from /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js not supported. ERR! Instead change the require of index.js in /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js to a dynamic import() which is available in all CommonJS modules. ERR! at Object.<anonymous> (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js:70:14) ERR! at interopRequireDefault (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:159:16) ERR! at getContent (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:175:10) ERR! at loadPreset (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:184:20) ERR! at /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:236:18 ERR! at Array.reduce (<anonymous>) ERR! at loadPresets (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:235:18) ERR! at getPresets (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:293:23) ERR! at loadAllPresets (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:318:10) ERR! at buildDevStandalone (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:48) ERR! at async Object.buildDev (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5) ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@angular/compiler-cli/bundles/ngcc/index.js from /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js not supported. ERR! Instead change the require of index.js in /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js to a dynamic import() which is available in all CommonJS modules. ERR! at Object.<anonymous> (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js:70:14) ERR! at interopRequireDefault (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:159:16) ERR! at getContent (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:175:10) ERR! at loadPreset (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:184:20) ERR! at /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:236:18 ERR! at Array.reduce (<anonymous>) ERR! at loadPresets (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:235:18) ERR! at getPresets (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:293:23) ERR! at loadAllPresets (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-common/dist/cjs/presets.js:318:10) ERR! at buildDevStandalone (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:48) ERR! at async Object.buildDev (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5) { ERR! code: ‘ERR_REQUIRE_ESM’ ERR! } info => Loading 1 config file in “/Users/ppatel/Documents/Projects/selective-storybook/.storybook” info => Loading 9 other files in “/Users/ppatel/Documents/Projects/selective-storybook/.storybook” info => Adding stories defined in “/Users/ppatel/Documents/Projects/selective-storybook/.storybook/main.js” (node:67175) [DEP0148] DeprecationWarning: Use of deprecated folder mapping “./” in the “exports” field module resolution of the package at /Users/ppatel/Documents/Projects/selective-storybook/node_modules/tslib/package.json. Update this package.json to use a subpath pattern like “./*”. (Use node --trace-deprecation ... to show where the warning was created) info => Using prebuilt manager info => Found custom tsconfig.json info => Using implicit CSS loaders info => Loading angular-cli config info => Using angular project “selective-storybook:build” for configuring Storybook ERR! => Could not get angular cli webpack config ERR! TypeError: Cannot read properties of undefined (reading ‘target’) ERR! at /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:145:49 ERR! at step (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23) ERR! at Object.next (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53) ERR! at fulfilled (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:41:58) ERR! TypeError: Cannot read properties of undefined (reading ‘target’) ERR! at /Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:145:49 ERR! at step (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23) ERR! at Object.next (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53) ERR! at fulfilled (/Users/ppatel/Documents/Projects/selective-storybook/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:41:58)

[dartjava]

Hello! I’ve got the same error, and searching for an answer I’ve found a workaround which works for me.

I’ve run npx sb@next init for a non stable storybook version (at this moment is 6.4.0-rc.2).

Then I fixed the pathing inside the file .storybook/tsconfig.json from "extends": "../false", to "extends": "../tsconfig.json",.

Now if I run npm run storybook my project run correctly without errors.

I’m a really really newbie but I hope this helps.

[stale[bot]]

This issue has been automatically closed because it has not had recent activity. Please file a new issue if you are encountering a similar or related problem. Thank you for your contributions.