Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

storybook build error on fresh Angular CLI project #15246

Closed
fikkatra opened this issue Jun 15, 2021 · 12 comments
Closed

storybook build error on fresh Angular CLI project #15246

fikkatra opened this issue Jun 15, 2021 · 12 comments
Labels
angular bug has workaround

Comments

@fikkatra
Copy link

When adding Storybook to an Angular project that was created with the Angular CLI (monorepo approach with a single library), running npm run storybook produces the following error:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

Repro steps:

> ng new design-system --create-application=false
> cd design-system
> ng generate library pattern-lib 
> npx sb init 
> npm run storybook

Build output:

design-system@0.0.0 storybook
npm run docs:json && start-storybook -p 6006

design-system@0.0.0 docs:json
compodoc -p ./tsconfig.json -e json -d .              

1.1.11

TypeScript version used by Compodoc : 2.9.1

TypeScript version of current project : 4.2.3

Node.js version : v12.18.3

Operating system : macOS Catalina

[09:26:42] No configuration file found, switching to CLI flags.
[09:26:42] Using tsconfig file : /pocs/design-system/tsconfig.json
[09:26:42] Including      : /pocs/design-system/.editorconfig
[09:26:42] Including      : /pocs/design-system/.gitignore
[09:26:42] Including      : /pocs/design-system/README.md
[09:26:42] Including      : /pocs/design-system/angular.json
[09:26:42] Including      : /pocs/design-system/package.json
[09:26:42] Including      : /pocs/design-system/tsconfig.json
[09:26:42] Including      : /pocs/design-system/.storybook/main.js
[09:26:42] Including      : /pocs/design-system/.storybook/preview.js
[09:26:42] Including      : /pocs/design-system/.storybook/tsconfig.json
[09:26:42] Ignoring       : /pocs/design-system/.storybook/typings.d.ts
[09:26:42] Including      : /pocs/design-system/stories/Button.stories.ts
[09:26:42] Including      : /pocs/design-system/stories/Header.stories.ts
[09:26:42] Including      : /pocs/design-system/stories/Page.stories.ts
[09:26:42] Including      : /pocs/design-system/stories/Introduction.stories.mdx
[09:26:42] Including      : /pocs/design-system/stories/button.component.ts
[09:26:42] Including      : /pocs/design-system/stories/button.css
[09:26:42] Including      : /pocs/design-system/stories/header.component.ts
[09:26:42] Including      : /pocs/design-system/stories/header.css
[09:26:42] Including      : /pocs/design-system/stories/page.component.ts
[09:26:42] Including      : /pocs/design-system/stories/page.css
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/README.md
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/package.json
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/karma.conf.js
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/ng-package.json
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/tsconfig.lib.json
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/tsconfig.lib.prod.json
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/tsconfig.spec.json
[09:26:42] Including      : /pocs/design-system/stories/assets/colors.svg
[09:26:42] Including      : /pocs/design-system/stories/assets/code-brackets.svg
[09:26:42] Including      : /pocs/design-system/stories/assets/comments.svg
[09:26:42] Including      : /pocs/design-system/stories/assets/flow.svg
[09:26:42] Including      : /pocs/design-system/stories/assets/direction.svg
[09:26:42] Including      : /pocs/design-system/stories/assets/plugin.svg
[09:26:42] Including      : /pocs/design-system/stories/assets/repo.svg
[09:26:42] Including      : /pocs/design-system/stories/assets/stackalt.svg
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/public-api.ts
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/test.ts
[09:26:42] Ignoring       : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.component.spec.ts
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.component.ts
[09:26:42] Ignoring       : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.service.spec.ts
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.module.ts
[09:26:42] Including      : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.service.ts
[09:26:42] Searching package.json file
[09:26:42] package.json file found
[09:26:42] Processing package.json dependencies
[09:26:42] Searching README.md, CHANGELOG.md, CONTRIBUTING.md, LICENSE.md, TODO.md files
[09:26:42] README.md file found
[09:26:42] Error during /pocs/design-system/CHANGELOG read
[09:26:42] Continuing without CHANGELOG.md file
[09:26:42] Error during /pocs/design-system/CONTRIBUTING read
[09:26:42] Continuing without CONTRIBUTING.md file
[09:26:42] Error during /pocs/design-system/LICENSE read
[09:26:42] Continuing without LICENSE.md file
[09:26:42] Error during /pocs/design-system/TODO read
[09:26:42] Continuing without TODO.md file
[09:26:42] Get dependencies data
[09:26:42] parsing        : /pocs/design-system/stories/Button.stories.ts
[09:26:42] parsing        : /pocs/design-system/stories/Header.stories.ts
[09:26:42] parsing        : /pocs/design-system/stories/Page.stories.ts
[09:26:42] parsing        : /pocs/design-system/stories/button.component.ts
[09:26:42] found          : ButtonComponent
[09:26:42] parsing        : /pocs/design-system/stories/header.component.ts
[09:26:42] found          : HeaderComponent
[09:26:42] parsing        : /pocs/design-system/stories/page.component.ts
[09:26:42] found          : PageComponent
[09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/public-api.ts
[09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/test.ts
[09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.component.ts
[09:26:42] found          : PatternLibComponent
[09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.module.ts
[09:26:42] found          : PatternLibModule
[09:26:42]                : - exports:
[09:26:42]                : - PatternLibComponent
[09:26:42]                : - declarations:
[09:26:42]                : - PatternLibComponent
[09:26:42] parsing        : /pocs/design-system/projects/pattern-lib/src/lib/pattern-lib.service.ts
[09:26:42] found          : PatternLibService
[09:26:42] -------------------
[09:26:42] Project statistics 
[09:26:42] - files      : 39
[09:26:42] - module     : 1
[09:26:42] - component  : 4
[09:26:42] - injectable : 1
[09:26:42] -------------------
[09:26:42] Prepare components
[09:26:42]  ButtonComponent has styleUrls, include them
[09:26:42]  HeaderComponent has styleUrls, include them
[09:26:42]  PageComponent has styleUrls, include them
[09:26:42] Prepare modules
[09:26:42] Prepare injectables
[09:26:42] Prepare miscellaneous
[09:26:42] Process documentation coverage report
[09:26:42] Generating documentation in export format json
[09:26:42] Documentation generated in ./ in 0.214 seconds
info @storybook/angular v6.2.9
info 
info => Loading presets
info => Loading 1 config file in "/pocs/design-system/.storybook"
info => Loading 7 other files in "/pocs/design-system/.storybook"
info => Adding stories defined in "/pocs/design-system/.storybook/main.js"
info => Using prebuilt manager
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Using angular project 'pattern-lib' for configuring Storybook.
ERR! TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
ERR!     at validateString (internal/validators.js:120:11)
ERR!     at Object.resolve (path.js:980:7)
ERR!     at Object.getAngularCliWebpackConfigOptions (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli_config.js:120:39)
ERR!     at Object.webpackFinal (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js:8:56)
ERR!     at /pocs/design-system/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28
ERR!  TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
ERR!     at validateString (internal/validators.js:120:11)
ERR!     at Object.resolve (path.js:980:7)
ERR!     at Object.getAngularCliWebpackConfigOptions (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli_config.js:120:39)
ERR!     at Object.webpackFinal (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js:8:56)
ERR!     at /pocs/design-system/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28 {
ERR!   code: 'ERR_INVALID_ARG_TYPE'
ERR! }
@shilman
Copy link
Member

shilman commented Jun 15, 2021 •
edited

Angular 12 support was added in 6.3. To use the RC:

> ng new design-system --create-application=false
> cd design-system
> ng generate library pattern-lib 
> npx sb@next init 
> npm run storybook

@fikkatra
Copy link
Author

@shilman thank you for your answer, but unfortunately that still produces the same error.

Build output (starting from @storybook/angular version):

info @storybook/angular v6.3.0-rc.6
info 
info => Loading presets
Compiling @angular/animations : fesm2015 as esm2015
Compiling @angular/core : fesm2015 as esm2015
Compiling @angular/animations/browser : fesm2015 as esm2015
Compiling @angular/animations/browser/testing : fesm2015 as esm2015
Compiling @angular/common : fesm2015 as esm2015
Compiling @angular/common/http : fesm2015 as esm2015
Compiling @angular/common/http/testing : fesm2015 as esm2015
Compiling @angular/elements : fesm2015 as esm2015
Compiling @angular/forms : fesm2015 as esm2015
Compiling @angular/platform-browser : fesm2015 as esm2015
Compiling @angular/platform-browser/animations : fesm2015 as esm2015
Compiling @angular/core/testing : fesm2015 as esm2015
Compiling @angular/platform-browser-dynamic : fesm2015 as esm2015
Compiling @angular/platform-browser/testing : fesm2015 as esm2015
Compiling @angular/compiler/testing : fesm2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : fesm2015 as esm2015
Compiling @angular/common/testing : fesm2015 as esm2015
Compiling @angular/router : fesm2015 as esm2015
Compiling @angular/router/testing : fesm2015 as esm2015
info => Loading 1 config file in "/pocs/design-system/.storybook"
info => Loading 9 other files in "/pocs/design-system/.storybook"
info => Adding stories defined in "/pocs/design-system/.storybook/main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config
info => Using angular project "pattern-lib:build" for configuring Storybook
ERR! => Could not get angular cli webpack config
ERR! TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
ERR!     at validateString (internal/validators.js:120:11)
ERR!     at Object.resolve (path.js:980:7)
ERR!     at /pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:140:47
ERR!     at step (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR!     at Object.next (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR!     at /pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71
ERR!     at new Promise ()
ERR!     at __awaiter (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)
ERR!     at buildWebpackConfigOptions (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:125:82)
ERR!     at Object. (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:177:42)
ERR!     at step (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR!     at Object.next (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR!     at /pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71
ERR!     at new Promise ()
ERR!     at __awaiter (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)
ERR!     at Object.extractAngularCliWebpackConfig (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:171:12)
ERR!  TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
ERR!     at validateString (internal/validators.js:120:11)
ERR!     at Object.resolve (path.js:980:7)
ERR!     at /pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:140:47
ERR!     at step (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR!     at Object.next (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR!     at /pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71
ERR!     at new Promise ()
ERR!     at __awaiter (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)
ERR!     at buildWebpackConfigOptions (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:125:82)
ERR!     at Object. (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:177:42)
ERR!     at step (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:69:23)
ERR!     at Object.next (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:50:53)
ERR!     at /pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:44:71
ERR!     at new Promise ()
ERR!     at __awaiter (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:40:12)
ERR!     at Object.extractAngularCliWebpackConfig (/pocs/design-system/node_modules/@storybook/angular/dist/ts3.9/server/angular-devkit-build-webpack.js:171:12) {
ERR!   code: 'ERR_INVALID_ARG_TYPE'
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

@mfrancekovic
Copy link

mfrancekovic commented Jun 15, 2021 •
edited

I'm having the exact same issue with Angular 12 and with projectType: library.

I've tried upgrading the Storybook to 6.3.0-rc.7 and adding the extends path to tsconfig.json to .storybook/tsconfig.json.
But it didn't help.

@shilman shilman added this to the 6.3 blockers milestone Jun 15, 2021
@mfrancekovic
Copy link

@fikkatra @shilman I've managed to make it work by just adding tsConfig to the angular.json like this 👇

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/my-lib/ng-package.json",
            "tsConfig": "projects/my-lib/tsconfig.lib.json" <= this line made it work.
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/my-lib/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/my-lib/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },

It seems like the storybook builder doesn't know to take into account the defaultConfiguration from the angular.json.

@fikkatra
Copy link
Author

@mfrancekovic that worked, thanks!

@fikkatra @shilman I've managed to make it work by just adding tsConfig to the angular.json like this 👇

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/my-lib/ng-package.json",
            "tsConfig": "projects/my-lib/tsconfig.lib.json" <= this line made it work.
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/my-lib/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/my-lib/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },

It seems like the storybook builder doesn't know to take into account the defaultConfiguration from the angular.json.

@literalpie
Copy link
Contributor

I think this issue should be reopened. Storybook should handle the case where tsConfig isn't included in the options - especially since is the default when you create a new angular project

@shilman shilman reopened this Jun 20, 2021
@shilman
Copy link
Member

shilman commented Jun 20, 2021

@kroeder @ThibaudAV can one of you take a look?

@shilman shilman removed this from the 6.3 blockers milestone Jun 21, 2021
@ThibaudAV
Copy link
Contributor

ThibaudAV commented Jun 25, 2021 •
edited

@literalpie and others. I've some question 🙋‍♂️

Some context :

In order to avoid redoing the same code as angular-cli. Storybook uses parts of the code of this one with the framework-preset-angular-cli.ts
More precisely storybook uses some code block of the builder @angular-devkit/build-angular:browser which allows it to manage this options

            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],

for example. And also to use the tsConfig mandatory for this builder. And set other webpack config from angular cli

Currently to find out which projects to plug into. Storybook is not very smart. Either there is a storybook project or it uses the defaultProject and in both cases you need a build architect.
more info here

If storybook doesn't find the architect.build it will ignore the preset framework-preset-angular-cli.ts (more info here ), add a warn and use the basic config

And in our case. Storybook has all the elements (project + architect.build ) and will try to use the config of the builder ng-packagr to start
And it "works" with just the mandatory tsconfig.

But this seems to me more of a fluke than an actual intended use case 😁 or not 🤷‍♂️

For information I don't know all the history. I just refactored and added test on this part to clarify it and allow the addition of new feature 🙈

And now questions

I started to introduce a native sb builder. It's a good way to launch several storybooks with different configuration.
We could easily add a styles and tsconfig parameter to allow a more flex and clear configuration for lib ?

I need feedback to make the best solution 🙏

🥔 🥔 🥔
sorry for the long post
🥔 🥔 🥔

@ThibaudAV ThibaudAV mentioned this issue Jun 29, 2021
Closed
This was referenced Jul 15, 2021
Open
Closed
@Marklb
Copy link
Member

Marklb commented Jul 15, 2021

I haven't looked to deep into this and am about about the same point @ThibaudAV on deciding how this should be solved, but the styles and assets are the main properties that I can think would confuse users that don't understand Storybook's build process. The only thing I can think of to prevent that confusion would be to log a warning when initializing Storybook in a project targeting a library and hope they see it. The warning could either explain potential issues with using a library project or point to instructions on adding an application project to angular.json.

If we were to account for library projects and read necessary config from it's alternate properties then I can see issues with "assets" and "styles".

"assets":

ng-packagr does support assets, but the configuration is limited to just string paths. That may be fine for majority of libraries, but I use a builder that wraps ng-packagr with support for the object syntax that applications can define.

"styles":

I am not sure if there is a way to support the global styles that applications can provide, because a library has no need for global styles. Libraries would just add them to assets for the consuming application to import into it's global styles.

To me it makes sense that "styles" would not be imported automatically for a library, but someone that only uses angular-cli commands to change configuration may not think about why an application. One example would be #14912. When adding angular libraries to a project, configuration schematics can be run to set any required configuration if you add the library with ng add instead of npm i. Often libraries will add their global stylesheet to the angular.json configuration for you, so you may not even notice that if you don't pay attention to your changed files. From Angular's perspective where would they be expected to define styles when a library doesn't even have an index.html to use them? A library project would have to manually specify their styles that Storybook should load and the best thing we could do about that is add a notice to the documentation and potentially a warning when initializing with Storybook's cli.

@literalpie
Copy link
Contributor

I think the ideal solution would be to look at the 'defaultConfiguration', and then get the tsconfig by looking at architect.configurations[defaultConfiguration].tsconfig. Is there some reason this isn't possible?

I also like the direction of going with a native sb builder. That seems to align much more closely with the angular ecosystem.

@shilman shilman mentioned this issue Jul 21, 2021
Closed
@ThibaudAV
Copy link
Contributor

@literalpie

I would like to add defaultConfiguration support.
but this is a new angular 12 feature and storybook is not yet in angular 12 completely

it is missing this pr : #15184 but it's not finish currently .. :/

tancou added a commit to tancou/daventure-designsystem-example that referenced this issue Nov 10, 2021
@tancou
Fix Storybook not working properly with fresh project
6e980e6 
storybookjs/storybook#15246
@ThibaudAV ThibaudAV mentioned this issue Nov 12, 2021
Merged
3 tasks
@shilman
Copy link
Member

shilman commented Nov 26, 2021

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-rc.9 containing PR #16675 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.

@shilman shilman closed this as completed Nov 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
angular bug has workaround
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@shilman @mfrancekovic @ThibaudAV @fikkatra @Marklb @literalpie