styled-components: 3.2.2 broken in prod
Environment
System:
- OS: macOS High Sierra 10.13.3
- CPU: x64 Intel® Core™ i5-7360U CPU @ 2.30GHz
- Free Memory: 84.10 MB
- Total Memory: 16.00 GB
- Shell: /bin/zsh - undefined
Binaries:
- Node: 9.6.1
- Yarn: 1.3.2
- npm: 5.6.0
- Watchman: Not Found
npmPackages:
babel-plugin-styled-components:
- wanted: ^1.5.0
- installed: 1.5.0
styled-components:
- wanted: 3.2.2
- installed: 3.1.6
Reproduction
- building project with prod settings and run it
Steps to reproduce
there are different webpack plugins used between dev and prod environment:
dev
plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new webpack.DefinePlugin({ 'process.env.BROWSER': JSON.stringify(true), }), ]
prod
plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ uglifyOptions: { toplevel: true, }, }), new ExtractTextPlugin('css/[name].[hash].css'), new webpack.DefinePlugin({ 'process.env.BROWSER': JSON.stringify(true), }), ],
Expected Behavior
render SSR and rehydrate it on client
Actual Behavior
Curiously this only affects 3.2.2, 3.1.6 works as expected.
Dev build works as expected but in production build SSR goes through ok but client crashes with
Error at t.replaceElement (spa.d873bd565c92be9a4cf8.js:formatted:11892) at t.inject (spa.d873bd565c92be9a4cf8.js:formatted:11922) at e.inject (spa.d873bd565c92be9a4cf8.js:formatted:12020) at r.generateAndInjectStyles (spa.d873bd565c92be9a4cf8.js:formatted:12448) at r.t.generateAndInjectStyles (spa.d873bd565c92be9a4cf8.js:formatted:12537) at r.t.componentWillMount (spa.d873bd565c92be9a4cf8.js:formatted:12547) at mountClassInstance (spa.d873bd565c92be9a4cf8.js:formatted:22525) at beginWork (spa.d873bd565c92be9a4cf8.js:formatted:23102) at o (spa.d873bd565c92be9a4cf8.js:formatted:23931) at a (spa.d873bd565c92be9a4cf8.js:formatted:23954) at u (spa.d873bd565c92be9a4cf8.js:formatted:23978) at w (spa.d873bd565c92be9a4cf8.js:formatted:24220) at b (spa.d873bd565c92be9a4cf8.js:formatted:24199) at h (spa.d873bd565c92be9a4cf8.js:formatted:24140) at d (spa.d873bd565c92be9a4cf8.js:formatted:24117) at Object.updateContainer (spa.d873bd565c92be9a4cf8.js:formatted:24407) at spa.d873bd565c92be9a4cf8.js:formatted:24939 at Object.unbatchedUpdates (spa.d873bd565c92be9a4cf8.js:formatted:24311) at vn (spa.d873bd565c92be9a4cf8.js:formatted:24938) at Object.hydrate (spa.d873bd565c92be9a4cf8.js:formatted:26440) at r (spa.d873bd565c92be9a4cf8.js:formatted:21303) at o (spa.d873bd565c92be9a4cf8.js:formatted:15859) at <anonymous>
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 1
- Comments: 19 (9 by maintainers)
Alright i stand corrected, upon erasing whole node_modules and reinstalling whole repo from scratch, everything started working as expected. With no other change the act of moving the styled-components to peerDependencies on our lib module was the correct thing to do as it fixed the problem you foresaw in the beginning. 😄 i have no idea how could it happen that the styled-components was not visible (findable?) in the bundle-analyzer. Thanks for your time guys 👍