Storybook 6.4 build failing with Angular 13.1 #16977
Comments
|
Same here. I was able to get it running by replacing all occurances of or in the original repo |
getTypescriptWorkerPlugin changed names to getDevServerConfig storybookjs#16977
|
This doesn't seem to be the only issue. I'm also stumbling upon the following error: Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before? |
- [x] make storybook build optional, it needs patching; see storybookjs/storybook#16977;
The same here |
Also experience the same issue. |
Same here! |
Same here |
|
Same problem here, |
|
Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.4 containing PR #17032 that references this issue. Upgrade today to the Closing this issue. Please re-open if you think there's still more to do. |
|
@shilman I updated to the 6.5.0-alpha.4 version and now I have another issue now that has already been reported a while ago (#14734) Do you know what could cause that issue? I have a standard configuration with only one addon: @storybook/addon-essentials Thanks for the help there! |
|
Still not working for me: |
getting this too |
Same here. After installing |
|
Any chance to provide this as a hotfix instead of the next 6.5.x release cycle? |
|
Also running into the same issue. |
|
Added more information here. |
|
@mleimer I'd be happy to patch back a fix once things have stabilized |
|
@joewIST i have fixed that issue just working with |
|
this is the nx library's entry in angular.json:
|
|
@shilman we are also getting the error |
|
Sorry @joewIST ..no NX on my project.
|
Yes this complies and runs sb for me. However I am applying some external/global styles to my components and this approach does not apply these styles like before. I'm in an Nx repo; I ran nx storybook my-lib --projectBuildConfig=my-lib:build-storybookThe following is the code I use for applying the global styles // `RepoRoot/.storybook/preview.js`
import '!style-loader!css-loader!sass-loader!./scss-loader.scss';// RepoRoot/.storybook/scss-loader.scss
@import "/libs/styles/src/lib/stylesheets/my-theme";<!--
RepoRoot/libs/my-lib/.storybook/preview-body.html
and `my-theme="dark"` is the hook for my global
-->
<html my-theme="dark"></html>these are my relevant versions: "devDependencies": {
...
"@nrwl/angular": "13.4.4",
"@nrwl/cli": "13.4.4",
"@nrwl/cypress": "13.4.4",
"@nrwl/eslint-plugin-nx": "13.4.4",
"@nrwl/jest": "13.4.4",
"@nrwl/linter": "13.4.4",
"@nrwl/nx-cloud": "13.0.2",
"@nrwl/storybook": "13.4.4",
"@nrwl/tao": "13.4.4",
"@nrwl/workspace": "13.4.4",
"@storybook/addon-actions": "~6.5.0-alpha.16",
"@storybook/addon-essentials": "~6.5.0-alpha.16",
"@storybook/addon-controls": "~6.5.0-alpha.16",
"@storybook/angular": "~6.5.0-alpha.16",
"@storybook/builder-webpack5": "~6.5.0-alpha.16",
"@storybook/manager-webpack5": "~6.5.0-alpha.16",
...
}macOs Monterey 12.1 |
|
@mandarini Thank you very much for that. Unfortunately, we run into a different issue with our stylesheets. We had to duplicate the |
|
¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.13 containing PR #17206 that references this issue. Upgrade today to the Closing this issue. Please re-open if you think there's still more to do. |
|
I still run into the same issue as before: File was processed with these loaders:
|
@joewIST It might be different webpack versions (angular-devkit and storybook). |
|
@rfprod i tried the above but still get the same error |
|
@mandarini yes i've already tried that, and besides i have the projectBuildConfig defined in my angular.json |
|
@joewIST can you post your package.json dependency versions (both dependencies and devDependencies)? Specifically, which PS: I tested the webpack version resolution fix on 4 projects (all of them are not new), and it works the same, i.e. it fixes the error. All 4 projects use the latest dependency versions. |
|
@rfprod here is my dependencies: "dependencies": { i have tried everything and still can't get storybook to work with the same error every time: ModuleParseError: Module parse failed: The keyword 'enum' is reserved (15:0)
|
|
@joewIST I would suggest not to use caret Give it a try in conjunction with the webpack resolution solution. Remove rm -rf node_modules/ yarn.lock && yarn install # if you use yarn
# or
rm -rf node_modules/ package-lock.json && npm i # if you use npmHere's what
Info source: https://indianceo.medium.com/caret-and-tilde-in-package-json-57f1cbbe347b If you remove all Also, doing something like this "@angular-devkit/build-angular": "13.1.3",
"@angular-devkit/core": "^13.1.3",seems incorrect to me. You tell npm to use fixed version of Check the semver parser for more details about referencing versions in const semver = require('semver')
semver.valid('1.2.3') // '1.2.3'
semver.valid('a.b.c') // null
semver.clean(' =v1.2.3 ') // '1.2.3'
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
semver.gt('1.2.3', '9.8.7') // false
semver.lt('1.2.3', '9.8.7') // true
semver.minVersion('>=1.0.0') // '1.0.0'
semver.valid(semver.coerce('v2')) // '2.0.0'
semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7' |
|
@rfprod thanks i will try that. tbh most of these versions were auto-generated by the nx migrate latest command so not sure what removing carets/tildes will do but will investigate. i've been desperately trying to upgrade to angular v.13 and these storybook issues are the only thing holding me back! UPDATE: I still get the same errors after updating package.json What "additional loader" might the error message be referring to? |
|
@joewIST first of, if you fix dependency version, I think nx will not add Regarding the loader, do you really need all that storybook dependencies listed in your Do you really need Also, What is in your root Another unrelated yet intriguing thing is why do you need |
|
Still see |
after stepping away for a week, I can now say that this issue can be resolved by performing the following:
that should ensure that only one version of webpack@5 is installed and used across all dependencies, you can verify that by rerunning npm ls webpack you're looking to make sure every instance is deduped |
|
is there a separate issue # for the problems with HMR experienced by a few folks? |
|
@spaceribs there is an issue I opened and have a work around for: nrwl/nx#8484 (comment) |
|
New docs for |
Forced Webpack v5.74.0 version due to Storybook webpack incompatibilities. storybookjs/storybook#16977 (comment) nrwl/nx#8538 (comment)
and others
Describe the bug
Angular 13.1 was released yesterday, however when trying to build Storybook 6.4 with Angular 13.1, there is an error thrown:
To Reproduce
Basically you just need to run
npx sb@next reproand select angular. It's already broken then.https://github.com/dsimon-onventis/sb-angular13.1
System
Environment Info:
System:
OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
Yarn: 3.1.1 - /usr/bin/yarn
npm: 8.2.0 - ~/.npm-global/bin/npm
Browsers:
Chrome: 96.0.4664.93
npmPackages:
@storybook/addon-actions: ^6.4.9 => 6.4.9
@storybook/addon-docs: ^6.4.9 => 6.4.9
@storybook/addon-essentials: ^6.4.9 => 6.4.9
@storybook/addon-links: ^6.4.9 => 6.4.9
@storybook/angular: ^6.4.9 => 6.4.9
@storybook/builder-webpack5: ^6.4.9 => 6.4.9
@storybook/manager-webpack5: ^6.4.9 => 6.4.9
The text was updated successfully, but these errors were encountered: