Closed gaetanmaisse closed 3 years ago
When I run npx sb@next init --builder webpack5
I get the following error at startup, which seems to match https://github.com/storybookjs/storybook/issues/13893#issuecomment-818903998:
10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ 「wdm」: wait until bundle finished:
/Users/shilman/projects/testing/ng12-app/node_modules/webpack/lib/util/MapHelpers.js:17
const value = map.get(key);
^
TypeError: Cannot read property 'get' of undefined
at exports.provide (/Users/shilman/projects/testing/ng12-app/node_modules/webpack/lib/util/MapHelpers.js:17:20)
at /Users/shilman/projects/testing/ng12-app/node_modules/webpack/lib/DefinePlugin.js:289:51
at SyncHook.eval [as call] (eval at create (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at SyncHook.lazyCompileHook (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
at /Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
at /Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:77:18
at _next0 (eval at create (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
at eval (eval at create (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
at watchRunHook (/Users/shilman/projects/testing/ng12-app/node_modules/webpack-virtual-modules/index.js:173:5)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
at AsyncSeriesHook.lazyCompileHook (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (/Users/shilman/projects/testing/ng12-app/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:41:32)
error Command failed with exit code 1.
Here's what I did:
npx sb@next repro angular-demo --framework angular --template angular
npx sb@next init --builder webpack5
within the angular-demo
directory that was createdyarn storybook
And here are the errors I received: https://gist.github.com/bebraw/c36e1d0c6067e9409346928630e0e58c . Examples: ModuleNotFoundError: Module not found: Error: Can't resolve '@webcomponents/custom-elements'
, ModuleNotFoundError: Module not found: Error: Can't resolve '@webcomponents/custom-elements/src/native-shim' in ...
.
I wonder if something has changed since @shilman's go at it. It's possible the builder was updated for example and how there are new problems to solve.
Thanks @bebraw. I'm not sure what's different between your setup and mine.
I followed your steps (with a --force
after the second step), and then did a couple more steps to git it working:
npx sb@next repro angular-repro -t angular
cd angular-repro
npx sb@next init --builder webpack5 --force
# add missing dependencies
yarn add -D @angular/elements @webcomponents/custom-elements
Then I manually added this to .storybook/main.js
:
module.exports = {
// stories, addons, etc...
webpackFinal: async (config) => {
if (!config.resolve.fallback) {
config.resolve.fallback = {};
}
config.resolve.fallback.crypto = false;
return config;
},
};
And it's working! 🎉
What I think needs to happen:
@angular/elements
@webcomponents/custom-elements
as extraDependencies
in the CLI init for angulardocs.inlineStories
parameter to true in the CLI by default while we're at itbuilder-webpack5
. i got the fix from here: https://github.com/storybookjs/storybook/pull/14592I'm not sure this will handle all the cases, but at least it handles one. @ThibaudAV @bebraw @ndelangen WDYT?
@shilman It makes sense to me that the webpack 5 builder owns the related configuration customization. Also it sounds reasonable the missing dependencies are added at CLI init so the users don't have to add them manually as it's confusing to fix otherwise.
@bebraw Yeah I think those are optional dependencies but the behavior changed in yarn 2. Thanks for taking a look at this!! 🙏
arf
@angular/elements @webcomponents/custom-elements
Looks like this hack doesn't work anymore with webpack 5
: https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/angular/preset.ts#L12
:/ i juste read this
new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });
// Supported in webpack 4 and earlier, unsupported in webpack 5:
new webpack.IgnorePlugin(resourceRegExp, [contextRegExp]);
So if we change this line with :
return [new IgnorePlugin({ resourceRegExp: /@storybook(\\|\/)angular(\\|\/)element-renderer/ })];
it works perfectly again 😀 (tested with an edit in cjs quickly)
The fix discussed above works in my minimal reproduction repo, but I am still getting an error with sass-loader when the manager is built/run in our real-world usage of storybook. I'm still trying to narrow down the exact cause
edit: this was caused by us using this to load styles in the manager: require('!style-loader!css-loader!sass-loader!./manager-styles.scss');
. This is a problem because the sass-loader installed only works with webpack 5. We fixed this by installing a webpack 4 compatible version of the manager (in package.json): "sass-loader-webpack4": "npm:sass-loader@10.1.1"
. I'm assuming all this we're doing is unsupported, but maybe it'll be helpful to someone.
Unfortunately, we are still having other issues
That looks like a webpack 4/5 compatibility issue at the loader level. Can you verify the loader version and check webpack version as well? After doing this, compare esp. the loader version to the most recent one available.
On 13. May 2021, at 19.54, Benjamin Kindle @.***> wrote:
The fix discussed above works in my minimal reproduction repo, but I am still getting an error with sass-loader when the manager is built/run in our real-world usage of storybook.
I'm still trying to narrow down the exact cause
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.
Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.27 containing PR #14928 that references this issue. Upgrade today to the @next
NPM tag to try it out!
npx sb upgrade --prerelease
Closing this issue. Please re-open if you think there's still more to do.
Hi @shilman! Thank you for 6.3.0-alpha.27 release. Unfortunately, it did not help me to fix my error. It tried both upgrade and setup from the beginning. The same error:
info @storybook/angular v6.3.0-alpha.27
info
info => Loading presets
info => Loading 1 config file in "/my-project/.storybook"
info => Loading 7 other files in "/my-project/.storybook"
info => Using prebuilt manager
info => Adding stories defined in "/my-project/.storybook/main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "my-project" for configuring Storybook
ERR! => Could not get angular cli webpack config
ERR! TypeError: Cannot read property 'minify' of undefined
ERR! at getCommonConfig (/my-project/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js:237:28)
ERR! at Object.<anonymous> (/my-project/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:199:39)
ERR! at step (/my-project/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR! at Object.next (/my-project/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR! at fulfilled (/my-project/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:41:58)
ERR! TypeError: Cannot read property 'minify' of undefined
ERR! at getCommonConfig (/my-project/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js:237:28)
ERR! at Object.<anonymous> (/my-project/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:199:39)
ERR! at step (/my-project/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR! at Object.next (/my-project/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR! at fulfilled (/my-project/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:41:58)
Any idea what can be wrong? I use the most recent angular 12 without custom webpack configs.
Can you please create a reproduction with npx sb@next repro
and link me to result and I'll take a look?
@shilman I have the exact same error after using npx sb upgrade --prerelease
:
ERR! => Could not get angular cli webpack config ERR! TypeError: Cannot read property 'minify' of undefined
Did you read the MIGRATION instructions?
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-12-upgrade
I did not read that. Still I get the same error :/
Can you please create a reproduction with
npx sb@next repro
and link me to result and I'll take a look?
I've tried this and it works fine. I will try to find the difference between this newly generated project and our Angular v11 upgraded to Angular v12. At first glance the difference in the console output is this:
-info => Using angular project "my-project" for configuring Storybook
-ERR! => Could not get angular cli webpack config
+info => Using angular-cli webpack config
+info => Using default Webpack5 setup
For some reason, this default Webpack5 setup
is not used by Storybook.
@ThibaudAV does this mean anything to you? ☝️
@eugene-stativka are you using nx
?
@eugene-stativka are you using
nx
?
no. Just official @angular/cli
Another interesting observation: for the project created with npx sb@next repro
everything worked fine but for a pure @angular/cli
project + npx sb@next init
(6.3.0-alpha.28
) or new nx workspace I received this error:
info => Using angular project "a12" for configuring Storybook
info => Using angular-cli webpack config
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
7% setup compile fork-ts-checker-webpack-pluginStarting type checking service...
10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ 「wdm」: wait until bundle finished:
/some-path/a12/node_modules/webpack/lib/util/MapHelpers.js:17
const value = map.get(key);
^
TypeError: Cannot read property 'get' of undefined
at exports.provide (/some-path/a12/node_modules/webpack/lib/util/MapHelpers.js:17:20)
at /some-path/a12/node_modules/webpack/lib/DefinePlugin.js:289:51
at SyncHook.eval [as call] (eval at create (/some-path/a12/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at SyncHook.lazyCompileHook (/some-path/a12/node_modules/@storybook/core-server/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/some-path/a12/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
at /some-path/a12/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/some-path/a12/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/some-path/a12/node_modules/@storybook/core-server/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/some-path/a12/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)
at /some-path/a12/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:77:18
at _next0 (eval at create (/some-path/a12/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
at eval (eval at create (/some-path/a12/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
at watchRunHook (/some-path/a12/node_modules/webpack-virtual-modules/index.js:173:5)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/some-path/a12/node_modules/@storybook/core-server/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
at AsyncSeriesHook.lazyCompileHook (/some-path/a12/node_modules/@storybook/core-server/node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (/some-path/a12/node_modules/@storybook/core-server/node_modules/webpack/lib/Watching.js:41:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! a12@0.0.0 storybook: `npm run docs:json && start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the a12@0.0.0 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/me/.npm/_logs/2021-05-15T18_23_21_949Z-debug.log
@eugene-stativka i tried creating a new @angular/cli
project and npx sb@next init
and it worked fine for me. can you share more details about exactly what you tried there?
@eugene-stativka i tried creating a new
@angular/cli
project andnpx sb@next init
and it worked fine for me. can you share more details about exactly what you tried there?
MacOS, Node 14, latest @angular/cli. I will try once again on another laptop.
@eugene-stativka I tried your repo and having no error at all. I tried yarn storybook
and yarn build-storybook
. Im on macOS 11.2.3 with Node 14.17.0
@shilman What you could do is create a repo with new @angular/cli
project that fails building and commit that. Then delete everything and do npx sb@next init
. Now you may see the difference to the git commit.
@MickL I used npm
, not yarn
. Do you think it can cause the problem?
@eugene-stativka I retried with npm. npm run build-storybook
was working but npm run storybook
throws the error that you described.
Not sure if this is related to the issue that you and me had in our projects:
ERR! => Could not get angular cli webpack config ERR! TypeError: Cannot read property 'minify' of undefined
@shilman In my project I used yarn as well and the error happens with build and start and occurs very quickly in the process. I use the following commands if that helps somehow:
yarn docs:json && start-storybook -p 4201
yarn docs:json && build-storybook -o dist/storybook
Also I followed the migration guide and installed @storybook/builder-webpack5
and added that to my storybook main.js:
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
core: {
builder: 'webpack5',
},
}
Those that are seeing "Cannot read property 'get' of undefined"
- the workaround in https://github.com/storybookjs/storybook/issues/14497#issuecomment-818723376 (and the comment after that) solved that specific error for us
here is a repo that gives an error that I think is different than any mentioned here so far. It is a brand new nx project with storybook set up. (let me know if I should make a new issue)
This also happens to be the issue that is preventing our medium/largish project from moving to Angular-12/SB-6.3.
Those that are seeing
"Cannot read property 'get' of undefined"
- the workaround in #14497 (comment) (and the comment after that) solved that specific error for us
@kirjai Did you have this error?
info => Using angular project "consumer-web-v2" for configuring Storybook
ERR! => Could not get angular cli webpack config
ERR! TypeError: Cannot read property 'minify' of undefined
I tried all these steps but I still get this error.
@shilman I have the exact same error after using
npx sb upgrade --prerelease
:ERR! => Could not get angular cli webpack config ERR! TypeError: Cannot read property 'minify' of undefined
I looked at the error and saw that the optimization option in angular.json can pass a boolean or an object. See Angular Workspace Configuration - Optimization Configuration .
so instead of :
"optimization": true
I changed to
"optimization": {"fonts": true, "scripts": true, "styles":{"minify":true,"inlineCritical":true}}
If optimization is set to false, set all values to false
After this fix, I did the workaround mentioned below and now everything seems to work.
Those that are seeing
"Cannot read property 'get' of undefined"
- the workaround in #14497 (comment) (and the comment after that) solved that specific error for us
Thanks! But why is it not working? For Angular this seems valid because Angular is working and ng update didnt change that option.
@simonljus thank you for your suggestion. It helped to get rid of the "Cannot read property 'minify' of undefined" error. Unfortunately, I still get this error at the very end of the npm run storybook
command (reproduction repo):
99% done plugins webpack-hot-middlewarewebpack built preview 34636f79d69584a8d5b9 in 61969ms
ModuleNotFoundError: Module not found: Error: Can't resolve 'telejson' in '/my-project/node_modules/@storybook/channel-postmessage/dist/esm'
at /my-project/node_modules/webpack/lib/Compilation.js:1765:28
at /my-project/node_modules/webpack/lib/NormalModuleFactory.js:730:13
at eval (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
at /my-project/node_modules/webpack/lib/NormalModuleFactory.js:273:22
at eval (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
at /my-project/node_modules/webpack/lib/NormalModuleFactory.js:402:22
at /my-project/node_modules/webpack/lib/NormalModuleFactory.js:117:11
at /my-project/node_modules/webpack/lib/NormalModuleFactory.js:646:24
at /my-project/node_modules/webpack/lib/NormalModuleFactory.js:800:8
at /my-project/node_modules/webpack/lib/NormalModuleFactory.js:920:5
at /my-project/node_modules/neo-async/async.js:6883:13
at /my-project/node_modules/webpack/lib/NormalModuleFactory.js:903:45
at finishWithoutResolve (/my-project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
at /my-project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:362:15
at /my-project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/my-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
resolve 'telejson' in '/my-project/node_modules/@storybook/channel-postmessage/dist/esm'
Parsed request is a module
using description file: /my-project/node_modules/@storybook/channel-postmessage/package.json (relative path: ./dist/esm)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/my-project/node_modules/@storybook/channel-postmessage/dist/esm/node_modules doesn't exist or is not a directory
/my-project/node_modules/@storybook/channel-postmessage/dist/node_modules doesn't exist or is not a directory
looking for modules in /my-project/node_modules/@storybook/channel-postmessage/node_modules
single file module
using description file: /my-project/node_modules/@storybook/channel-postmessage/package.json (relative path: ./node_modules/telejson)
no extension
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson.jsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson.tsx doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson.json doesn't exist
.cjs
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson.cjs doesn't exist
/my-project/node_modules/@storybook/channel-postmessage/node_modules/telejson doesn't exist
/my-project/node_modules/@storybook/node_modules doesn't exist or is not a directory
/my-project/node_modules/node_modules doesn't exist or is not a directory
looking for modules in /my-project/node_modules
single file module
using description file: /my-project/package.json (relative path: ./node_modules/telejson)
no extension
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson is not a file
.mjs
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson.jsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson.tsx doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson.json doesn't exist
.cjs
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson.cjs doesn't exist
existing directory /my-project/node_modules/telejson
using description file: /my-project/node_modules/telejson/package.json (relative path: .)
using exports field: ./dist/esm/index.mjs
using description file: /my-project/node_modules/telejson/package.json (relative path: ./dist/esm/index.mjs)
no extension
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson/dist/esm/index.mjs doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson/dist/esm/index.mjs.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson/dist/esm/index.mjs.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson/dist/esm/index.mjs.jsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson/dist/esm/index.mjs.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson/dist/esm/index.mjs.tsx doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson/dist/esm/index.mjs.json doesn't exist
.cjs
Field 'browser' doesn't contain a valid alias configuration
/my-project/node_modules/telejson/dist/esm/index.mjs.cjs doesn't exist
as directory
/my-project/node_modules/telejson/dist/esm/index.mjs doesn't exist
/my-project/node_modules doesn't exist or is not a directory
/User/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /my-project
single file module
using description file: /my-project/package.json (relative path: ./telejson)
no extension
Field 'browser' doesn't contain a valid alias configuration
/my-project/telejson doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/my-project/telejson.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/my-project/telejson.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/my-project/telejson.jsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/my-project/telejson.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/my-project/telejson.tsx doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/my-project/telejson.json doesn't exist
.cjs
Field 'browser' doesn't contain a valid alias configuration
/my-project/telejson.cjs doesn't exist
/my-project/telejson doesn't exist
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project@0.0.0 storybook: `npm run docs:json && start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-project@0.0.0 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/eugene.stativka/.npm/_logs/2021-05-18T08_29_04_119Z-debug.log
Does anyone have any idea what causes this error?
To be honest I dont want to change my angular.json JUST because of Storybook requires so. Setting "optimization": true
is actually the default setting of angular.json according to the docs
After upgrading to Angular 12 and Storybook 6.3, I attempt to run or build and receive the following error:
Error: NormalModuleFactory.beforeResolve (IgnorePlugin) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created. at C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:721:11 at Hook.eval [as callAsync] (eval at create (C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14) at NormalModuleFactory.create (C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModuleFactory.js:702:28) at Compilation._factorizeModule (C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\Compilation.js:1724:11) at C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\util\AsyncQueue.js:303:10 at Hook.eval [as callAsync] (eval at create (C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14) at AsyncQueue._startProcessing (C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\util\AsyncQueue.js:293:26) at AsyncQueue._ensureProcessing (C:\code\Bricks\energy-ui-lib\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\util\AsyncQueue.js:280:12) at processImmediate (internal/timers.js:462:21)
Version info: "@angular/animations": "~12.0.1", "@angular/cdk": "^12.0.0", "@angular/common": "~12.0.1", "@angular/compiler": "~12.0.1", "@angular/core": "~12.0.1", "@angular/forms": "~12.0.1", "@angular/material": "^12.0.0", "@angular/platform-browser": "~12.0.1", "@angular/platform-browser-dynamic": "~12.0.1", "@angular/router": "~12.0.1", ... "@storybook/addon-a11y": "^6.3.0-alpha.35", "@storybook/addon-actions": "^6.3.0-alpha.35", "@storybook/addon-console": "^1.2.3", "@storybook/addon-essentials": "^6.3.0-alpha.35", "@storybook/addon-links": "^6.3.0-alpha.35", "@storybook/addon-storysource": "^6.3.0-alpha.35", "@storybook/angular": "^6.3.0-alpha.35", "@storybook/builder-webpack5": "^6.3.0-alpha.36",
@MickL I'm going to open a PR to fix "optimization". Could you test if it fixes the problem ?
Yes ofcourse, just tell me how. Do I need to build or is it alpha 43?
@MickL should be released in alpha.43
npx sb@next upgrade --prerelease
@shilman @MickL I've just tried alpha.43
in my hello-world repo. It works there!
Unfortunately, I'm still struggling to make it work for the real world repo at work. This time I have a runtime exception in the Storybook app. The storybook UI is open but stories are not loaded at all.
Uncaught ReferenceError: process is not defined
at Object../node_modules/path/path.js (path.js:25)
at __webpack_require__ (bootstrap:24)
at fn (hot module replacement:61)
at Object../node_modules/loader-utils/lib/stringifyRequest.js (stringifyRequest.js:3)
at __webpack_require__ (bootstrap:24)
at fn (hot module replacement:61)
at Object../node_modules/loader-utils/lib/index.js (index.js:5)
at __webpack_require__ (bootstrap:24)
at fn (hot module replacement:61)
at Object../node_modules/@storybook/source-loader/dist/esm/dependencies-lookup/readAsObject.js (vendors-node_modules_angular_common_fesm2015_http_js-node_modules_angular_router_fesm2015_rou-b8942b.iframe.bundle.js:127113)
I will continue my investigation. Any suggestions on how to fix this issue are welcome.
UPDATE: build-storybook
works fine. This ^ error happens only during start-storybook
@eugene-stativka that looks like it could be a bug in source-loader
. Try disabling addon-docs
or addon-storysource
@shilman @ThibaudAV Storybook seems to be running now! I do get the following tho:
WARNING in DefinePlugin Conflicting values for 'process.env'
What I use:
"@storybook/addon-actions": "^6.3.0-alpha.44",
"@storybook/addon-essentials": "^6.3.0-alpha.44",
"@storybook/addon-links": "^6.3.0-alpha.44",
"@storybook/angular": "^6.3.0-alpha.44",
"@storybook/builder-webpack5": "^6.3.0-alpha.44",
"@storybook/manager-webpack5": "^6.3.0-alpha.44",
And what I dont understand: Do we need @storybook/builder-webpack5
AND @storybook/manager-webpack5
now?
@MickL yes, you need @storybook/manager-webpack5
if you're using @storybook/builder-webpack5
.
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build
For new projects this will all get installed automatically
Hello, I updated to the prerelease version (6.3.0-alpha.44) but still receive this error I first referenced above https://github.com/storybookjs/storybook/issues/14909#issuecomment-845383651:
NormalModuleFactory.beforeResolve (IgnorePlugin) is no longer a waterfall hook, but a bailing hook instead.
Are there any hints on where I can look to resolve this?
Hello,
I created a new angular 12 app and used npx sb init to install storybook, ran into this issue, and then came here and tried running npx sb@next upgrade --prerelease to see if it fixed the issue, but I am still experiencing the same issue as the original commentor.
Here's my console output:
info @storybook/angular v6.3.0-alpha.45
info
info => Loading presets
info => Loading 1 config file in "C:\Users\------\StorybookApp\.storybook"
info => Loading 7 other files in "C:\Users\------\StorybookApp\.storybook"
info => Adding stories defined in "C:\Users\------\StorybookApp\.storybook\main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "StorybookApp:build" for configuring Storybook
info => Using angular-cli webpack config
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[9] has an unknown property 'mimetype'. These properties are valid:
ERR! object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
ERR! -> A rule
ERR! at webpack (C:\Users\------\StorybookApp\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\webpack.js:31:9)
ERR! at Object.start (C:\Users\------\StorybookApp\node_modules\@storybook\builder-webpack4\dist\cjs\index.js:96:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (C:\Users\------\StorybookApp\node_modules\@storybook\core-server\dist\cjs\dev-server.js:123:28)
ERR! at async buildDevStandalone (C:\Users\------\StorybookApp\node_modules\@storybook\core-server\dist\cjs\build-dev.js:110:31)
ERR! at async Object.buildDev (C:\Users\------\StorybookApp\node_modules\@storybook\core-server\dist\cjs\build-dev.js:152:5)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[9] has an unknown property 'mimetype'. These properties are valid:
ERR! object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
ERR! -> A rule
ERR! at webpack (C:\Users\------\StorybookApp\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\webpack.js:31:9)
ERR! at Object.start (C:\Users\------\StorybookApp\node_modules\@storybook\builder-webpack4\dist\cjs\index.js:96:18)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (C:\Users\------\StorybookApp\node_modules\@storybook\core-server\dist\cjs\dev-server.js:123:28)
ERR! at async buildDevStandalone (C:\Users\------\StorybookApp\node_modules\@storybook\core-server\dist\cjs\build-dev.js:110:31)
ERR! at async Object.buildDev (C:\Users\------\StorybookApp\node_modules\@storybook\core-server\dist\cjs\build-dev.js:152:5)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! storybook-app@0.0.0 storybook: `npm run docs:json && start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the storybook-app@0.0.0 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\------\AppData\Roaming\npm-cache\_logs\2021-05-25T19_01_42_675Z-debug.log
Am I missing a step?
Hello I create a new angular app too, and started fresh with
npx sb@next init
which ran fine, but when I try to start storybook I get the follorwin error:
info @storybook/angular v6.3.0-beta.0
info
ERR! Error: Cannot find module '../presets/manager-preset'
ERR! Require stack:
ERR! -./node_modules/@storybook/manager-webpack5/dist/cjs/index.js
ERR! -./node_modules/@storybook/core-server/dist/cjs/utils/get-manager-builder.js
ERR! - ./node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! -./node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - ./node_modules/@storybook/core/dist/cjs/server.js
ERR! - ./node_modules/@storybook/core/server.js
ERR! - ./node_modules/@storybook/angular/dist/ts3.9/server/index.js
ERR! - ./node_modules/@storybook/angular/bin/index.js
this should be ./presets/manager-preset
but that's not enogh, if I fix this locally I get the following error:
<i> [webpack-dev-middleware] wait until bundle finished
7% setup compile fork-ts-checker-webpack-pluginStarting type checking service...
10% building 0/1 entries 0/0 dependencies 0/0 modulesWARN Force closed preview build
ERR! TypeError: webpackInstance is not a function
ERR! at _callee2$ (./node_modules/@storybook/manager-webpack5/dist/cjs/index.js:248:24)
ERR! at tryCatch (./node_modules/regenerator-runtime/runtime.js:63:40)
ERR! at Generator.invoke [as _invoke] (./node_modules/regenerator-runtime/runtime.js:293:22)
ERR! at Generator.next (./node_modules/regenerator-runtime/runtime.js:118:21)
ERR! at asyncGeneratorStep (./node_modules/@storybook/manager-webpack5/dist/cjs/index.js:76:103)
ERR! at _next (./node_modules/@storybook/manager-webpack5/dist/cjs/index.js:78:194)
@jigfox: I had a similar error, though I am not sure it is the same. In my case I had to install "@storybook/manager-webpack5" manually to prevent another error (npm install --save-dev @storybook/manager-webpack5
) which came as version 6.3.0-alpha.37. Starting storybook in this configuration gave the exact same error you reported. I updated the version to match that of @storybook/angular (6.3.0-beta.0), did an npm install and it worked.
However, now I am facing another issue. When I start storybook it builds, but I get the
assets by chunk 4.26 MiB (id hint: vendors)
assets by status 3.96 MiB [big]
asset vendors-node_modules_storybook_core-client_dist_esm_globals_polyfills_js-node_modules_storybo-26f588.manager.bundle.js 3.6 MiB [emitted] [big] (id hint: vendors)
asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_OverlayScrollbars_js.manager.bundle.js 372 KiB [emitted] [big] (id hint: vendors)
asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter_syntaxhighlighter_js.manager.bundle.js 186 KiB [emitted] (id hint: vendors)
asset vendors-node_modules_storybook_components_dist_esm_tooltip_WithTooltip_js.manager.bundle.js 110 KiB [emitted] (id hint: vendors)
asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_GlobalScrollAreaStyles_js.manager.bundle.js 15.6 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 13.4 KiB [emitted] (name: runtime~main)
asset index.html 2.46 KiB [emitted]
asset main.manager.bundle.js 1.35 KiB [emitted] (name: main)
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.27 KiB [emitted]
Entrypoint main [big] 3.61 MiB = runtime~main.manager.bundle.js 13.4 KiB vendors-node_modules_storybook_core-client_dist_esm_globals_polyfills_js-node_modules_storybo-26f588.manager.bundle.js 3.6 MiB main.manager.bundle.js 1.35 KiB
orphan modules 1.46 MiB [orphan] 341 modules
runtime modules 8.23 KiB 13 modules
javascript modules 3.87 MiB
modules by path ./node_modules/ 3.87 MiB 737 modules
./libs/ui/.storybook/generated-refs.js 101 bytes [built] [code generated]
./util.inspect (ignored) 15 bytes [built] [code generated]
json modules 1.52 KiB
./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
WARNING in DefinePlugin
Conflicting values for 'process.env'
1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
manager (webpack 5.36.2) compiled with 2 warnings in 4783 ms
webpack built preview af989973f63a846aa77f in 5917ms
———————————————————————————————————————————————
> NX ERROR Running target "ui:storybook" failed
Failed tasks:
- ui:storybook
I created this repo to reproduce the issue. It is an nx repo and to get the error you have to clone the repo and execute
git checkout add-storybook
npm install
npx nx run ui:storybook
@eugene-stativka that looks like it could be a bug in
source-loader
. Try disablingaddon-docs
oraddon-storysource
I tried the beta version and the upgrade did not work. Only when I removed the storybook and initialized it once again it helped.
I updated a project to the latest ^6.3.0-beta.1
releases and added @storybook/manager-webpack5@^6.3.0-beta.1
and storybook is building now!
When I try to run it, I get the following
WARNING in DefinePlugin
Conflicting values for 'process.env'
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
manager (webpack 5.36.2) compiled with 1 warning in 2934 ms
webpack built preview 3db87e14454cfd5af8b5 in 32398ms
Then when I open up the browser, I get these errors
Uncaught SyntaxError: Unexpected token ':'
main.manager.bundle.js:3 Uncaught SyntaxError: Unexpected token ':'
VM68:1 POST http://localhost:4400/runtime-error 404 (Not Found)
(anonymous) @ VM68:1
onerror @ (index):43
error (async)
(anonymous) @ (index):37
VM68:1 POST http://localhost:4400/runtime-error 404 (Not Found)
(anonymous) @ VM68:1
onerror @ (index):43
error (async)
(anonymous) @ (index):37
along with a blank white page.
It looks like some of the Storybook dependencies support webpack5
now, but there are still some problematic dependencies on webpack4
:
├─┬ @angular-devkit/build-angular@12.0.1
│ └── webpack@5.36.2
├─┬ @storybook/addon-essentials@6.3.0-beta.1
│ └─┬ @storybook/addon-docs@6.3.0-beta.1
│ └─┬ @storybook/builder-webpack4@6.3.0-beta.1
│ └── UNMET PEER DEPENDENCY webpack@4.46.0
├─┬ @storybook/angular@6.3.0-beta.1
│ ├─┬ @storybook/core@6.3.0-beta.1
│ │ └─┬ @storybook/core-server@6.3.0-beta.1
│ │ ├─┬ @storybook/manager-webpack4@6.3.0-beta.1
│ │ │ └── UNMET PEER DEPENDENCY webpack@4.46.0
│ │ └── webpack@4.46.0
│ ├─┬ @storybook/core-common@6.3.0-beta.1
│ │ └── webpack@4.46.0
│ └── webpack@4.46.0
├─┬ @storybook/builder-webpack5@6.3.0-beta.1
│ └── webpack@5.36.2 deduped
└─┬ @storybook/manager-webpack5@6.3.0-beta.1
└── webpack@5.36.2 deduped
npm ERR! peer dep missing: webpack@^1 || ^2 || ^3 || ^4, required by dotenv-webpack@1.8.0
npm ERR! peer dep missing: webpack@^2.0.0 || ^3.0.0 || ^4.0.0, required by webpack-filter-warnings-plugin@1.2.1
npm ERR! peer dep missing: webpack@^1 || ^2 || ^3 || ^4, required by dotenv-webpack@1.8.0
In my case the webpack 4 dependencies seem to be causing issues with respect to angular 12, in particular after some npm update runs, serving and building does not work anymore. The fix is straight forward (remove package-lock.json and the node_modules folder and do a fresh npm install), yet it seems to be caused by a not required dependencys. It would be great if this dependency could be disabled or removed for projects building with webpack 5.
Did this on a brand new ng v12.0.2 project - npx sb@next init
Also got the manager preset issue mentioned above https://github.com/storybookjs/storybook/issues/14909#issuecomment-848523609
Checked my package.json and as you can see below the manager-webpack is incorrectly installed with the wrong version. Simply updating it to beta-1 fixes this particular issue (for me at least)
"@storybook/angular": "^6.3.0-beta.1",
"@storybook/builder-webpack5": "^6.3.0-beta.1",
"@storybook/manager-webpack5": "^6.3.0-alpha.37",
and my project builds successfully.
Unfortunately this warning still appears on a fresh build
WARNING in DefinePlugin
Conflicting values for 'process.env'
as well as those annoying "loose" option messages for babel
Describe
Angular 12 was released a few hours ago, release post, and it looks like Storybook isn't working with it out of the box for now.
When running
yarn storybook
, it throws the following error:To Reproduce
To bootstrap a fresh Angular 12 + Storybook 6.3 alpha just run
npx sb@next repro ./a_directory --framework angular --template angular
System
Additional context
Maybe also related to https://github.com/storybookjs/storybook/issues/14044#issuecomment-839110931?