search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.66k stars 9.32k forks source link

Angular 12 Support #14909

Closed gaetanmaisse closed 3 years ago

gaetanmaisse commented 3 years ago

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:

info @storybook/angular v6.3.0-alpha.25
info
info => Loading presets
info => Loading 1 config file in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook"
info => Loading 7 other files in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook"
info => Adding stories defined in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook/main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Cleared cached manager config
ℹ ｢wdm｣: wait until bundle finished:
info => Loading angular-cli config
info => Using angular project "angular" 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 Object.webpack [as get] (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR!     at async buildDevStandalone (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR!     at async Object.buildDev (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150: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 Object.webpack [as get] (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR!     at async buildDevStandalone (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR!     at async Object.buildDev (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

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

  System:
    OS: macOS 11.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    Yarn: 2.4.1 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-docs: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-essentials: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-links: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/angular: ^6.3.0-alpha.25 => 6.3.0-alpha.25

    @angular-devkit/build-angular: ~12.0.0
    @angular/cli: ~12.0.0
    @angular/compiler-cli: ~12.0.0

Additional context

Maybe also related to https://github.com/storybookjs/storybook/issues/14044#issuecomment-839110931?

shilman commented 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.
bebraw commented 3 years ago

Here's what I did:

  1. npx sb@next repro angular-demo --framework angular --template angular
  2. npx sb@next init --builder webpack5 within the angular-demo directory that was created
  3. yarn 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.

shilman commented 3 years ago

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:

I'm not sure this will handle all the cases, but at least it handles one. @ThibaudAV @bebraw @ndelangen WDYT?

bebraw commented 3 years ago

@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.

shilman commented 3 years ago

@bebraw Yeah I think those are optional dependencies but the behavior changed in yarn 2. Thanks for taking a look at this!! 🙏

ThibaudAV commented 3 years ago

arf

ThibaudAV commented 3 years ago

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)

literalpie commented 3 years ago

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. image 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

bebraw commented 3 years ago

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.

shilman commented 3 years ago

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.

eugene-stativka commented 3 years ago

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.

shilman commented 3 years ago

Can you please create a reproduction with npx sb@next repro and link me to result and I'll take a look?

MickL commented 3 years ago

@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

shilman commented 3 years ago

Did you read the MIGRATION instructions?

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-12-upgrade

MickL commented 3 years ago

I did not read that. Still I get the same error :/

eugene-stativka commented 3 years ago

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.

shilman commented 3 years ago

@ThibaudAV does this mean anything to you? ☝️

shilman commented 3 years ago

@eugene-stativka are you using nx?

eugene-stativka commented 3 years ago

@eugene-stativka are you using nx?

no. Just official @angular/cli

eugene-stativka commented 3 years ago

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
shilman commented 3 years ago

@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 commented 3 years ago

@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?

MacOS, Node 14, latest @angular/cli. I will try once again on another laptop.

eugene-stativka commented 3 years ago

@shilman I've just tried on another Mac (Node 14, npm7, latest @angular/cli) and I received the same error as before. The repo is here

MickL commented 3 years ago

@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.

eugene-stativka commented 3 years ago

@MickL I used npm, not yarn. Do you think it can cause the problem?

MickL commented 3 years ago

@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:

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',
  },
}
kirjai commented 3 years ago

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

literalpie commented 3 years ago

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.

eugene-stativka commented 3 years ago

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.

simonljus commented 3 years ago

@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

MickL commented 3 years ago

Thanks! But why is it not working? For Angular this seems valid because Angular is working and ng update didnt change that option.

eugene-stativka commented 3 years ago

@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?

MickL commented 3 years ago

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

sasteigerwald commented 3 years ago

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",

ThibaudAV commented 3 years ago

@MickL I'm going to open a PR to fix "optimization". Could you test if it fixes the problem ?

MickL commented 3 years ago

Yes ofcourse, just tell me how. Do I need to build or is it alpha 43?

shilman commented 3 years ago

@MickL should be released in alpha.43

npx sb@next upgrade --prerelease
eugene-stativka commented 3 years ago

@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-storybookworks fine. This ^ error happens only during start-storybook

shilman commented 3 years ago

@eugene-stativka that looks like it could be a bug in source-loader. Try disabling addon-docs or addon-storysource

MickL commented 3 years ago

@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?

shilman commented 3 years ago

@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

sasteigerwald commented 3 years ago

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?

aubrimcmann commented 3 years ago

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?

jigfox commented 3 years ago

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)
rp3e11 commented 3 years ago

@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 commented 3 years ago

@eugene-stativka that looks like it could be a bug in source-loader. Try disabling addon-docs or addon-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.

Splaktar commented 3 years ago

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.

Splaktar commented 3 years ago

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
rp3e11 commented 3 years ago

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.

dexster commented 3 years ago

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