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

Question

我创建了自己的 npm 包（使用 nwb 创建），我在其中使用了样式组件。在我的消费应用程序中，我还使用了样式组件。

问题是。通过 npm install 安装我的 npm 包时一切正常。但是，当使用 npm link 进入其他一些 react-router 路由时会出现以下错误消息：

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?

在我的 npm 包中，我将 styled-components 设置为 peer dependency 和 devDependency，如下所示：

...
"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"
},
...

为什么 styled-components 在使用 npm link 时无法工作？

Answer 1

我认为这是因为您安装了两个 styled-components 实例。

因此删除 styled-components 作为 package.json 中的 devDependency 并尝试使用 $ npm link 或者如果你使用 npm > 5.1.0 尝试使用 npm link --only=production 这将排除开发依赖安装。

注意：运行$ npm link

前请删去node_modules

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

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

npm

reactjs

npm-link

styled-components