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.65k stars 9.32k forks source link

Storybook 6.4 build failing with Angular 13.1 #16977

Closed dkimmich-onventis closed 2 years ago

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

haoolii commented 2 years ago

hot reload problem still exist.

AnthonyLenglet commented 2 years ago

on the contrary, as of alpha 12, I haven't had any issue, if anything, the workaround for removing the html loader in the webpack config under angular + nx isn't needed anymore

stefan-schweiger commented 2 years ago

With 6.5.0-alpha.12 I don't need the webpack html-loader workaround anymore. But I still need to add polyfill.ts to my tsconfig.json manually and hot reload also does not work. So I'm still hestiant to update my project to Angular 13.1.

AnthonyLenglet commented 2 years ago

hot reload also does not work. So I'm still hestiant to update my project to Angular 13.1.

this fix is for nx, but it should have some similarities, watch mode needs to be enabled in the build configuration in angular.json

        "build": {
          ...
          "configurations": {
            ...
            "storybook": {
              "watch": true
            }
          },
          ...
        },
        "storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            ...
            "projectBuildConfig": "ppyarns-store:build:storybook"
          }
        },
spaceribs commented 2 years ago

Adding some additional notes here as I try to plow my way towards a working ng13/storybook6.5/nx13:

  1. I needed to update my storybook tsconfig.json to add the story files in my library folders: 
    "include": [
  "../src/**/*",
+ "../../../libs/component/**/*.stories.ts",
+ "../../../libs/directive/**/*.stories.ts",
+ "../../../libs/resource/**/*.stories.ts",
+ "../../../libs/service/**/*.stories.ts"
]
  2. I upgraded to 6.5.0-alpha.13
  3. I removed the html raw-loader tweak suggested above.
  4. I needed to upgrade to node v14, node v12 emits an OOM error for me.
  5. I installed webpack@^5.65.0
  6. I had to remove an empty style declaration as post-css fails to process empty strings: 
     @Component({
   selector: 'my-info-bubble',
   templateUrl: './info-bubble.component.html',
-  styles: [''],
+  styles: [],
})
  7. I had various new typescript errors that required fixing before storybook would compile.

The local server is working, I have noticed that switching from a component which implements a component level subscription throws the following error: TypeError: this.subs.unsubscribe is not a function but that seems like a different bug outside the scope of this issue. I'm also confirming that HMR seems broken as well.

EDIT: Forgot the most important part, at least for me:

  1. Go to /node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:141:10
  2. Comment out all of the following: 
    if (!(compilation instanceof Compilation)) {
  throw new TypeError(
    "The 'compilation' argument must be an instance of Compilation"
  );
}

This appears to be due to the Compilation class being constructed from a different node_module dependency, here's my npm ls webpack:

$ npm ls webpack
├─┬ @angular-devkit/build-angular@13.1.2
│ └── webpack@5.65.0 
├─┬ @nrwl/node@13.4.1
│ └── webpack@5.65.0 
├─┬ @storybook/addon-controls@6.5.0-alpha.13
│ └─┬ @storybook/core-common@6.5.0-alpha.13
│   └── webpack@4.46.0 
├─┬ @storybook/addon-docs@6.5.0-alpha.13
│ ├─┬ @storybook/builder-webpack4@6.5.0-alpha.13
│ │ └── UNMET PEER DEPENDENCY webpack@4.46.0 
│ └─┬ @storybook/core@6.5.0-alpha.13
│   └─┬ @storybook/core-server@6.5.0-alpha.13
│     ├─┬ @storybook/manager-webpack4@6.5.0-alpha.13
│     │ └── webpack@4.46.0 
│     └── webpack@4.46.0 
├─┬ UNMET PEER DEPENDENCY @storybook/angular@6.5.0-alpha.13
│ └── webpack@4.46.0 
├─┬ @storybook/builder-webpack5@6.5.0-alpha.13
│ └── webpack@5.65.0 
├─┬ @storybook/manager-webpack5@6.5.0-alpha.13
│ └── webpack@5.65.0 
├─┬ react-mermaid2@0.1.4
│ └─┬ react-scripts@3.3.0
│   └── UNMET PEER DEPENDENCY webpack@4.41.2 
└── webpack@5.65.0
haoolii commented 2 years ago

