0

在我的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",

在npm installon之后node_modules，@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并再次安装它，但错误仍然存​​在。我已经创建了一个新的空白反应项目，我只使用@my-company-repository/componentXPTO（没有@my-company-repository/componentXPTOon package.json）依赖并且它工作正常。

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

4

1 回答 1

0

我终于想通了。

最初，它似乎@my-company-repository/componentXPTO/node_modules/@my-company-repository/commonComponents导致了寻找reactat@my-company-repository/componentXPTO/node_modules/文件夹的问题。但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));

然后我添加了一个脚本package.json来运行这个新代码npm install：

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

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

于 2020-01-14T12:25:16.540 回答