styled-components: Uncaught Error: Trying to insert a new style tag, but the given Node is unmounted!

okay basically i am creating a package that has styled-components(which i provided the package.jso and webpack configs) and when i link it to my project where i want to use it it gives me this error and warning, i have browesed online for a lot of hours and i have tried many fixes and nothing seems to fix it please help if you need any extra information let me know

`styled-components.browser.esm.js:155 Uncaught Error: Trying to insert a new style tag, but the given Node is unmounted!

Are you using a custom target that isn’t mounted?
Does your document not have a valid head element?
Have you accidentally removed a style tag manually?

at new StyledComponentsError (styled-components.browser.esm.js:155) at makeStyleTag (styled-components.browser.esm.js:540) at makeTag (styled-components.browser.esm.js:864) at StyleSheet.makeTag$$1 [as makeTag] (styled-components.browser.esm.js:1098) at StyleSheet.getTagForId (styled-components.browser.esm.js:1116) at StyleSheet.deferredInject (styled-components.browser.esm.js:1156) at new ComponentStyle (styled-components.browser.esm.js:2065) at createStyledComponent (styled-components.browser.esm.js:1894) at templateFunction (styled-components.browser.esm.js:2180) at Object…/src/ControlPanel/NotFoundPage.js (NotFoundPage.js:20) at webpack_require (bootstrap b220b8f802dd1a5c8b73:707) at fn (bootstrap b220b8f802dd1a5c8b73:112) at Object…/src/ControlPanel/index.js (index.js:352) at webpack_require (bootstrap b220b8f802dd1a5c8b73:707) at fn (bootstrap b220b8f802dd1a5c8b73:112) at Object…/src/App.js (App.css?9a66:26) at webpack_require (bootstrap b220b8f802dd1a5c8b73:707) at fn (bootstrap b220b8f802dd1a5c8b73:112) at Object…/src/index.js (index.css?f255:26) at webpack_require (bootstrap b220b8f802dd1a5c8b73:707) at fn (bootstrap b220b8f802dd1a5c8b73:112) at Object.0 (pathHelper.js:49) at webpack_require (bootstrap b220b8f802dd1a5c8b73:707) at …/react-components/dist/index.js.module.exports.parentHotUpdateCallback (bootstrap b220b8f802dd1a5c8b73:805) at bootstrap b220b8f802dd1a5c8b73:805`

and this warning

styled-components.browser.esm.js:2310 It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process and makes your application bigger without a good reason.

See https://s-c.sh/2BAXzed for more info.

usage

import exclamation from 'images/exclamation.svg';
import { TextStyle } from 'lavu-react-components';

const NotFoundContentWrapper = styled(ContentWrapper)`
  height: 100%;
  padding: 25px;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
`;

webpackv4

`const path = require('path');
const webpack = require('webpack');
const ROOT_DIR = path.resolve(__dirname, '../');
const SRC_DIR = path.resolve(ROOT_DIR, 'src');
module.exports = {
  entry: [
    'babel-polyfill',
    path.join(SRC_DIR, 'index'),
  ],
  externals: {
    'styled-components': {
      commonjs: 'styled-components',
      commonjs2: 'styled-components',
      amd: 'styled-components',
    },
  },
  resolve: {
    modules: [
      'src',
      'node_modules',
    ],
    extensions: ['.js'],
  },
  module: {
    rules: [
      // js
      {
        test: /\.css$/,
        include: /node_modules/,
        loader: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test: /\.js$/,
        exclude: [
          path.resolve(ROOT_DIR, 'node_modules'),
        ],
        use: 'babel-loader'
      },
      // images
      {
        test: /\.(png|ico|gif|svg|jpe?g)(\?[a-z0-9]+)?$/,
        use: 'url-loader',
      },
      // fonts
      { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      }
    }),
  ],
};`

packaje.json