"configurations": { ... "storybook": { "watch": true

I want to use storybook in libs, how could i set this configuartion. could you paste all configuation ? thanks

AnthonyLenglet commented 2 years ago

I want to use storybook in libs, how could i set this configuartion. could you paste all configuation ? thanks

the other configurations are the ones set by angular by default, I'm just adding a new one called "storybook"

            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "apps/<project>/src/environments/environment.ts",
                  "with": "apps/<project>/src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
haoolii commented 2 years ago

I want to use storybook in libs, how could i set this configuartion. could you paste all configuation ? thanks

the other configurations are the ones set by angular by default, I'm just adding a new one called "storybook"

          "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "apps/<project>/src/environments/environment.ts",
                  "with": "apps/<project>/src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },

oh i thought i still don't know how to do, could you upload project to github ? I want to refer to. thanks a lot :)

AnthonyLenglet commented 2 years ago

oh i thought i still don't know how to do, could you upload project to github ? I want to refer to. thanks a lot :)

sorry, can't really do that with this one, since its an internal app :/

haoolii commented 2 years ago

oh i thought i still don't know how to do, could you upload project to github ? I want to refer to. thanks a lot :)

sorry, can't really do that with this one, since its an internal app :/

Okay, thanks a lot. This partial config is my angular.json. and it's for a library. I don't know where can i set watch mode.

`    "client-ui": {
      "projectType": "library",
      "root": "libs/client-ui",
      "sourceRoot": "libs/client-ui/src",
      "prefix": "fr",
      "architect": {
        "test": {
          "builder": "@nrwl/jest:jest",
          "outputs": ["coverage/libs/client-ui"],
          "options": {
            "jestConfig": "libs/client-ui/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
          "builder": "@nrwl/linter:eslint",
          "options": {
            "lintFilePatterns": [
              "libs/client-ui/src/**/*.ts",
              "libs/client-ui/src/**/*.html"
            ]
          }
        },
        "storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/angular",
            "port": 4400,
            "config": {
              "configFolder": "libs/client-ui/.storybook"
            }
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        },
        "build-storybook": {
          "builder": "@nrwl/storybook:build",
          "outputs": ["{options.outputPath}"],
          "options": {
            "uiFramework": "@storybook/angular",
            "outputPath": "dist/storybook/client-ui",
            "config": {
              "configFolder": "libs/client-ui/.storybook"
            }
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        }
      },
      "tags": []
    },`
AnthonyLenglet commented 2 years ago

Okay, thanks a lot. This partial config is my angular.json. and it's for a library. I don't know where can i set watch mode.

the watch mode needs to be set in the maine angular app option rather than the library option

  "test-app": {
      "projectType": "application",
      ...
      "architect": {
          "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "configurations": {
                  ...
                  "storybook": {
                      "watch": true
                  }
              },
          },
      }
  }

and in the storybook option in the library config, the project build config needs to be added

      "storybook": {
      "builder": "@nrwl/storybook:storybook",
      "options": {
          ...
        "projectBuildConfig": "test-app:build:storybook"
      },
    },
shilman commented 2 years ago

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.12 containing PR #17032 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there's still more to do.

sir-captainmorgan21 commented 2 years ago

@shilman does this fix the hot reload issue as well? Im still seeing that with 6.5.0-alpha.13

haoolii commented 2 years ago

Okay, thanks a lot. This partial config is my angular.json. and it's for a library. I don't know where can i set watch mode.

the watch mode needs to be set in the maine angular app option rather than the library option

  "test-app": {
    "projectType": "application",
    ...
    "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "configurations": {
                ...
                "storybook": {
                    "watch": true
                }
            },
        },
    }
  }

and in the storybook option in the library config, the project build config needs to be added

    "storybook": {
      "builder": "@nrwl/storybook:storybook",
      "options": {
        ...
        "projectBuildConfig": "test-app:build:storybook"
      },
    },

Thanks, hot reload still not working, I keep looking for other solutions.

haoolii commented 2 years ago

@shilman does this fix the hot reload issue as well? Im still seeing that with 6.5.0-alpha.13

