Deploying React app with npm run build not finding files - node.js

Question

I currently have a directory myproject/
In myproject I have these
/src
/public
package.json
etc.
Normal stuff you'd see in a react app.
I pushed this to a server aws lightsail nodejs
I then run npm install.
After I do all this I go and run npm run build
I get this output:
> 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.
The files it's calling for are in the directory.
Here is 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"
}
}
Any idea what's going on with this?

Answer 1

The problem was related to the way I was using my import paths for components.
In example, currently I have:
import UserHeader from "components/Headers/UserHeader.jsx";
The correct way to have set them was:
import UserHeader from "../../components/Headers/UserHeader.jsx";
What was throwing me off was that locally it worked.