Storybook 6.4 build failing with Angular 13.1

dkimmich-onventis commented 2 years ago

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:

ERR! TypeError: getTypescriptWorkerPlugin is not a function
ERR!     at /sb-angular13.1-repro/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-13.x.x.js:79:206
ERR!     at /sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
ERR!     at generateWebpackConfig (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
ERR!     at async generateBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
ERR!     at async generateI18nBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)
ERR!  TypeError: getTypescriptWorkerPlugin is not a function
ERR!     at /sb-angular13.1-repro/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-13.x.x.js:79:206
ERR!     at /sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
ERR!     at generateWebpackConfig (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
ERR!     at async generateBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
ERR!     at async generateI18nBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)

To Reproduce Basically you just need to run npx sb@next repro and 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

leon commented 2 years ago

Same here. The problem is that in angular 13.1 the function getTypescriptWorkerPlugin changed names to getDevServerConfig

I was able to get it running by replacing all occurances of getTypescriptWorkerPlugin in the file

node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-13.x.x.js

or in the original repo https://github.com/storybookjs/storybook/blob/585abdd45c492a69a4e61f11fa9019cd95b94599/app/angular/src/server/angular-cli-webpack-13.x.x.js#L8

DonnyVerduijn commented 2 years ago

This doesn't seem to be the only issue. I'm also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before?

danielritter commented 2 years ago

This doesn't seem to be the only issue. I'm also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before?

The same here

danielbater commented 2 years ago

This doesn't seem to be the only issue. I'm also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before?

Also experience the same issue.

Biaapoletto commented 2 years ago

This doesn't seem to be the only issue. I'm also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before?

Also experience the same issue.

Same here!

joewIST commented 2 years ago

This doesn't seem to be the only issue. I'm also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before?

Also experience the same issue.

Same here!

Same here

mandarini commented 2 years ago