Latest version is 6.5.0-alpha.14 hot reload still not work :(

isylhdin commented 2 years ago

With v6.4.12, I still have this error :

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

1 import React from 'react';

If I set allowSyntheticDefaultImports to true in my tsconfig.json, I can start storybook. There is an improvement but my stories are still broken.

haoolii commented 2 years ago

Okay, thanks a lot. This partial config is my angular.json. and it's for a library. I don't know where can i set watch mode.

the watch mode needs to be set in the maine angular app option rather than the library option

  "test-app": {
    "projectType": "application",
    ...
    "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "configurations": {
                ...
                "storybook": {
                    "watch": true
                }
            },
        },
    }
  }

and in the storybook option in the library config, the project build config needs to be added

    "storybook": {
      "builder": "@nrwl/storybook:storybook",
      "options": {
        ...
        "projectBuildConfig": "test-app:build:storybook"
      },
    },

Haha, I try to change projectBuildConfig to "projectsBuildConfig": "client-ui:build-storybook" and it work. but I don't know what I do ether it's right or not. thanks.

shilman commented 2 years ago

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.15 containing PR #17206 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.

mandarini commented 2 years ago

@unnhao @fasidOnGit @stefan-schweiger

Solution for the missing polyfill.ts file in Nx workspaces:

For buildable projects

That means: for apps, buildable libs, projects that have the build target in their architect or targets in angular.json or project.json Run you app like this:

nx storybook <YOUR-PROJECT-NAME> --projectBuildConfig=<YOUR-PROJECT-NAME>

For non-buildable projects

For non buildable projects, projects that do NOT have the build target in their architect or targets in angular.json or project.json

Run your app like this:

nx storybook <YOUR-PROJECT-NAME> --projectBuildConfig=<YOUR-PROJECT-NAME>:build-storybook

Notice how here we are explicitly passing the build-storybook target!

Let me know if this works for you. We'll implement this logic inside the executor, but for now, it's an easy workaround with absolutely NO extra code needed.

(Referencing this here too)

Also, there's a PR under way for better logging and this PR to use the current project's build configuration.

spaceribs commented 2 years ago

@shilman unfortunately I'm still seeing the The 'compilation' argument must be an instance of Compilation issue running alpha.15 locally, are there any specific steps I can take to remedy that?

meriturva commented 2 years ago

Just simple reproduction with version 6.4.12:

