使用 npm run build 部署 React 应用程序未找到文件

Question

我目前有一个目录myproject/在 myproject 我有这些

/src
/public
package.json

等等。你会在反应应用程序中看到的普通东西。 我将其推送到服务器aws lightsail nodejs ，然后运行 ​​npm install。 在我完成所有这些之后，我去运行npm run build

我得到这个输出：

> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/index.js

Cannot find module: 'layouts/Admin.jsx'. Make sure this package is installed.

You can install this package by running: npm install layouts/Admin.jsx.

它调用的文件在目录中。 这是 package.json

{
  "name": "argon-dashboard-react",
  "version": "1.0.0",
  "description": "React version of Argon Dashboard by Creative Tim",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/creativetimofficial/argon-dashboard-react.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "argon",
    "argon-react",
    "dashboard",
    "dashboard-react",
    "argon-dashboard",
    "argon-dashboard-react"
  ],
  "author": "Creative Tim",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/creativetimofficial/argon-dashboard-react/issues"
  },
  "homepage": "https://demos.creative-tim.com/argon-dashboard-react/",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "compile-sass": "node-sass src/assets/scss/argon-dashboard-react.scss src/assets/css/argon-dashboard-react.css",
    "minify-sass": "node-sass src/assets/scss/argon-dashboard-react.scss src/assets/css/argon-dashboard-react.min.css --output-style compressed",
    "map-sass": "node-sass src/assets/scss/argon-dashboard-react.scss src/assets/css/argon-dashboard-react.css --source-map true"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "dependencies": {
    "@material-ui/core": "^4.6.1",
    "@material-ui/icons": "^4.5.1",
    "chart.js": "2.7.3",
    "classnames": "2.2.6",
    "firebase": "^6.6.2",
    "firebase-admin": "^8.8.0",
    "http2": "^3.3.7",
    "moment": "2.24.0",
    "node-sass": "4.11.0",
    "nouislider": "13.1.1",
    "react": "16.9.0",
    "react-bootstrap-table-next": "^3.2.1",
    "react-chartjs-2": "2.7.4",
    "react-copy-to-clipboard": "5.0.1",
    "react-data-table-component": "4.0.1",
    "react-datepicker": "^2.9.6",
    "react-datetime": "2.16.3",
    "react-dom": "16.9.0",
    "react-google-maps": "9.4.5",
    "react-loading-screen": "0.0.17",
    "react-router-dom": "4.3.1",
    "react-scripts": "2.1.8",
    "reactstrap": "7.1.0",
    "recompose": "^0.30.0",
    "styled-components": "^4.4.1",
    "sweetalert2": "^9.5.4",
    "sweetalert2-react-content": "^2.0.2"
  },
  "devDependencies": {
    "@types/googlemaps": "3.30.18",
    "@types/markerclustererplus": "2.1.33",
    "@types/react": "16.8.7",
    "typescript": "3.3.3333"
  }
}

知道这是怎么回事吗？

Answer 1

问题与我使用组件导入路径的方式有关。 例如，目前我有：

import UserHeader from "components/Headers/UserHeader.jsx";

设置它们的正确方法是：

import UserHeader from "../../components/Headers/UserHeader.jsx";

让我失望的是它在本地有效。