Closed meriturva closed 3 years ago
I have just build a static storybook from a new angular 12.0.4 project and storybook 6.3.0-rc.5 finding same issue. Build project is blocked after generating all files necessary. Investigating a little bit i have found that:
due to the fact that buildStatic
is an async function:
https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/build.ts#L4
I guess that you have to wait for his competition or (because it is basically a main) i guess you could just add a process.exit(0)
here:
https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/build-static.ts#L136
@shilman have you never tried to build static storybook with 6.3.0-rc.5 version and angular v12?
@meriturva alternate approach is the process.exit in angular/dist/ts3.9/server/build.js, I do this as npm post install script to keep our Jenkins Pipeline running
sed -i 's/server_1.buildStatic(options_1.default);/server_1.buildStatic(options_1.default).then(function(){process.exit(0)});/g' node_modules/@storybook/angular/dist/ts3.9/server/build.js
Thanks @rschulz-scisys, actually we have also this kind of approach on our Teamcity build pipeline but I think it is an issue to fix quite soon. I'm going to test rc7 in minutes.
Edit: same issue on v6.3.0-rc.7
I just test all RC now π and same issue on v6.3.0-rc.8 Sorry if I'm quite annoying but I think the issue has to be fixed quite soon.
@meriturva are you able to submit a PR to fix it?
Thanks, @shilman for your request, actually my proposal is just to add a process.exit(0) on file: https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/build-static.ts#L136 I could easily arrange a PR but I really don't know why it is necessary, secondly... is that issue present also on other frameworks, for example, react or vue?
I work actively in Angular and I never used storybook on Vue or React
I've never heard of this issue until now. Perhaps it has something to do with the recent Angular12 changes, or the recent Storybook changes for Angular (e.g. Ivy support). Creating a repro or a PR is the best way to help get an issue fixed.
I have tested right now a static generation with vue and process exit correctly.
How to reproduce the issue with Angular.... quite simple:
I have made other tests creating new projects based on the latest angular cli version (v12.0.4) and I found that the build issue is related to SCSS. Creating a new project just with CSS support storybook build static process exit correctly.
I have investigated a little bit mode using a simple lib named: why-is-node-running
So I have just modified https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/build-static.ts#L136 with:
try {
await buildStaticStandalone(_objectSpread(_objectSpread(_objectSpread({}, cliOptions), loadOptions), {}, {
packageJson: packageJson,
configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
outputDir: loadOptions.outputDir || cliOptions.outputDir || './storybook-static',
ignorePreview: (!!loadOptions.ignorePreview || !!cliOptions.previewUrl) && !cliOptions.forceBuildPreview,
docsMode: !!cliOptions.docs,
configType: 'PRODUCTION',
cache: _coreCommon.cache
}));
log() // logs out active handles that are keeping node running
} catch (e) {
_nodeLogger.logger.error(e);
process.exit(1);
}
Note the log call of lib why-is-node-running
And I have few logs about whats going on, what I found is a sass worker active:
# WORKER
D:\Projects\xxx\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:104 - const worker = new worker_threads_1.Worker(workerPath, {
D:\Projects\xxx\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:70 - this.workers.push(this.createWorker());
D:\Projects\xxx\node_modules\sass-loader\dist\index.js:46 - render(sassOptions, (error, result) => {
Now I'm looking for a specific use of angular integration on package @storybook/angular
but I really don't have so much time to spend on it right now.
I found that angular sass service has already a close method to terminate and it is linked to webpack compiler hooks:
so I guess storybook for angular doesn't shutdown correctly webpack compiler? I'm just guessing!
@meriturva Just brainstorming, could it be a webpack4/webpack5 issue? Maybe something in @nrwl/angular
, @nrwl/storybook
, @storybook/angular
that's not making the right close call for webpack5?
@JSMike I'm not a webpack expert but I think that it is something related to @storybook/angular package. Sadly I have no time to investigate more and tomorrow we are going just to force process.exit on our continuous integration pipeline.
We have prepared (and attached) a simple patch using library patch-package
https://www.npmjs.com/package/patch-package
Now our build pipeline exit correctly, but I repeat: force a process.exit
is not the correct solution. It is important to know why angular workers (scss worker for sure) are not terminated correctly.
Reproduction: https://github.com/hoffination/storybook-timeout-repro
@shilman : to reproduce even easier just:
TLDR; Workaround: downgrade to Angular 12.0.3.
After some investigation, it looks like Storybook RC is working fine when using angular/*@12.0.3
but stop completing as soon as we are using angular/*@12.0.4
. There is not a lot of changes in the 12.0.4 release, see https://github.com/angular/angular/releases/tag/12.0.4 + https://github.com/angular/angular-cli/releases/tag/v12.0.4, but I didn't found anything obvious for now.
Edit: Narrowed to @angular-devkit/build-angular@12.0.4
, and maybe https://github.com/angular/angular-cli/pull/21045?
Great catch @gaetanmaisse ! i was looking for a commit on @storybook/angular
package but the change was on @angular-devkit/build-angular
. Happy to know that it is related to scss worker as I suspected before.
Anyway patching with process.exit
works like a charm on our CI infrastructure even with angular 12.0.4 version.
I finally had the time to test. and I agree with you I think that is exactly this change https://github.com/angular/angular-cli/commit/1dd5c28f8d32e382d271a3da2bed25f16e88153a#diff-6f1d85ee071c6e16d742bed5b1c832894a14dc4c9452f0bd6b95e3b61e5d1b17L210
I think we should open an angular-cli issue to ask their opinion? or comment on this PR https://github.com/angular/angular-cli/pull/21045
maybe the close
method should be called but it is not the case π€·ββοΈ
And the compiler.hooks.shutdown
is not called. webpack does not seem to want to close properly
My workaround for not down leveling Angular is using patch-package and following patch:
diff --git a/node_modules/@storybook/core-server/dist/cjs/build-static.js b/node_modules/@storybook/core-server/dist/cjs/build-static.js
index 7342586..78fc918 100644
--- a/node_modules/@storybook/core-server/dist/cjs/build-static.js
+++ b/node_modules/@storybook/core-server/dist/cjs/build-static.js
@@ -167,6 +167,8 @@ async function buildStatic(_ref2) {
configType: 'PRODUCTION',
cache: _coreCommon.cache
}));
+
+ process.exit(0);
} catch (e) {
_nodeLogger.logger.error(e);
We have the same issue here, with Angular 12.1 Downgrading Angular is not option for us, so we had to remove Storybook from our CI until resolution.
@ld210 you have to patch storybook until issue is not fixed. See; https://github.com/storybookjs/storybook/issues/15227#issuecomment-865655700
FYI, I had to rebuild my NX project (due to other reasons) and I'm no longer experiencing this issue. (Although I had to downgrade to nx 12.3.6 to resolve other build errors), but I'm on Angular 12.1.x without hanging on build, using builder @nrwl/storybook:storybook
Any plan to fix this?
I open an issue @angular/cli, feel free to contribute there also : https://github.com/angular/angular-cli/issues/21261 Someone made an interesting point.
Thanks guys. Bringing in the big guns (@bebraw) to see if we can fix it on the Storybook side!
I have an initial fix to test at https://github.com/storybookjs/storybook/pull/15483 . I added a bit of error handling + process.exit
after the process completes.
My feeling is that it shouldn't be needed, though, and it's possible there's some other process that's left running as the build function clearly completes. Can this be something on Angular side? During my testing, ngcc
was left in a weird state and I noticed that only after adding a try
/catch
. In any case, there's a fix now but it's possible a better fix exists.
from Angular guys
From an initial review of the storybook code, it appears that the storybook Webpack 5 integration code does not call the Webpack 5 compiler's close method (https://webpack.js.org/api/node/#run). This is most likely the cause of the shutdown hook not running. This also has the potential to lead to Webpack cache corruption (assuming Webpack 5 file caching is enabled) as the cache may not be shutdown properly.
https://github.com/angular/angular-cli/issues/21261#issuecomment-875153057
@Jispry Thanks, I tested that over process.exit
and it's definitely a better fix and it explains the behavior. I've adjusted #15483 accordingly to test.
Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.12 containing PR #15483 that references this issue. Upgrade today to the @next
NPM tag to try it out!
npx sb upgrade --prerelease
Will this fix be available in 6.3.2 ?
Will this fix be available in 6.3.2 ?
Once a few of you confirm it's working well, I'll patch it back to 6.3.x.
Once a few of you confirm it's working well, I'll patch it back to 6.3.x.
confirmed, it works
Will this fix be available in 6.3.2 ?
Once a few of you confirm it's working well, I'll patch it back to 6.3.x.
Confirmed, installing the prerelease resolved the issue
Will this fix be available in 6.3.2 ?
Once a few of you confirm it's working well, I'll patch it back to 6.3.x.
Confirmed again, the prerelease fixed the issue for us. π
I also confirm that it works for me in version 6.4.0-alpha.12
info => Output directory: C:\ixxi\hopenTicket\ticketing-lib-ui\storybook-static Done in 99.38s.
and after getting back to shell π
woohoo!! gonna patch this back to 6.3 now. thanks everybody π
Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.3 containing PR #15483 that references this issue. Upgrade today to the @latest
NPM tag to try it out!
npx sb upgrade
We have quite a big project here (Angular v12) and with Storybook 6.3.0-rc.4 we have a blocking issue for our CI system.
Running:
build-storybook -o dist/storybook --loglevel verbose
we see log output with no errors:Actually, we find storybook build on the output directory but the main process doesn't complete. The build process still running with 0 CPU consumption(our CI cannot complete correctly). We have enabled build-storybook with log verbose and webpack debug flag without seeing any errors.