Errors:

ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: D:\Projects\daButtare\test6412\src\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 D:\Projects\daButtare\test6412\node_modules\@ngtools\webpack\src\ivy\loader.js:60:26
    at processResult (D:\Projects\daButtare\test6412\node_modules\webpack\lib\NormalModule.js:751:19)
    at D:\Projects\daButtare\test6412\node_modules\webpack\lib\NormalModule.js:853:5
    at D:\Projects\daButtare\test6412\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\Projects\daButtare\test6412\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (D:\Projects\daButtare\test6412\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\Projects\daButtare\test6412\node_modules\@ngtools\webpack\src\ivy\loader.js:60:17
joewIST commented 2 years ago

i'm still seeing errors like this:

ModuleParseError: Module parse failed: Unexpected token (34:2) File was processed with these loaders:

I've been trying to upgrade Angular for weeks now and storybook is the only thing holding that back.

meriturva commented 2 years ago

@joewIST i have fixed that issue just working with angular.json file and using storybook version 6.4.12. Could you share your angular.json to see if I could help you fix it?

joewIST commented 2 years ago

this is the nx library's entry in angular.json:

"shared-ui": { "projectType": "library", "root": "libs/shared/ui", "sourceRoot": "libs/shared/ui", "prefix": "shared-ui", "architect": { "build": { "builder": "@nrwl/angular:ng-packagr-lite", "outputs": ["dist/libs/shared/ui"], "options": { "project": "libs/shared/ui/ng-package.json", "styles": ["node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"] }, "configurations": { "production": { "tsConfig": "libs/shared/ui/tsconfig.lib.prod.json" }, "development": { "tsConfig": "libs/shared/ui/tsconfig.lib.json" } }, "defaultConfiguration": "production" }, "test": { "builder": "@nrwl/jest:jest", "outputs": ["coverage/libs/shared/ui"], "options": { "jestConfig": "libs/shared/ui/jest.config.js", "passWithNoTests": true }, "configurations": { "ci": { "ci": true, "codeCoverage": true, "colors": false, "runInBand": true, "force": true } } }, "lint": { "builder": "@nrwl/linter:eslint", "options": { "lintFilePatterns": ["libs/shared/ui/**/*.ts", "libs/shared/ui/**/*.html"] }, "configurations": { "ci": { "force": true, "format": "json", "outputFile": "./.analysis/eslint-ui.json" } }, "outputs": ["{options.outputFile}"] }, "storybook": { "builder": "@nrwl/storybook:storybook", "options": { "uiFramework": "@storybook/angular", "projectBuildConfig": "ui-storybook", "browserTarget": "ui-storybook:build", "port": 4400, "config": { "configFolder": "libs/shared/ui/.storybook", "styles": ["libs/sahred/ui/.storybook/storybook.scss"] } }, "configurations": { "ci": { "quiet": true }, "share": { "host": "0.0.0.0" } } }, "build-storybook": { "builder": "@nrwl/storybook:build", "outputs": ["{options.outputPath}"], "options": { "uiFramework": "@storybook/angular", "outputPath": "dist/storybook/ui", "config": { "configFolder": "libs/shared/ui/.storybook" } }, "configurations": { "ci": { "quiet": true } } }, "stylelint": { "builder": "nx-stylelint:lint", "options": { "config": "libs/shared/ui/.stylelintrc.json", "lintFilePatterns": ["libs/shared/ui/**/*.css", "libs/shared/ui/**/*.scss"] }, "configurations": { "ci": { "format": "json", "outputFile": "./.analysis/stylelint-ui.json" } } } }, "tags": ["$scope:libs/shared/ui", "$scope:libs/shared/utility", "$scope:libs/shared/core", "$scope:libs/direct/data"] },

Itrulia commented 2 years ago

@shilman we are also getting the error TypeError: The 'compilation' argument must be an instance of Compilation just like @spaceribs

meriturva commented 2 years ago

Sorry @joewIST ..no NX on my project.

this is the nx library's entry in angular.json:

"shared-ui": { "projectType": "library", "root": "libs/shared/ui", "sourceRoot": "libs/shared/ui", "prefix": "shared-ui", "architect": { "build": { "builder": "@nrwl/angular:ng-packagr-lite", "outputs": ["dist/libs/shared/ui"], "options": { "project": "libs/shared/ui/ng-package.json", "styles": ["node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"] }, "configurations": { "production": { "tsConfig": "libs/shared/ui/tsconfig.lib.prod.json" }, "development": { "tsConfig": "libs/shared/ui/tsconfig.lib.json" } }, "defaultConfiguration": "production" }, "test": { "builder": "@nrwl/jest:jest", "outputs": ["coverage/libs/shared/ui"], "options": { "jestConfig": "libs/shared/ui/jest.config.js", "passWithNoTests": true }, "configurations": { "ci": { "ci": true, "codeCoverage": true, "colors": false, "runInBand": true, "force": true } } }, "lint": { "builder": "@nrwl/linter:eslint", "options": { "lintFilePatterns": ["libs/shared/ui/**/*.ts", "libs/shared/ui/**/*.html"] }, "configurations": { "ci": { "force": true, "format": "json", "outputFile": "./.analysis/eslint-ui.json" } }, "outputs": ["{options.outputFile}"] }, "storybook": { "builder": "@nrwl/storybook:storybook", "options": { "uiFramework": "@storybook/angular", "projectBuildConfig": "ui-storybook", "browserTarget": "ui-storybook:build", "port": 4400, "config": { "configFolder": "libs/shared/ui/.storybook", "styles": ["libs/sahred/ui/.storybook/storybook.scss"] } }, "configurations": { "ci": { "quiet": true }, "share": { "host": "0.0.0.0" } } }, "build-storybook": { "builder": "@nrwl/storybook:build", "outputs": ["{options.outputPath}"], "options": { "uiFramework": "@storybook/angular", "outputPath": "dist/storybook/ui", "config": { "configFolder": "libs/shared/ui/.storybook" } }, "configurations": { "ci": { "quiet": true } } }, "stylelint": { "builder": "nx-stylelint:lint", "options": { "config": "libs/shared/ui/.stylelintrc.json", "lintFilePatterns": ["libs/shared/ui/**/*.css", "libs/shared/ui/**/*.scss"] }, "configurations": { "ci": { "format": "json", "outputFile": "./.analysis/stylelint-ui.json" } } } }, "tags": ["$scope:libs/shared/ui", "$scope:libs/shared/utility", "$scope:libs/shared/core", "$scope:libs/direct/data"] },

petterhoel commented 2 years ago

@mandarini

Let me know if this works for you. We'll implement this logic inside the executor, but for now, it's an easy workaround with absolutely NO extra code needed.

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-storybook

The 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

nzacca commented 2 years ago

@mandarini Thank you very much for that. Unfortunately, we run into a different issue with our stylesheets. We had to duplicate the stylePreprocessorOptions from our default app in the build-storybook config in order to include stylesheet paths which seems to work but this doesn't appear to be documented as a valid option for the storybook executor. Would you happen to know if this is something that is supported? Or is there a better way to do this?

shilman commented 2 years ago

¡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 @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there's still more to do.

joewIST commented 2 years ago

I still run into the same issue as before:

File was processed with these loaders:

rfprod commented 2 years ago

I still run into the same issue as before:

File was processed with these loaders:

  • ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
  • ./node_modules/@storybook/source-loader/dist/cjs/index.js You may need an additional loader to handle the result of these loaders.

@joewIST It might be different webpack versions (angular-devkit and storybook). Could you try if this helps https://github.com/nrwl/nx/issues/8538#issuecomment-1013834859?

joewIST commented 2 years ago

@rfprod i tried the above but still get the same error

mandarini commented 2 years ago

@joewIST did you try this, too?

joewIST commented 2 years ago

@mandarini yes i've already tried that, and besides i have the projectBuildConfig defined in my angular.json

rfprod commented 2 years ago

@joewIST can you post your package.json dependency versions (both dependencies and devDependencies)? Specifically, which @angular-devkit package versions do you use, and @nrwl dependencies version?

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.

joewIST commented 2 years ago

@rfprod here is my dependencies:

"dependencies": { "@angular-slider/ngx-slider": "^2.0.3", "@angular/animations": "13.1.2", "@angular/cdk": "13.1.2", "@angular/common": "13.1.2", "@angular/compiler": "13.1.2", "@angular/core": "13.1.2", "@angular/forms": "13.1.2", "@angular/localize": "13.1.2", "@angular/material": "13.1.2", "@angular/platform-browser": "13.1.2", "@angular/platform-browser-dynamic": "13.1.2", "@angular/router": "13.1.2", "@angular/youtube-player": "^12.2.12", "@apollo/client": "^3.5.6", "@microsoft/signalr": "^3.1.15", "@ngneat/spectator": "^8.3.1", "@ngneat/until-destroy": "^8.1.4", "@nrwl/schematics": "8.12.11", "@sentry/angular": "^6.13.3", "@sentry/tracing": "^6.13.3", "@storybook/theming": "^6.5.0-alpha.21", "@tinymce/tinymce-angular": "^4.2.4", "@types/d3-brush": "^3.0.1", "@types/d3-array": "^3.0.2", "angularx-qrcode": "^11.0.0", "apollo-angular": "^2.6.0", "bootstrap": "^5.0.2", "d3": "^7.3.0", "dayjs": "^1.10.5", "flag-icon-css": "^4.1.4", "flatpickr": "^4.6.9", "graphql": "^15.8.0", "jest-environment-jsdom": "^27.4.4", "ng-katex": "^2.0.3", "ng-qrcode": "^6.0.0", "ngx-color-picker": "^11.0.0", "ngx-infinite-scroll": "^10.0.1", "nx": "^13.1.2", "perfect-scrollbar": "^1.5.3", "rxjs": "^7.4.0", "tslib": "^2.3.1", "underscore": "^1.13.1", "uuid": "^8.3.2", "webfontloader": "1.6.28", "zone.js": "0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "13.1.3", "@angular-devkit/core": "^13.1.3", "@angular-devkit/schematics": "^13.1.3", "@angular-eslint/builder": "^13.0.1", "@angular-eslint/eslint-plugin": "^13.0.1", "@angular-eslint/eslint-plugin-template": "13.0.1", "@angular-eslint/schematics": "^13.0.1", "@angular-eslint/template-parser": "13.0.1", "@angular/cli": "13.1.3", "@angular/compiler-cli": "13.1.2", "@angular/language-service": "13.1.2", "@babel/core": "^7.16.7", "@commitlint/cli": "^14.1.0", "@commitlint/config-conventional": "^14.1.0", "@compodoc/compodoc": "^1.1.16", "@ljcl/storybook-addon-cssprops": "^1.0.0", "@ngneat/spectator": "^8.3.1", "@nrwl/angular": "13.4.5", "@nrwl/cli": "13.4.5", "@nrwl/cypress": "13.4.5", "@nrwl/devkit": "13.4.5", "@nrwl/eslint-plugin-nx": "13.4.5", "@nrwl/jest": "13.4.5", "@nrwl/js": "13.3.8", "@nrwl/linter": "13.4.5", "@nrwl/nx-cloud": "13.0.3", "@nrwl/storybook": "13.4.5", "@nrwl/workspace": "13.4.5", "@popperjs/core": "^2.9.2", "@storybook/addon-a11y": "^6.5.0-alpha.21", "@storybook/addon-docs": "^6.5.0-alpha.21", "@storybook/addon-essentials": "6.5.0-alpha.21", "@storybook/addon-jest": "^6.5.0-alpha.21", "@storybook/addons": "^6.5.0-alpha.21", "@storybook/angular": "6.5.0-alpha.21", "@storybook/builder-webpack5": "6.5.0-alpha.21", "@storybook/manager-webpack5": "6.5.0-alpha.21", "@storybook/preset-scss": "^1.0.3", "@types/d3": "^7.1.0", "@types/jasmine": "~3.10.1", "@types/jasminewd2": "2.0.10", "@types/jest": "^27.0.2", "@types/node": "^16.11.6", "@types/underscore": "^1.11.3", "@types/uuid": "^8.3.1", "@types/webfontloader": "^1.6.33", "@typescript-eslint/eslint-plugin": "5.3.1", "@typescript-eslint/parser": "5.3.1", "autoprefixer": "^10.4.0", "babel-jest": "^27.4.5", "css-loader": "^6.5.0", "cypress": "^8.7.0", "eslint": "8.2.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-import": "^2.25.2", "eslint-plugin-jsdoc": "^37.0.3", "eslint-plugin-prefer-arrow": "^1.2.3", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-rxjs": "^4.0.1", "eslint-plugin-rxjs-angular": "^2.0.0", "eslint-plugin-storybook": "^0.5.5", "husky": "^7.0.4", "istanbul-instrumenter-loader": "3.0.1", "jasmine-core": "~3.10.1", "jasmine-spec-reporter": "~7.0.0", "jest": "^27.4.5", "jest-preset-angular": "11.0.0", "jest-sonar": "^0.2.12", "karma-cli": "2.0.0", "lint-staged": "^11.2.6", "ng-packagr": "13.1.3", "nx-stylelint": "^12.2.0", "postcss": "^8.3.11", "postcss-import": "^14.0.2", "postcss-preset-env": "^6.7.0", "postcss-url": "^10.1.1", "prettier": "2.4.1", "regenerator-runtime": "^0.13.9", "sass": "^1.43.4", "sass-loader": "^12.3.0", "storybook-addon-themes": "^6.1.0", "style-loader": "^3.3.1", "stylelint": "^14.0.1", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^23.0.0", "stylelint-config-standard-scss": "^2.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.4.0", "stylelint-declaration-use-variable": "^1.7.3", "stylelint-group-selectors": "^1.0.8", "stylelint-scss": "^4.0.0", "ts-jest": "27.1.1", "ts-node": "10.4.0", "tsconfig-paths-webpack-plugin": "^3.5.2", "typescript": "4.5.4", "webpack": "^5.66.0" }

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) File was processed with these loaders:

rfprod commented 2 years ago

@joewIST I would suggest not to use caret ^ and tilde ~ in your package.json at all.

Give it a try in conjunction with the webpack resolution solution.

Remove ^ and ~ from you package.json. Then add the webpack resolution to your package.json. Then execute from the project root

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 npm

Here's what ^ and ~ do

In the simplest terms, the tilde matches the most recent minor version (the middle number). ~1.2.3 will match all 1.2.x versions but will miss 1.3.0.

The caret, on the other hand, is more relaxed. It will update you to the most recent major version (the first number). ^1.2.3 will match any 1.x.xrelease including 1.3.0, but will hold off on 2.0.0.

Info source: https://indianceo.medium.com/caret-and-tilde-in-package-json-57f1cbbe347b

If you remove all ^ and ~ from your package.json, the workspace behavior will be more predictable, and it will be easier to debug it.

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 @angular-devkit/build-angular, but the most recent major version of @angular-devkit/core.

Check the semver parser for more details about referencing versions in package.json.

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'
joewIST commented 2 years ago

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

rfprod commented 2 years ago

@joewIST first of, if you fix dependency version, I think nx will not add ^ or ~ on its own. At least I have not encountered such behavior, and I use nx heavily on a daily basis. I automated the update procedure based on nx migrate like this https://github.com/rfprod/nx-ng-starter/blob/main/tools/ts/update.ts. Here are the commands https://github.com/rfprod/nx-ng-starter/blob/main/angular.json#L1625-L1668

Regarding the loader, do you really need all that storybook dependencies listed in your package.json?

Do you really need "@storybook/preset-scss": "^1.0.3",? It was released a year ago.

Also, "@storybook/theming": "^6.5.0-alpha.21", should be probably moved to devDependencies.

What is in your root main.js storybook file? Compare yours with this one https://github.com/rfprod/nx-ng-starter/blob/main/.storybook/main.js

Another unrelated yet intriguing thing is why do you need "karma-cli": "2.0.0", when you seem to be using jest?

BruceWeng commented 2 years ago

Still see UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation error in storybook: 6.5.0-alpha.23. jest: 27.4.7. angular: 13.1.1.

spaceribs commented 2 years ago

Still see UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation error in storybook: 6.5.0-alpha.23. jest: 27.4.7. angular: 13.1.1.

after stepping away for a week, I can now say that this issue can be resolved by performing the following:

  1. Run npm ls webpack
  2. Find the version of webpack for @angular-devkit/build-angular
  3. npm install that exact version to your dev dependencies
  4. run npm dedupe

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 For example:

├─┬ @angular-devkit/build-angular@13.1.2
│ └── webpack@5.65.0  deduped
├─┬ @nrwl/node@13.4.1
│ └── webpack@5.65.0  deduped
├─┬ @storybook/addon-controls@6.5.0-alpha.23
│ └─┬ @storybook/core-common@6.5.0-alpha.23
│   └── webpack@4.46.0 
├─┬ @storybook/addon-docs@6.5.0-alpha.23
│ ├─┬ @storybook/builder-webpack4@6.5.0-alpha.23
│ │ └── UNMET PEER DEPENDENCY webpack@4.46.0 
│ └─┬ @storybook/core@6.5.0-alpha.23
│   └─┬ @storybook/core-server@6.5.0-alpha.23
│     ├─┬ @storybook/manager-webpack4@6.5.0-alpha.23
│     │ └── webpack@4.46.0 
│     └── webpack@4.46.0 
├─┬ UNMET PEER DEPENDENCY @storybook/angular@6.5.0-alpha.23
│ └── webpack@4.46.0 
├─┬ @storybook/builder-webpack5@6.5.0-alpha.23
│ └── webpack@5.65.0  deduped
├─┬ @storybook/manager-webpack5@6.5.0-alpha.23
│ └── webpack@5.65.0  deduped
└── webpack@5.65.0

you're looking to make sure every instance is deduped

spaceribs commented 2 years ago

is there a separate issue # for the problems with HMR experienced by a few folks?

sir-captainmorgan21 commented 2 years ago

@spaceribs there is an issue I opened and have a work around for: https://github.com/nrwl/nx/issues/8484#issuecomment-1012664860

mandarini commented 2 years ago

New docs for styles and stylePreprocessorOptions