diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c2f8cc813f3..df7ca5fac79 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -412,6 +412,10 @@ module.exports = { }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. new ExtractTextPlugin({ + // Turning this on because we want all css to be included in the main + // css bundle when doing code splitting to avoid FOUC: + // https://github.com/facebook/create-react-app/issues/2415 + allChunks: true, filename: cssFilename, }), // Generate a manifest file which contains a mapping of all asset filenames diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index 06ec83602f3..3d5bec4d575 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -17,8 +17,10 @@ describe('Integration', () => { doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') ).to.match(/html\{/); expect( - doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') + doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') ).to.match(/#feature-css-inclusion\{background:.+;color:.+}/); + // we expect to only have one style tag when allChunks: true + expect(doc.getElementsByTagName('style').length).to.equal(1); }); it('css modules inclusion', async () => {