6

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?

anmatika
  • 1,581
  • 3
  • 21
  • 29

1 Answers1

5

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

Karl Taylor
  • 4,839
  • 3
  • 34
  • 62
Shubham Gupta
  • 2,596
  • 1
  • 8
  • 19
  • Thanks for reply. Indeed removing styled-components from devDepencies fixes the npm link issue. However, if it's only left in peerDependencies then I cannot run my package anymore standalone thus cannot test it. – anmatika Sep 21 '18 at 12:07
  • @RootNode for which I have suggested another solution use npm link --only=production – Shubham Gupta Sep 21 '18 at 12:08
  • I tried it, unfortunately, it didn't solve the problem, it ends up the same error. I guess that is supposed to be used in the module app, not in the consuming app. – anmatika Sep 21 '18 at 12:39
  • @RootNode what npm version are you on ? It will work only if version is above 5.1.0 https://github.com/npm/npm/issues/17631 check this once – Shubham Gupta Sep 21 '18 at 12:44
  • I'm using 6.4.1 – anmatika Sep 21 '18 at 13:26
  • Finally got it working. But instead of just using `npm link --only=production` *you should first remove `node_modules` from your module*. And then say `npm link --only=production`. If you want to edit your answer so that it says something like: "first remove `node_modules` and then say `npm link --only=production`". I can then accept it. Thank you. – anmatika Jan 10 '19 at 08:39