"dependencies": {
    "codacy-coverage": "^3.0.0",
    "glamor": "^2.20.40",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "polished": "^1.9.2",
    "react-html-parser": "^2.0.2",
    "react-icons": "^2.2.7",
    "react-toastify": "^4.1.0",
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.3"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.3.12",
    "@storybook/addon-info": "^3.3.12",
    "@storybook/addon-knobs": "^3.3.12",
    "@storybook/addon-links": "^3.3.12",
    "@storybook/addon-notes": "^3.3.12",
    "@storybook/addons": "^3.3.12",
    "@storybook/react": "^3.4.10",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.2.2",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-airbnb": "^2.4.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-1": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "compression-webpack-plugin": "^2.0.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.1",
    "es6-promise": "^4.2.5",
    "eslint": "^4.17.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-standard": "^11.0.0-beta.0",
    "eslint-config-standard-react": "^5.0.0",
    "eslint-plugin-destructuring": "^2.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-node": "^6.0.0",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "exports-loader": "^0.7.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "flow-bin": "^0.64.0",
    "html-webpack-plugin": "^3.2.0",
    "imports-loader": "^0.8.0",
    "jest": "^22.2.2",
    "offline-plugin": "^5.0.5",
    "progress-bar-webpack-plugin": "^1.11.0",
    "prop-types": "^15.6.0",
    "react": "~16.3.2",
    "react-dom": "~16.3.2",
    "react-test-renderer": "^16.2.0",
    "react-transition-group": "^2.2.1",
    "storybook-addon-jsx": "^5.3.0",
    "storybook-readme": "^3.2.0",
    "styled-components": "^3.3.3",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "webpack": "^4.1.0",
    "webpack-bundle-analyzer": "^3.0.2",
    "webpack-cli": "^3.1.0",
    "webpack-merge": "^4.1.4"
  },
  "peerDependencies": {
    "react": "^16.2.0",
    "styled-components": "^3.3.3"
  },

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 25 (5 by maintainers)

Most upvoted comments

I was having this issue because of a Chrome extension. Disabling/removing "Loom - Video Recorder; extension solved the problem!.

+10

raoufswe on Dec 28, 2019

This drove me crazy for 2 days! Nothing here seemed to fix the issue, and it was only after trying to run my app in another browser that I realized something in Chrome was causing the error. I think an extension I was using had a duplicate version of styled-components. So if nothing her works, make sure it’s not your browser!

nicorobo on Nov 22, 2019

Maybe this is related, I was facing the same issue (only during jest tests were running while using npm link or yarn link to the local UI library package using styled-components. Yalc solved this problem for me.

Further debugging inside styled-components showed that the issue was not with it but with jest-runner module resolver. There is an open issue in jest related to this.

ahashem on Aug 23, 2019

@ivan-jorge001 I’m having the same issue, can you please explain in more details your solution? From what I understand, In your module you want to consume, you put styled-components as a devDependency and that you are using webpack external and consuming styled component as an external library using script tag. Am I correct? In addtion, can you put some code snippets of your solution? tnx.

urimlmd on Feb 18, 2019

I had it only in tests and only in one test file. found out it was jest.mock(“something”) so I restructured the mocks and all work well.

eladonline on Aug 17, 2021

I encountered this very same error in a very different way and managed to solve it after digging into it for 3 hours, so here is how I solved it:

If using @zeit next.js, remove the .next directory when running dev mode, stop and restart dev mode. This It will solve the issue.

This is my .babelrc file for those wondering:

{
    "presets": [
      "next/babel"
    ],
    "plugins": [
      ["styled-components", { "ssr": true,   "minify": true,  "displayName": false,  "pure": true }],
    ]
  }

nilportugues on Dec 28, 2018

Thank you @gmsorrow, your comment led me in the right direction.

I was using a package that had styled-components inside the dependencies instead of peerDependencies, following this helped me: https://www.styled-components.com/docs/faqs#duplicated-module-in-node_modules

rmolinamir on Aug 4, 2019

I had this same problem. Here’s how I fixed it.

I’m using yarn workspaces with three packages: two apps and one shared components library. The apps consume the shared components library, and all three packages use styled-components.

I solved the problem hoisting styled-components as a dependency into the root package.json and then listing styled-components as a peerDependency in each of the three packages’ package.json. After rebuilding my shared component library, everything worked.

rscotten on Oct 12, 2020

I was having this issue when using babel-plugin-styled-components - removing it solved the problem

melloc01 on Oct 10, 2019

This issue usually occurs when you have two instances of styled-components.

gmsorrow on Jul 9, 2019

Basically I want to make sure that styled-components is being marked as external when the library is built. If you look in “dist” or whatever it’s called, the styled-components code should not be in there, it should be require’d.

quantizor on Sep 17, 2018