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
?
I think this is happening because you have two instances of
styled-components
installed.Therefore removing
styled-components
as a devDependency inpackage.json
and try using$ npm link
or if you use npm > 5.1.0 try usingnpm link --only=production
which would exclude dev dependencies installation.Note: Please delete
node_modules
before running$ npm link