Same problem here, TypeError: getTypescriptWorkerPlugin is not a function :(

@angular/core: 13.1.1
@storybook/angular: 6.4.9

shilman commented 2 years ago

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

vincentpalita commented 2 years ago

@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 (https://github.com/storybookjs/storybook/issues/14734)

Do you know what could cause that issue? I have a standard configuration with only one addon: @storybook/addon-essentials Also I am using @nrwl/storybook to serve/build. It was running well before upgrading to angular 13.1 (with angular 13.0.1).

Thanks for the help there!

Starting type checking service...
/Users/vincent/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141
                        throw new TypeError(
         ^
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/vincent/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/Users/vincent/frontend/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)
    at /Users/vincent/frontend/node_modules/webpack/lib/SourceMapDevToolPlugin.js:163:53
    at Hook.eval (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:297:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1055:26)
    at /Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

jasonbyrne commented 2 years ago

Still not working for me: Error: node_modules/@types/webpack/index.d.ts:1115:33 - error TS2707: Generic type 'SyncBailHook<T, R, AdditionalOptions>' requires between 2 and 3 type arguments.

mauiworketc commented 2 years ago

@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 Also I am using @nrwl/storybook to serve/build. It was running well before upgrading to angular 13.1 (with angular 13.0.1).

Thanks for the help there!

Starting type checking service...
/Users/vincent/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141
                        throw new TypeError(
         ^
TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/vincent/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/Users/vincent/frontend/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)
    at /Users/vincent/frontend/node_modules/webpack/lib/SourceMapDevToolPlugin.js:163:53
    at Hook.eval (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:297:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1055:26)
    at /Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/Users/vincent/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

getting this too

unitario commented 2 years ago

This doesn't seem to be the only issue. I'm also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before?

Also experience the same issue.

Same here!

Same here

Same here. After installing 6.5.0-alpha.4.

danielbater commented 2 years ago

@shilman Unfortunately still an issue please consider re-opening. More comments of mine can be found here.

mleimer commented 2 years ago

Any chance to provide this as a hotfix instead of the next 6.5.x release cycle? When using 6.5.0-alpha.4 I also experience the same issue as @DonnyVerduijn

snowfrogdev commented 2 years ago

Also running into the same issue.

danielbater commented 2 years ago

Added more information here.

shilman commented 2 years ago

@mleimer I'd be happy to patch back a fix once things have stabilized

TheDevelolper commented 2 years ago

Also having problems when updating to alpha:

Please make sure it is in your tsconfig via the 'files' or 'include' property.

I managed to fix this by modifying some build config but then I had an whole load of other runtime template issues. I'd comment out stuff only to find more and more problems.

rida-el commented 2 years ago

Hey @FacePalmDev, I got into the same issue as yours. Did you manage to fix it yet?

TheDevelolper commented 2 years ago

Hey @FacePalmDev, I got into the same issue as yours. Did you manage to fix it yet?

Unfortunately not... I had to move on as I spent 2 days trying to get it working.

Darrenbydesign commented 2 years ago

This doesn't seem to be the only issue. I'm also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before?

I too am running into this issue... Has this been looked at?

TheDevelolper commented 2 years ago

This doesn't seem to be the only issue. I'm also stumbling upon the following error:

Error: /home/donny/angular-test-app/my-app/src/app/stories/Button.stories.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:26
    at processResult (/home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/donny/angular-test-app/my-app/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/donny/angular-test-app/my-app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /home/donny/angular-test-app/my-app/node_modules/@ngtools/webpack/src/ivy/loader.js:60:17

Searched for equivalent errors, but couldn't find anything related, so i assume this problem has not existed before?

I too am running into this issue... Has this been looked at?

This is exactly the problem I'm having. I'm glad that I'm not the only one.

rfprod commented 2 years ago

Stories should be added to the storybook tsconfig. For example:

But it did not work with alpha for me yet. Jit compiler complained that it could not have parsed component templates correctly.

SebastianPodgajny commented 2 years ago

@rfprod You need to remove html raw-loader rule in webpack config

ld210 commented 2 years ago

We got the same error ERR! TypeError: getTypescriptWorkerPlugin is not a function after updating Angular 13.1.1 and Storybook 6.4.9.

KirillMetrik commented 2 years ago

But it did not work with alpha for me yet. Jit compiler complained that it could not have parsed component templates correctly.

Same here - after fixing getTypescriptWorkerPlugin problem (by upgrading to 6.5.0-alpha4) Storybook iframe.html now throws "Errors during JIT compilation of template for : Unexpected character "EOF"" on all of my stories (worked fine on 6.3.0). @rfprod did you manage to fix this? Going back to 6.3.0 is not an option for me, since we're using NX with Angular and are trying to upgrade the whole environment to Angular 13 using Nrwl tools.

haoolii commented 2 years ago

We got the same error ERR! why storybook is so hard to use.

rfprod commented 2 years ago

@rfprod You need to remove html raw-loader rule in webpack config

@SebastianPodgajny perfect, it works. Thank you very much for saving some time for me.

Same here - after fixing getTypescriptWorkerPlugin problem (by upgrading to 6.5.0-alpha4) Storybook iframe.html now throws "Errors during JIT compilation of template for : Unexpected character "EOF"" on all of my stories (worked fine on 6.3.0). @rfprod did you manage to fix this? Going back to 6.3.0 is not an option for me, since we're using NX with Angular and are trying to upgrade the whole environment to Angular 13 using Nrwl tools.

@KirillMetrik check this

https://github.com/rfprod/nx-ng-starter/blob/main/.storybook/main.js#L42-L59 - webpack config tweak
https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1192-L1207 - build storybook
https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1232-L1247 - serve storybook
https://nx-ng-starter-documentation.web.app/assets/storybook/index.html - deployed storybook

stefan-schweiger commented 2 years ago

@shilman Updating to 6.5.0-alpha7 and using @SebastianPodgajny code did eventually do the trick. But for whatever reason I also had to fix my tsconfig, because it was complaining about not being able to find polyfill.ts and hotreload is broken. So I would still much rather have a fix in 6.4 :/

qortex commented 2 years ago

Updating to 6.5.0-alpha7 and using @SebastianPodgajny code did eventually do the trick. But for whatever reason I also had to fix my tsconfig, because it was complaining about not being able to find polyfill.ts and hotreload is broken. So I would still much rather have a fix in 6.4 :/

Ah got the polyfill.ts thing too. What fix did you do to your tsconfig? On my part, I added the folder of the buildable app used for storybook.

Didn't get it to work yet (because of the template thing) so can't say about hotreload, sad though :/

stefan-schweiger commented 2 years ago

@qortex my solution was to add "../../../../../apps/<default-app>/src/*.ts", to the includes of the storybook tsconfig file.

fasidOnGit commented 2 years ago

for the polyfills.ts. I had to add it (the polyfills.ts file) to the files array in tsconfig under .storybook

# libs/mylib/.storybook/tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true
  },
  "exclude": ["../**/*.spec.ts", "../**/*.test.ts"],
  "include": ["../src/**/*"],
  "files": ["../../apps/myapp/src/polyfills.ts"]
}

files or includes both works :+1:

ld210 commented 2 years ago

@shilman Updating to 6.5.0-alpha7 and using @SebastianPodgajny code did eventually do the trick. But for whatever reason I also had to fix my tsconfig, because it was complaining about not being able to find polyfill.ts and hotreload is broken. So I would still much rather have a fix in 6.4 :/

Agree. It's a lot of little tricks here and there to fix this issue. I'd rather have a real fix in 6.4, one of those little tricks may cause issues later, and i don't want to spend energy on tracking them.

stefan-schweiger commented 2 years ago

Is the polyfill.ts a generell issue of 6.5 or only because of the other workaround? If the former there should be an additional issue for this as well.

fasidOnGit commented 2 years ago

Once I fix the polyfills.ts, I am presented with "Errors during JIT compilation of template for <component_name>: Unexpected character "EOF"" errors once I run the storybook server.

stefan-schweiger commented 2 years ago

@fasidOnGit did you already try to add the code mentioned here in your main.js file?

fasidOnGit commented 2 years ago

@stefan-schweiger I guess I missed the webpack tweak part. let me try it :+1: Thanks.

fasidOnGit commented 2 years ago

@stefan-schweiger Cool. that fixed it. But, the live reloading is gone.

vincentpalita commented 2 years ago

I confirm that the trick that @rfprod gave for JIT works well! Thank you.

For the problem I related a few weeks ago in this current issue here: https://github.com/storybookjs/storybook/issues/16977#issuecomment-997271294 I was able to make it work, thanks to this message: https://github.com/angular/angular-cli/issues/20773#issuecomment-856152119

I added in our package.json file the following resolution:

"resolutions": {
    "webpack": "^5.65.0"
  },

I hope this can help anyone, in particular @mauiworketc who was experiencing the same issue!

rfprod commented 2 years ago

@vincentpalita seems like this might have helped as well. Sorry, I missed your previous comment.

https://github.com/rfprod/nx-ng-starter/blob/main/package.json#L302 - "webpack": "5.65.0",
https://github.com/rfprod/nx-ng-starter/blob/main/package.json#L231 - "@storybook/builder-webpack5": "v6.5.0-alpha.6",
https://github.com/rfprod/nx-ng-starter/blob/main/package.json#L232 - "@storybook/manager-webpack5": "v6.5.0-alpha.6",
https://github.com/rfprod/nx-ng-starter/blob/main/.storybook/main.js#L4-L6 - use webpack5

vincentpalita commented 2 years ago

@rfprod well I already had that config ;) but without the resolutions for webpack it will give me the error about "TypeError: The 'compilation' argument must be an instance of Compilation".

