React - 导入依赖项依赖于另一个已经存在的依赖项时出错 package.json

Question

在我的 package.json 上，我有这些依赖项：

"dependencies": {
    "@my-company-repository/componentXPTO": "19.8.5",
    "@my-company-repository/commonComponents": "18.0.2", 
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-view-model": "^1.0.1",
    "react-virtualized": "9.21.0",
    "react-virtualized-tree": "3.1.0",
    "steal": "^2.1.11",

在 node_modules 上的 npm install 之后，@my-company-repository/componentXPTO 显示具有这些依赖项：

"bundleDependencies": false,
"deprecated": false,
"peerDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
},
"dependencies": {
    "@my-company-repository/commonComponents": "^17.44.6",
    "react-redux": "^5.1.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.1.1",
    "redux": "^4.0.4",

和@my-company-repository/commonComponents有这些：

"peerDependencies": {
    "react": "16.12.0",
    "react-dom": "16.12.0"
},

注意：我需要 @my-company-repository/componentXPTO 和 @my-company-repository/commonComponents。

然后我在我想使用的地方创建了这个组件@my-company-repository/componentXPTO:

import React, { Component } from "react";
import FancyComponent from '@my-company-repository/componentXPTO';

class MyComponentWithFancyC extends Component {
  render() {
    return (
      <div className="my-container">
        <span>some text</span>
      </div>
    );
  }
}

export default MyComponentWithFancyC;

如果我注释 import FancyComponent from '@my-company-repository/componentXPTO' 行，一切正常。但是如果我保留那条线，当我在浏览器上访问我的新组件时，我会收到这个红色错误：

steal.js:7348 Error: Unable to parse package.json for [react]
Unexpected token < in JSON at position 0

   1 | <!DOCTYPE html>
   2 | <html>
   3 |   <head lang="en">
   4 |     <meta charset="utf-8"/>
   5 |     <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
   6 |     <link rel="icon" href="images/favicon.ico" type="image/x-icon"/>
   7 |     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
   8 |     <title>My Application</title>
   9 |     <style>
  10 |       .app-loading-spinner {
  11 |         background: url(./src/main/static/images/spinner.gif);
  12 |         height: 32px;
  13 |         width: 32px;
  14 |         position: fixed;
  15 |         top: 50%;
  16 |         left: 50%;
  17 |         z-index: 999999999;
  18 |       }
  19 | 
  20 |       .app-loading-spinner-container {
  21 |         position: fixed;
  22 |         top: 0;
  23 |         left: 0;
  24 |         height: 100%;
  25 |         width: 100%;
  26 |         background-color: rgba(255, 255, 255, 0.3);
  27 |         z-index: 999999999;
  28 |       }
  29 | 
  30 |       .hide-transition {
  31 |         -moz-transition: opacity 1s ease-in-out;
  32 |         -webkit-transition: opacity 1s ease-in-out;
  33 |         transition: opacity 1s ease-in-out;
  34 |         opacity: 0;
  35 |       }
  36 | 
  37 |       body {
  38 |         background-color: #d8dae0;
  39 |         height: 100%;
  40 |         margin: 0;
  41 |       }
  42 | 
  43 |       html {
  44 |         height: 100%;
  45 |       }
  46 | 
  47 |       div.browser-not-supported {
  48 |         width: 100%;
  49 |         text-align: center;
  50 |         padding-top: 100px;
  51 |         font-size: x-large;
  52 |         font-family: sans-serif;
  53 |       }
  54 |     </style>
  55 |   </head>
  56 |   <body>
  57 |     <div class="app-loading-spinner-container">
  58 |       <div class="app-loading-spinner">
  59 |       </div>
  60 |     </div>
  61 |     <div id="app" class="app"></div>
  62 |     <script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
  63 |     <script src="./browser-conditional-renderer.js" environment="DEVELOPMENT"></script>
  64 | 
  65 |     <!-- Company Session Management -->
  66 |     <link rel="stylesheet" type="text/css" href="/sessionmanagement-web/css/sessionmanagement.css">
  67 |     <script type="text/javascript" src="/sessionmanagement-web/js/ApplicationSupervision.js"></script>
  68 |   </body>
  69 | </html>
  70 | 

    at parse (node_modules/@my-company-repository/componentXPTO/node_modules/react/package.json:0)

有人知道问题出在哪里吗？

我已经删除了node_modules并重新安装，但错误依旧。我已经创建了一个新的空白 React 项目，我只使用 @my-company-repository/componentXPTO（在 package.json 上没有 @my-company-repository/componentXPTO）依赖项并且它工作正常。

我不知道如何解决这个问题...

Answer 1

终于想通了

最初似乎 @my-company-repository/componentXPTO/node_modules/@my-company-repository/commonComponents 导致在 @my-company-repository/componentXPTO/node_modules/ 文件夹中查找 react 时出现问题。但是 react 在那里不存在，因为它是 peerDependency。

所以我需要通过 StealJS 重新映射它。为此，在我的 package.json 中我添加了一个 StealJS 配置：

"steal": {
    "paths": {
      "@my-company-repository/componentXPTO/node_modules/react/*": "node_modules/react/*.js",
      "@my-company-repository/componentXPTO/node_modules/react-dom/*": "node_modules/react-dom/*.js"
    }

在那之后出现了一些其他问题，但是因为有一个依赖项也是另一个依赖项的依赖项。所以我从另一个依赖项中删除了那个依赖项。为此，我使用以下代码在我的根文件夹中创建了一个 postInstall.js 文件：

const pj = __dirname + "/node_modules/@my-company-repository/componentXPTO/package.json";
const contents = fs.readFileSync(pj);
const pkg = JSON.parse(contents);
delete pkg.dependencies["@my-company-repository/commonComponents"];
fs.writeFileSync(pj, JSON.stringify(pkg));

然后我在 npm install:

之后添加了一个脚本到我的 package.json 到运行这个新代码

"scripts": {
    "install": "node postInstall"

现在 @my-company-repository/componentXPTO 显示具有这些依赖项：

"bundleDependencies": false,
"deprecated": false,
"peerDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
},
"dependencies": {
    "react-redux": "^5.1.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.1.1",
    "redux": "^4.0.4",

而这个的其他依赖项在我的项目 node_modules 文件夹中查找 react。

React - 导入依赖项依赖于另一个已经存在的依赖项时出错 package.json

React - Error when import dependency that depends from another already on package.json

reactjs

npm

dependencies

circular-dependency

stealjs