menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Error when using npm link to test my module which uses styled-components. It…

September 20, 2018 at 7:30am

Error when using npm link to test my module which uses styled-components. It results in the error: “Trying to insert a new style tag, but the given Node is unmounted”

September 20, 2018 at 7:30am (Edited 9 months ago)

I have created a npm module (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 module via npm install. However, when using npm link the following error message occurs when entering to some other react-router route. What would be the problem?

Dependencies of my module:

...
"dependencies": {
"@fortawesome/fontawesome": "^1.1.3",
"@fortawesome/fontawesome-free-solid": "^5.0.6",
"@fortawesome/react-fontawesome": "^0.0.17",
"classnames": "^2.2.6",
"font-awesome": "^4.7.0",
"polished": "^2.0.0",
"reactstrap": "^6.4.0"
},
"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"
},
...

March 14, 2019 at 8:03am

Hi @anmatika, I have the same issue right now. Have you ever resolved it? Thanks for your help.

  • reply
  • like

March 15, 2019 at 2:50am

I'd recommend using aliases for now because npm/yarn link doesn't play nicely at the moment! Check out these two threads as they sound similar to your issue:

https://github.com/styled-components/styled-components/issues/2435

https://github.com/styled-components/styled-components/issues/2432

  • reply
  • like

March 19, 2019 at 8:05pm

Thanks, seems like this could resolve our issue. I'll check.

  • reply
  • like

June 7, 2019 at 5:51am

Hi @natterstefan did you manage to fix this issue, because I can't seem to find a solution!

  • reply
  • like

June 17, 2019 at 5:47am

Hi @martin-ratinaud, we ended up using webpack's alias and not the yarn/npm link.

  • reply
  • like

Thanks for the info @natterstefan. but I'm using create react app and do not want to eject....

  • reply
  • like