Thanks anyway!

AnthonyLenglet commented 2 years ago

Hey ! thanks for all the answers in the thread, they actually helped a lot with the problem so far 😄

on our end, the only errors that seems to be left is the core-js module that isn't being found

Module not found: Error: Can't resolve 'core-js/proposals/reflect-metadata'

the only part where this import is a thing is in node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-polyfills.d.ts (and in the js file via a require call)

/** *************************************************************************************************
 * BROWSER POLYFILLS
 */
/** IE9, IE10 and IE11 requires all of the following polyfills. * */
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
/** Evergreen browsers require these. * */
import 'core-js/es/reflect';
import 'core-js/proposals/reflect-metadata';

it looks like it is looking for those in our node_modules folder (which has core-js, but without those files), rather than the one in @storybook/angular itself (which does have them)

the other is a failing react import

Error: node_modules/@storybook/angular/node_modules/@storybook/api/dist/ts3.9/lib/stories.d.ts:1:8 - error TS1259: Module '"node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

import React from 'react';

looks like this one will be easier to fix, but I'm not sure why it wasn't an issue in storybook 6.4, is there a missing tsconfig somewhere in storybook ?

KirillMetrik commented 2 years ago

@AnthonyLenglet I've had this problem as well. For us the reason was that we had an exact version of core-js defined in dependencies in package.json. I have removed this explicit dependency, then cleaned node_modules, removed package-lock.json and did npm install again. After that the problem was gone.

spaceribs commented 2 years ago

@rfprod well I already had that config ;) but without the resolutions for webpack it will give me the error about "TypeError: The 'compilation' argument must be an instance of Compilation".

Thanks anyway!

