Error in HtmlWebpackPlugin with latest alpha #3399

bengry · 2018-04-11T11:58:58Z

If you are reporting a bug or requesting support, start here:

Bug or support request summary

Storybook for Angular doesn't start up with 4.0.0-alpha3 - stuck on 95% emitting HtmlWebpackPlugin for a while, than fails.

Please provide issue details here - What did you expect to happen? What happened instead?
After configuring a repo the same way as the angular-cli example, running npm run storybook shows the below:

info => Loading angular-cli config.
info @storybook/angular v4.0.0-alpha.3
info
info => Loading static files from: C:\projects\foo .
info => Found custom tsconfig.json
info => Loading custom addons config.
info => Get angular-cli webpack config.
info => Loading custom webpack config (full-control mode).
info => Get angular-cli webpack config.
 10% building modules 3/3 modules 0 activei ｢wdm｣: wait until bundle finished:
(node:137824) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead              95% emitting HtmlWebpackPluginTypeError:
chunk.groupsIterable is not iterable
    at obj.chunks.compilation.chunks.map.chunk (C:\projects\foo\node_modules\@storybook\core\node_modules\webpack\lib\Stats.js:522:36)
    at Array.map (<anonymous>)
    at Stats.toJson (C:\projects\foo\node_modules\@storybook\core\node_modules\webpack\lib\Stats.js:518:36)
    at C:\projects\foo\node_modules\@storybook\angular\node_modules\html-webpack-plugin\index.js:109:48
    at _err0 (eval at create (C:\projects\foo\node_modules\@storybook\core\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:19:1)
    at callback (C:\projects\foo\node_modules\copy-webpack-plugin\dist\index.js:77:17)
    at C:\projects\foo\node_modules\copy-webpack-plugin\dist\index.js:118:24
    at <anonymous>

Steps to reproduce

Please provide necessary steps for reproduction of this issue. Describe the exact steps a maintainer has to take to make the problem occur. If the problem is non-trivial to reproduce, please link a repository or provide some code snippets.

(A screencast can be useful for visual bugs, but it is not a substitute for a textual description.)

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/angular 4.0.0-alpha2 (as well as 4.0.0-alpha3)
@angular/cli 1.7.4
@angular/<all except cli> 5.1.2

Affected platforms

If UI related, please indicate browser, OS, and version Windows 10 x64
If dependency related, please include relevant version numbers
If developer tooling related, please include the platform information

Screenshots / Screencast / Code Snippets (Optional)

All of the .storybook folder looks 100% the same as the previously mentioned example repo.:

angular-cli.json:

...
	"scripts": [
				"../node_modules/jquery/dist/jquery.js",
				"../node_modules/angular/angular.js",
				"../node_modules/angular-sanitize/angular-sanitize.js",
				"../node_modules/angular-ui-router/release/angular-ui-router.js",
				"../node_modules/angular-resource/angular-resource.js",
				"../node_modules/angular-animate/angular-animate.js",
				"../node_modules/angular-aria/angular-aria.js",
				"../node_modules/angular-mocks/angular-mocks.js",
				"../node_modules/angular-hotkeys/build/hotkeys.js",
				"../node_modules/ng-file-upload/dist/ng-file-upload.js",
				"../node_modules/ngstorage/ngStorage.js",
				"../node_modules/ng-infinite-scroll/build/ng-infinite-scroll.js",
				"../node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js",
				"../node_modules/bootstrap/dist/js/bootstrap.min.js",
				"../node_modules/html2canvas/dist/html2canvas.js",
				"../node_modules/lodash/lodash.js",
				"../node_modules/c3/c3.js",
				"../node_modules/d3-tip/index.js",
				"../src/app/<redacted>/abused_scripts/nv.d3.js",
				"../node_modules/angular-nvd3/dist/angular-nvd3.js",
				"../node_modules/moment/min/moment.min.js",
				"../node_modules/moment-timezone/moment-timezone.js",
				"../src/app/<redacted>/abused_scripts/angularjs-dropdown-multiselect.js",
				"../src/app/<redacted>/abused_scripts/angular-tooltips.js",
				"../src/app/<redacted>/abused_scripts/ng-contextmenu.js",
				"../src/app/<redacted>/abused_scripts/bootstrap-datetimepicker.min.js",
				"../src/app/<redacted>/abused_scripts/rzslider.js",
				"../node_modules/applicationinsights-js/dist/ai.js",
				"../node_modules/element-closest/element-closest.js",
				"../node_modules/textangular/dist/textAngular-rangy.min.js",
				"../node_modules/textangular/dist/textAngular-sanitize.min.js",
				"../node_modules/textangular/dist/textAngular.min.js",
				"../src/app/<redacted>/templates/templates.js"
			],
...
```js
// code here

End bug report support request - delete the rest below

If you are creating a issue to track work to be completed, start here:

Work summary

Please provide a description of the work to be completed here - Include some context as to why something needs to be done and link any related tickets.

Where to start

Please list the file(s) a contributor needs to figure out where to start work and include any docs or tutorials that may be applicable.

@storybook\core\node_modules\webpack\lib\Stats.js:522. Inspecting chunk.groupsIterable shows it is undefined.

Additionally, removing all scripts entries from the angular-cli.json seems to "solve" the issue (i.e. Storybook starts).

Acceptance criteria

Please include a checklist of the requirements necessary to close this ticket. The work should be narrowly scoped and limited to a few hours worth by an experienced developer at the most.

Who to contact

Add yourself and/or people who are familiar with the code changes and requirements. These people should be able to review the completed code.
End work issue - please tag this issue with the correct status and type labels

The text was updated successfully, but these errors were encountered:

igor-dv · 2018-04-12T11:50:06Z

I don't have this specific issue when running the angular-cli example (have other warnings, but everything is working)

bengry · 2018-04-12T13:06:09Z

@igor-dv Try to do the following in the angular-cli example:

Add a file:
src/lib/index.js
Content shouldn't matter, I used:

window.foo = 'bar';

Add that file to the .angular-cli.json, under scripts:

...
   "scripts": [
        "./lib/index.js"
      ],
...

Run storybook (yarn storybook).

This is the outout I got after doing the above:

yarn run v1.3.2
$ start-storybook -p 9008 -s src/assets
info => Loading angular-cli config.
info @storybook/angular v4.0.0-alpha.2
info
info => Loading static files from: C:\Users\bengr\Desktop\storybook\examples\angular-cli\src\assets .
info => Found custom tsconfig.json
info => Loading custom addons config.
info => Get angular-cli webpack config.
info => Loading custom webpack config (full-control mode).
info => Get angular-cli webpack config.
 10% building modules 3/3 modules 0 activei ｢wdm｣: wait until bundle finished:
(node:24416) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead                      95% emitting HtmlWebpackPlugin

igor-dv · 2018-04-22T15:18:33Z

I was able to reproduce it that way. Probably we need to upgrade to a new version of the cli that already supports webpack 4.

After a brief checking, there was a lot of refactoring in there, and it breaks all our assumptions about the angular-cli's webpack part.

@Quramy, I remember you talked about it, do you have any other details about this?
@amcdnl, maybe you are familiar with someone from angular-cli that can help us?

igor-dv · 2018-04-23T16:00:55Z

I see it moved to https://github.com/angular/devkit/tree/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs

bengry · 2018-04-23T16:02:22Z

@igor-dv what do you mean?

igor-dv · 2018-04-23T16:10:55Z

There are webpack configuration parts in the v1.7 of angular-cli that we are using in code here: https://github.com/storybooks/storybook/blob/master/app/angular/src/server/angular-cli_config.js#L46

Since v1.7 is dependant on webpack < 4, we are getting all these Tapable.plugin is deprecated errors when trying to use a new version of storybook (which is dependant on webpack >= 4).

In order to fix this, we need to upgrade to a new version of angular-cli (v6 I think), but there are a lot of breaking changes out there, and one of them is that webpack-configs moved to another place.

Quramy · 2018-04-24T11:17:26Z

@igor-dv

And there is the following comment in https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts#L2

// TODO: cleanup this file, it's copied as is from Angular CLI.

Can we use these webpack configurators as "public" APIs? 🤔

Also .anglar-cli.json in v5 has been renamed to angular.json. They are not compatible. If we support both cli v5 and cli v6, I think that handling of json becomes complicated.

igor-dv · 2018-04-24T11:25:50Z

And there is the following comment

probably they want to clean up unneeded things =)

Can we use these webpack configurators as "public" APIs? 🤔

I think yes. Are you already familiar with a new CLI ? Also, they are in the RC now.

Also .anglar-cli.json in v5 has been renamed to angular.json. They are not compatible. If we support both cli v5 and cli v6, I think that handling of json becomes complicated.

IMO we shouldn't support both. Storybook v4 will be compatible with a new angular-cli version and with a new webpack version. That's the breaking change all over the place, so we just can't support everything.

avol-io · 2018-04-26T08:51:14Z

I had the same problem. And I confirm that upgrade to angular 6 fix this problem.
Here a useful steps to do to upgrade right: https://stackoverflow.com/a/49474334/5867911

igor-dv · 2018-04-26T09:02:13Z

Should the @angular-devkit/build-angular be installed explicitly? Or it always appeared before?

avol-io · 2018-04-26T09:10:41Z

I think that it must installed and addend in package.json (i created a new project from scratch to compare the package.json).
I had problems also with rxjs but in the same stackoverflow post there is a link to rx upgrade guide that explain also how automate the upgrade/fix of import for rxjs if you don't want install retro-compatible package.

this is my package.json:

  "name": "xxxx",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0-rc.5",
    "@angular/common": "^6.0.0-rc.5",
    "@angular/compiler": "^6.0.0-rc.5",
    "@angular/core": "^6.0.0-rc.5",
    "@angular/forms": "^6.0.0-rc.5",
    "@angular/http": "^6.0.0-rc.5",
    "@angular/platform-browser": "^6.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
    "@angular/router": "^6.0.0-rc.5",
    "@ngx-translate/core": "^10.0.1",
    "@ngx-translate/http-loader": "^3.0.1",
    "bootstrap": "3.3.1",
    "bootstrap-datepicker": "1.4.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "font-awesome": "4.3.0",
    "inputmask": "^3.3.11",
    "jquery": "1.11.3",
    "jquery-ui": "1.10.5",
    "moment": "^2.22.1",
    "rxjs": "^6.0.0-rc.0",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.5.0",
    "@angular/cli": "^6.0.0-rc.6",
    "@angular/compiler-cli": "^6.0.0-rc.5",
    "@angular/language-service": "^6.0.0-rc.5",
    "@storybook/addon-actions": "^4.0.0-alpha.3",
    "@storybook/addon-knobs": "^4.0.0-alpha.3",
    "@storybook/addon-links": "^4.0.0-alpha.3",
    "@storybook/addon-notes": "^4.0.0-alpha.3",
    "@storybook/addon-options": "^4.0.0-alpha.3",
    "@storybook/addons": "^4.0.0-alpha.3",
    "@storybook/angular": "^4.0.0-alpha.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.1",
    "@types/node": "~8.9.4",
    "babel-core": "^6.26.0",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "prettier": "^1.12.1",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "^2.7.2"
  }
}

stale · 2018-05-17T09:30:47Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hypnosphi · 2018-06-10T14:29:40Z

Released as 4.0.0-alpha.9

igor-dv added compatibility with other tools configuration babel / webpack angular labels Apr 12, 2018

igor-dv mentioned this issue Apr 26, 2018

angular-cli 6 (with webpack 4) compatibility #3491

Merged

3 tasks

stale bot added the inactive label May 17, 2018

igor-dv added the in progress label May 17, 2018

stale bot removed the inactive label May 17, 2018

Hypnosphi closed this as completed Jun 10, 2018

issue-sh bot removed the in progress label Jun 10, 2018

ndelangen mentioned this issue Oct 12, 2018

CHANGE back to use html-webpack-plugin to keep compatibility with plugins that depend on it #4375

Merged

chakAs3 mentioned this issue May 22, 2023

Vue: Replace vue-docgen-api with Volar vue-component-meta #22285

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error in HtmlWebpackPlugin with latest alpha #3399

Error in HtmlWebpackPlugin with latest alpha #3399

bengry commented Apr 11, 2018 •

edited

Loading

igor-dv commented Apr 12, 2018

bengry commented Apr 12, 2018

igor-dv commented Apr 22, 2018

igor-dv commented Apr 23, 2018

bengry commented Apr 23, 2018

igor-dv commented Apr 23, 2018

Quramy commented Apr 24, 2018

igor-dv commented Apr 24, 2018

avol-io commented Apr 26, 2018

igor-dv commented Apr 26, 2018 •

edited

Loading

avol-io commented Apr 26, 2018 •

edited

Loading

stale bot commented May 17, 2018

Hypnosphi commented Jun 10, 2018

Error in HtmlWebpackPlugin with latest alpha #3399

Error in HtmlWebpackPlugin with latest alpha #3399

Comments

bengry commented Apr 11, 2018 • edited Loading

Bug or support request summary

Steps to reproduce

Please specify which version of Storybook and optionally any affected addons that you're running

Affected platforms

Screenshots / Screencast / Code Snippets (Optional)

Work summary

Where to start

Acceptance criteria

Who to contact

igor-dv commented Apr 12, 2018

bengry commented Apr 12, 2018

igor-dv commented Apr 22, 2018

igor-dv commented Apr 23, 2018

bengry commented Apr 23, 2018

igor-dv commented Apr 23, 2018

Quramy commented Apr 24, 2018

igor-dv commented Apr 24, 2018

avol-io commented Apr 26, 2018

igor-dv commented Apr 26, 2018 • edited Loading

avol-io commented Apr 26, 2018 • edited Loading

stale bot commented May 17, 2018

Hypnosphi commented Jun 10, 2018

bengry commented Apr 11, 2018 •

edited

Loading

igor-dv commented Apr 26, 2018 •

edited

Loading

avol-io commented Apr 26, 2018 •

edited

Loading