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)

Most upvoted comments

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 👍