styled-components: Dynamic page loading failed Error: Trying to replace an element that wasn't mounted!

Version

styled-components: 2.1.1 babel-plugin-styled-components: 1.1.7

SSR is configured with code-splitting using react-boilerplate.
Some components are imported from an npm package which exports components styled with styled-components.

Error stack trace

Dynamic page loading failed Error: Trying to replace an element that wasn't mounted!
    at BrowserTag.replaceElement (eval at ./node_modules/styled-components/lib/models/BrowserStyleSheet.js (main.js:4034), <anonymous>:122:36)
    at BrowserTag.addComponent (eval at ./node_modules/styled-components/lib/models/BrowserStyleSheet.js (main.js:4034), <anonymous>:63:27)
    at StyleSheet.getOrCreateTag (eval at ./node_modules/styled-components/lib/models/StyleSheet.js (main.js:4058), <anonymous>:141:18)
    at StyleSheet.deferredInject (eval at ./node_modules/styled-components/lib/models/StyleSheet.js (main.js:4058), <anonymous>:94:10)
    at new ComponentStyle (eval at ./node_modules/styled-components/lib/models/ComponentStyle.js (main.js:4042), <anonymous>:38:39)
    at createStyledComponent (eval at ./node_modules/styled-components/lib/models/StyledComponent.js (main.js:4074), <anonymous>:238:26)
    at templateFunction (eval at ./node_modules/styled-components/lib/constructors/constructWithOptions.js (main.js:3986), <anonymous>:26:14)
    at eval (eval at ./app/pages/CustomerStory/Quote.js (main.js:1815), <anonymous>:8:3)
    at Object../app/pages/CustomerStory/Quote.js (main.js:1815)
    at __webpack_require__ (main.js:660)

Reproduction

I cannot reliably reproduce the error on webpackbin. Things I can reproduce:

If I remove CSS injection on the server the error goes away (initially page is loaded without styles).
Error happens only in some of the pages, but not in every page. However, when it happens, it usually happens consistently.
Error always points to the same component. If I change / rename the component, the error starts pointing to another component, but the stacktrace is the same.
Error sometimes points to the component, that is not even present on the page.
We’ve never encountered this error when using styled-components v1. It started occurring once we switched to v2 (without any other changes to the setup).

What I’ve tried

Fiddling with babel-plugin-styled-components options
- ssr on/off
- preprocess on/off

Any suggestion that could point to the possible culprit / solution would be greatly appreciated.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (7 by maintainers)

Commits related to this issue

Fix error "Trying to replace an element that wasn't mounted!" Occured when server side rendering any page other than index Fix found at: https://github.com/styled-components/styled-components/issues/... — committed to callumflack/vjray-strata by barryph 7 years ago
Fix error "Trying to replace an element that wasn't mounted!" Replicating B’s commit on Strata site: https://github.com/callumflack/vjray-strata/commit/103f62d70dda3f447fd85 b831556be4b518c4bc9 Occur... — committed to callumflack/vjray-group by callumflack 7 years ago
Work around bug in Styled Components v2 See the solution (and issue) here: https://github.com/styled-components/styled-components/issues/987#issuecomment-317839456 — committed to jesstelford/next.js by jesstelford 7 years ago
Fix styled-components depedency problem This is the relevant issue: https://github.com/styled-components/styled-components/issues/987 — committed to hellais/ooni-explorer-next by hellais 6 years ago
Ensure we always using the same version of styled-components For more context on this issue see: https://github.com/styled-components/styled-components/issues/987 — committed to ooni/explorer by hellais 6 years ago

Most upvoted comments

For anyone who googled and found this. I had a similar issue using redux-connect and styled-components on the server.

I was doing something very similar to @DeividasK

const sheet = new ServerStyleSheet();

const appHTML = renderToStaticMarkup(
  <StyleSheetManager sheet={sheet.instance}>
    <Provider store={store} key="provider">
      <ReduxAsyncConnect {...renderProps} />
    </Provider>
  </StyleSheetManager>
);

// capture the generated css
const css = sheet.getStyleElement();

const doc = renderToStaticMarkup(
  <HtmlDocument
    appMarkup={appHTML}
    css={css}
  />
);
res.send('<!DOCTYPE html>' + doc);

But on the client after the JS loads I would get an error Trying to replace an element that wasn't mounted! causing some css to be missing.

I was able to get rid of the error on the client by changing

const css = sheet.getStyleElement(); to const css = sheet.getStyleTags();

and in my HtmlDocument I changed it from

<head>
  {css}
</head>

<head>
  <style dangerouslySetInnerHTML={{ __html: css}} />
</head>

xiaolin on Jan 9, 2018

This can be caused by multiple styled-components instances used by different modules

with npm use npm dedupe with yarn add this to package.json with correct version and do yarn install after

"resolutions": {
  "styled-components": "your version"
}

Coobaha on Dec 25, 2017

@philpl old or not, I also ran into issue with the Next.js example and was able to fix them with @xiaolin’s tweak. Not trying to stir up shit but seems like other Next users might face similar issues.

jorilallo on Oct 25, 2017

@philpl turns out that the issue was with duplicated styled-components modules. One of the dependencies for our npm package was styled-components. Once I removed that from dependencies to devDependencies (also added to peerDependencies for the warnings) AND in webpack config specified it with externals

externals: {
    react: 'react',
    'react-dom': 'react-dom',
    'styled-components': 'styled-components',
  },

the issues have disappeared.

Simply removing it from dependencies did not help as it was necessary to specify it together with other external libraries.

I closed this issue, but I think it’s worth having a discussion if styled-components should somehow detect and prevent this from happening.

DeividasK on Jul 19, 2017