Styled-components with npm link results in the error: "Trying to insert a new style tag, but the given Node is unmounted"

Question

I have created my own npm package (created with nwb) where I use styled-components. In my consuming app, I'm also using styled-components.

The problem is. Everything works fine when installing my npm package via npm install. However, when using npm link the following error message occurs when entering to some other react-router route:

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?

In my npm package I have set the styled-components as peer dependency and as devDependency as follows:

...
"peerDependencies": {
  "react": "16.x",
  "styled-components": "^3.4.4"
},
"devDependencies": {
  "karma-junit-reporter": "^1.2.0",
  "nwb": "0.23.x",
  "react": "^16.4.2",
  "react-dom": "^16.4.2",
  "styled-components": "^3.4.4"
},
...

Why styled-components fails to work when using npm link?

Answer 1

I think this is happening because you have two instances of styled-components installed.

Therefore removing styled-components as a devDependency in package.json and try using $ npm link or if you use npm > 5.1.0 try using npm link --only=production which would exclude dev dependencies installation.

Note: Please delete node_modules before running $ npm link