0.10.0 regression in create-react-app integration

[jeffposnick]

BEFORE YOU SUBMIT please read the following:

• I'm submitting a bug report

webpack version:
2.x

sw-precache-webpack-plugin version:
0.10.0

Please tell us about your environment:
OSX 10.x

We've been working on a create-react-app integration, tracked inhttps://github.com/facebook/create-react-app/pull/1728

facebook/create-react-app#1728 (comment) describes a regression when using v0.10.0+ of this plugin, in which the Webpack build process is run twice.

Looking at the change between v0.9.1 and v0.10.0, I guess the issue might have been triggered by something around here: https://github.com/goldhand/sw-precache-webpack-plugin/compare/v0.9.1...v0.10.0?ws=0#diff-1fdf421c05c1140f6d71444ea2b27638R68

But I don't know enough about Webpack to say for sure.

[hulkish]

@jeffposnick can you try this with v0.11? Also, if i pull that branch used for that pr will i be able to replicate it locally?

[jeffposnick]

Yes, the regression was introduced in v0.10.0, and I've been able to reproduce it in the subsequent versions, up to v0.11.0.

You should be able to reproduce by checking out this commit: https://github.com/jeffposnick/create-react-app/tree/f9b303aa038fedc79adc4ec6e6e94611ef2bae81

Then:

$ npm install && npm run build

[hulkish]

@jeffposnick hmm... I have seen this same issue myself progressively more and more lately. I am wondering if this issue is coming from within webpack itself? I'd have to dig to be sure.

In terms of timeline of the frequency I've seen this issue and how often webpack/sw-precache-webpack-plugin has done releases... It just points more toward webpack as the cause.

I mean, it seems plain as day to me that sw-precache-webpack-plugin isn't the likely cause here. You can see here that we are only doing a single operation once after-emit is applied.

Try cloning my fork here: https://github.com/hulkish/create-react-app/tree/bugtest

I added verbose webpack logging.. the issue now points closer to extract-text-webpack-plugin. For example, this is the very end of the log:

[16:45:19] Webpack (32%) - Build modules
[16:45:19] Webpack (71%) - Optimize modules (sealing)
[16:45:19] Webpack (72%) - Optimize modules (optimizing)
[16:45:19] Webpack (73%) - Optimize modules (basic module optimization)
[16:45:19] Webpack (74%) - Optimize modules (module optimization)
[16:45:19] Webpack (75%) - Optimize modules (advanced module optimization)
[16:45:19] Webpack (76%) - Optimize modules (basic chunk optimization)
[16:45:19] Webpack (77%) - Optimize modules (chunk optimization)
[16:45:19] Webpack (78%) - Optimize modules (advanced chunk optimization)
[16:45:19] Webpack (32%) - Build modules (~/dev/repos/create-react-app/packages/react-scripts/node_modules/extract-text-webpack-plugin/loader.js??ref--4-0!~/dev/repos/create-react-app/packages/react-scripts/node_modules/style-loader/index.js!~/dev/repos/create-react-app/packages/react-scripts/node_modules/css-loader/index.js??ref--4-2!~/dev/repos/create-react-app/packages/react-scripts/node_modules/postcss-loader/lib/index.js??postcss!~/dev/repos/create-react-app/packages/react-scripts/template/src/index.css)
[16:45:19] Webpack (32%) - Build modules (~/dev/repos/create-react-app/packages/react-scripts/node_modules/extract-text-webpack-plugin/loader.js??ref--4-0!~/dev/repos/create-react-app/packages/react-scripts/node_modules/style-loader/index.js!~/dev/repos/create-react-app/packages/react-scripts/node_modules/css-loader/index.js??ref--4-2!~/dev/repos/create-react-app/packages/react-scripts/node_modules/postcss-loader/lib/index.js??postcss!~/dev/repos/create-react-app/packages/react-scripts/template/src/App.css)
[16:45:19] Webpack (33%) - Build modules (~/dev/repos/create-react-app/packages/react-scripts/node_modules/extract-text-webpack-plugin/loader.js??ref--4-0!~/dev/repos/create-react-app/packages/react-scripts/node_modules/style-loader/index.js!~/dev/repos/create-react-app/packages/react-scripts/node_modules/css-loader/index.js??ref--4-2!~/dev/repos/create-react-app/packages/react-scripts/node_modules/postcss-loader/lib/index.js??postcss!~/dev/repos/create-react-app/packages/react-scripts/template/src/App.css)
[16:45:19] Webpack (33%) - Build modules
[16:45:19] Webpack (79%) - Optimize modules (module and chunk tree optimization)
[16:45:19] Webpack (80%) - Optimize modules (module reviving)
[16:45:19] Webpack (81%) - Optimize modules (module order optimization)
[16:45:19] Webpack (82%) - Optimize modules (module id optimization)
[16:45:19] Webpack (83%) - Optimize modules (chunk reviving)
[16:45:19] Webpack (84%) - Optimize modules (chunk order optimization)
[16:45:19] Webpack (85%) - Optimize modules (chunk id optimization)
[16:45:19] Webpack (86%) - Optimize modules (hashing)
[16:45:19] Webpack (87%) - Optimize modules (module assets processing)
[16:45:19] Webpack (88%) - Optimize modules (chunk assets processing)
[16:45:19] Webpack (89%) - Optimize modules (additional chunk assets processing)
[16:45:19] Webpack (90%) - Optimize modules (recording)
[16:45:19] Webpack (91%) - Optimize modules (additional asset processing)
[16:45:19] Webpack (92%) - Optimize modules (chunk asset optimization)
[16:45:23] Webpack (94%) - Optimize modules (asset optimization)
[16:45:23] Webpack (95%) - Emit files
Total precache size is about 161 kB for 4 resources.

[16:45:24] Webpack: Finished after 8.456 seconds.

[hulkish]

On another note.... I wonder if this could be solved in sw-precache-webpack-plugin by listening for emit instead of after-emit. Thoughts @goldhand ?

[goldhand]

The only thing I can think of is that I started using webpack's built in writeFile instead of nodejs fs here (because of #64).

Tomorrow morning I'll try switching to using fs again and also test @hulkish theory about emit/after-emit. I'll keep digging into this issue until I find a fix because it looks like its blocking the facebook/create-react-app#1728 pr.

Thanks for being so involved @hulkish, if you find anything or have any other ideas keep us posted 😄

[jeffposnick]

Re: create-react-app, the PR landed using v0.9.1. So it's not blocking anything, and thanks again for everyone's hard work in maintaining this plugin. It should be getting a significant uptick in usage soon 😄

[goldhand]

I'm having trouble reproducing the two webpack builds error discovered by @Timer facebook/create-react-app#1728 (comment)

I tried with / without dynamic chunks but still can't reproduce it with 0.11.0

[goldhand]

I think we want this latest version to be in cra btw, it supports webpack chunks.

[goldhand]

I think @hulkish is correct, this doesn't seem like a sw-precache-webpack-plugin issue. I have not been able to reproduce it yet.

[hulkish]

@goldhand actually, I've been able to reproduce it... be sure to check out the particular commit he mentioned:

git clone https://github.com/jeffposnick/create-react-app.git
cd create-react-app
git checkout f9b303aa038fedc79adc4ec6e6e94611ef2bae81

Then, you can see the effects of duplicated output by commenting/uncommenting the usage of sw-precache-wepack-plugin (which lives in packages/react-scripts)

While I agree that this points to this plugin as the cause, sure... However, I'm not quite convinced just yet.

[goldhand]

Ty @hulkish, I was using the facebook/create-react-app master branch. I don't see that problem there btw. Will test with jeffposnick's repo though