/storybook-version-issues

Primary LanguageTypeScript

Sb

This repo tries to document some issues migrating Nx workspaces that have Storybook added.

Setup initial workspace

Using node 14.15.0

Create Angular workspace:

npx create-nx-workspace@11.1.5 sb
? What to create in the new workspace angular           [a workspace with a sing
le Angular application]
? Application name                    sb
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com   ]
? Default linter                      ESLint [ Modern linting tool ]
? Use Nx Cloud? (It's free and doesn't require registration.) No

Add two ui libraries and s shared styles library:

nx g @nrwl/angular:lib --style scss lib1
nx g @nrwl/angular:lib --style scss lib2
nx g @nrwl/workspace:lib --style scss styles

Add a component to each library:

nx g @nrwl/angular:component --style scss --project lib1 comp1
nx g @nrwl/angular:component --style scss --project lib2 comp2

Add global styles in shared style lib:

$font-color: blue;

Add global styles to app config in angular.json:

"stylePreprocessorOptions": {
  "includePaths": ["libs/styles/src/lib"]
}

Import font color and use in each component:

@use 'global' as g;

:host {
  color: g.$font-color;
}

Add Storybook

Install Storybook package:

npm i @nrwl/storybook@11.1.5 --save-dev

Adjust package version to not include carot:

    "@nrwl/storybook": "11.1.5",

Generate Storybook Configuration for lib1:

nx g @nrwl/angular:storybook-configuration lib1
? Configure a cypress e2e app to run against the storybook instance? Yes
? Automatically generate *.stories.ts files for components declared in this library? Yes
? Automatically generate *.spec.ts files in the cypress e2e app generated by the cypress-configure generator? Yes

Run Storybook instance:

nx run lib1:storybook

Receive error:

Unable to resolve @nrwl/storybook:storybook.
Cannot find module '@storybook/core/dist/server/build-dev'
Require stack:
- /Users/philip/storybook-upgrades/sb/node_modules/@nrwl/storybook/src/builders/storybook/storybook.impl.js
- /Users/philip/storybook-upgrades/sb/node_modules/@nrwl/tao/src/shared/workspace.js
- /Users/philip/storybook-upgrades/sb/node_modules/@nrwl/tao/src/commands/run.js
- /Users/philip/storybook-upgrades/sb/node_modules/@nrwl/tao/index.js
- /Users/philip/storybook-upgrades/sb/node_modules/@nrwl/cli/lib/run-cli.js

Adjust Storybook versions to not include carot:

    "@storybook/addon-knobs": "6.1.11",
    "@storybook/angular": "6.1.11",

Run install:

npm i

Run Storybook instance again:

nx run lib1:storybook

Success!

Migrate to Nx 11.6.2

Initial migration steps:

nx migrate 11.6.2
npm install --legacy-peer-deps
nx migrate --run-migrations

Run Storybook instance:

nx run lib1:storybook

Receive warning during config:

info => Loading presets
info => Loading presets
info => Loading 1 config file in "libs/lib1/.storybook"
info => Adding stories defined in "libs/lib1/.storybook/main.js"
info => Found custom tsconfig.json
info => Using angular project 'sb' for configuring Storybook.
info => Loading angular-cli config.
WARN Failed to load the Angular CLI config. Using Storybook's default config instead.
WARN TypeError: Cannot read property 'minify' of undefined
WARN     at getCommonConfig (/Users/philip/storybook-upgrades/sb/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js:304:28)
WARN     at Object.getAngularCliParts (/Users/philip/storybook-upgrades/sb/node_modules/@storybook/angular/dist/server/angular-cli_utils.js:83:30)
WARN     at Object.applyAngularCliWebpackConfig (/Users/philip/storybook-upgrades/sb/node_modules/@storybook/angular/dist/server/angular-cli_config.js:134:40)
WARN     at Object.webpackFinal (/Users/philip/storybook-upgrades/sb/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js:10:33)
WARN     at /Users/philip/storybook-upgrades/sb/node_modules/@storybook/core/dist/server/presets.js:259:28
WARN  TypeError: Cannot read property 'minify' of undefined
WARN     at getCommonConfig (/Users/philip/storybook-upgrades/sb/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js:304:28)
WARN     at Object.getAngularCliParts (/Users/philip/storybook-upgrades/sb/node_modules/@storybook/angular/dist/server/angular-cli_utils.js:83:30)
WARN     at Object.applyAngularCliWebpackConfig (/Users/philip/storybook-upgrades/sb/node_modules/@storybook/angular/dist/server/angular-cli_config.js:134:40)
WARN     at Object.webpackFinal (/Users/philip/storybook-upgrades/sb/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js:10:33)
WARN     at /Users/philip/storybook-upgrades/sb/node_modules/@storybook/core/dist/server/presets.js:259:28
WARN => Failed to get angular-cli webpack config.
info => Loading custom Webpack config (full-control mode).

Receive error during compilation:

ERROR in ./libs/lib1/src/lib/comp1/comp1.component.scss
Module build failed (from ./node_modules/@storybook/angular/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @use 'global' as g;
  │ ^^^^^^^^^^^^^^^^^^
  ╵
  /Users/philip/storybook-upgrades/sb/libs/lib1/src/lib/comp1/comp1.component.scss 1:1  root stylesheet
 @ ./libs/lib1/src/lib/comp1/comp1.component.ts 12:18-51 12:63-96 12:108-141 12:153-186
 @ ./libs/lib1/src/lib/comp1/comp1.component.stories.ts
 @ ./libs/lib1/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./libs/lib1/.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./libs/lib1/.storybook/storybook-init-framework-entry.js ./libs/lib1/.storybook/preview.js-generated-config-entry.js ./libs/lib1/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true

Adjust Storybook package versions back to having carot:

    "@storybook/addon-knobs": "^6.1.11",
    "@storybook/angular": "^6.1.11",
    ```

Run install

npm i

Run Storybook instance:

nx run lib1:storybook

Receive same errors as before

Change Storybook package versions to use 6.2.7:

    "@storybook/addon-knobs": "^6.2.7",
    "@storybook/angular": "^6.2.7",

Run install

npm i

Run Storybook instance:

nx run lib1:storybook

Success!

Migrate to Nx 12.0.4

Initial migration steps:

nx migrate 11.6.2
npm install --legacy-peer-deps
nx migrate --run-migrations

Success!