Same issue here, removed the hard dependency and applied all other tweaks linked by @rfprod. Full error output below:

info => Using angular project with "tsConfig:/redacted/apps/storybook/.storybook/tsconfig.json"
info => Using default Webpack5 setup
Starting type checking service...
(node:98448) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/redacted/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10)
    at SourceMapDevToolModuleOptionsPlugin.apply (/redacted/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolModuleOptionsPlugin.js:50:27)
    at /redacted/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/SourceMapDevToolPlugin.js:163:53
    at Hook.eval [as call] (eval at create (/redacted/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:151:1)
    at Hook.CALL_DELEGATE [as _call] (/redacted/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/redacted/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1055:26)
    at /redacted/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1099:29
    at eval (eval at create (/redacted/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
(node:98448) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:98448) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

AnthonyLenglet commented 2 years ago

@AnthonyLenglet I've had this problem as well. For us the reason was that we had an exact version of core-js defined in dependencies in package.json. I have removed this explicit dependency, then cleaned node_modules, removed package-lock.json and did npm install again. After that the problem was gone.

that actually did the trick after like 2 or 3 tries, that was really weird, probably a side effect of updating angular via nx migrate earlier today

thanks a ton !

rfprod commented 2 years ago

FIY, I noticed weird behavior after updating workspace dependencies quite some time ago, but I haven't thought about that in the given context. And I think it does not necessarily relate to using nx migrate. Sometimes I use ncu when there are no migrations. And I use yarn instead of npm to install dependencies. I noticed that removing node_modules and yarn.lock solves these weird issues with dependencies resolution.

shilman commented 2 years ago

All, thanks for your patience sorting this out. The plan is to get things working in 6.5 and then patch back the final solution to 6.4 once it's all debugged. In the future we'll try to get a CI setup that tests prerelease versions of Angular (and the other frameworks we support) so that we catch these earlier and not during the middle of Christmas vacation.

meriturva commented 2 years ago

I'm just updating here results after moving to version 6.5.0-alpha.10:

with version 6.5.0-alpha.7 and the new angular.json project approach described here https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#64-angular-changes :

everithing compile correctly
no live reload/watch enabled

Now with version 6.5.0-alpha.10:

A lot of errors log:

ModuleParseError: Module parse failed: Unexpected character '@' (3:0)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
| import { NgModule } from '@angular/core';
| 
> @NgModule({})
| export class BinaryResourcesModule {}
| 
    at handleParseError (xxx\node_modules\webpack\lib\NormalModule.js:969:19)
    at xxx\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (xxx\node_modules\webpack\lib\NormalModule.js:793:11)
    at xxx\node_modules\webpack\lib\NormalModule.js:853:5
    at xxx\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (xxx\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (xxx\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at xxx\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (xxx\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at xxx\node_modules\babel-loader\lib\index.js:59:71

EDIT: same errors with version 6.5.0-alpha.12.

flashart92 commented 2 years ago

Now with version 6.5.0-alpha.12: A lot of errors log:

File was processed with these loaders:
 * ../../../node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
| // The list of file replacements can be found in `angular.json`.
|
> export const environment: {
|     production: boolean;
| } = {
    at handleParseError (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:969:19)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:793:11)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:853:5
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\PROJ\service-front\service-front\node_modules\babel-loader\lib\index.js:59:71
ModuleParseError: Module parse failed: Unexpected token (2:37)
File was processed with these loaders:
 * ../../../node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
|
> export const MULTILANGUAGE_README = (): any => {
|     try {
|         return require('@abanking/base-multi-language/common/README.md');
    at handleParseError (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:969:19)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:1088:5
    at processResult (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:793:11)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\webpack\lib\NormalModule.js:853:5
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:406:3
    at iterateNormalLoaders (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:232:10)
    at iterateNormalLoaders (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:239:10)
    at D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:254:3
    at context.callback (D:\PROJ\service-front\service-front\apps\storybook\browser\node_modules\@storybook\builder-webpack5\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\PROJ\service-front\service-front\node_modules\babel-loader\lib\index.js:59:71

sir-captainmorgan21 commented 2 years ago

Getting the same error as the original issue, even after upgrading to @storybook/angular 6.4.10. Whats the word on this guy? It is basically stopping us from moving forward, and I want to avoid all the little tweaks and workarounds people have suggested. @shilman thanks for tackling this!

storybookjs / storybook

Storybook 6.4 build failing with Angular 13.1 #16977