Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:19 (7 by maintainers)

github_iconTop GitHub Comments

9reactions
xiaolincommented, Jan 9, 2018

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>

to

<head>
  <style dangerouslySetInnerHTML={{ __html: css}} />
</head>
5reactions
Coobahacommented, Dec 25, 2017

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"
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Dynamic page loading failed Error: Trying to replace an element that ...
Dynamic page loading failed Error : Trying to replace an element that wasn't mounted!
Read more >
Only on Firefox "Loading failed for the <script> with source"
I just had the same issue on an application that is loading a script with a relative path. It appeared the script was...
Read more >
Browser automation actions reference - Power Automate
Element with specified CSS selector not found, Indicates that a web page element with the specified CSS selector wasn't found ; Failed to...
Read more >
Routing in Next.js – How to Set Up Dynamic Routing with Pre ...
fallback set to true doesn't automatically lead to a 404 error page whenever the user tries to access a path that doesn't exist...
Read more >
How to Fix "Content Area Was Not Found in Your Page" Error
If this is happening on a new page you are trying to create, go to your WP Admin > Settings > Permalinks section,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Node of type rule not supported as an inline style

Next page

More meaningful/semantic class names during development