I'm attempting to deploy my MERN stack on an ec2 Ubuntu instance. Everything worked until I installed my project dependencies. My project worked fine in my local but for some reason, I can't fix the dependency issue in the instance (prod):
sudo yarn build
yarn run v1.22.5
$ react-scripts build
Creating an optimized production build...
Failed to compile.
Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/lib/rules/no-unused-expressions'
Require stack:
- /var/www/ubunturadiumlaw/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js
- /var/www/ubunturadiumlaw/node_modules/eslint-plugin-flowtype/dist/index.js
- /var/www/ubunturadiumlaw/node_modules/#eslint/eslintrc/lib/config-array-factory.js
- /var/www/ubunturadiumlaw/node_modules/#eslint/eslintrc/lib/index.js
- /var/www/ubunturadiumlaw/node_modules/react-scripts/node_modules/eslint/lib/cli-engine/cli-engine.js
- /var/www/ubunturadiumlaw/node_modules/react-scripts/node_modules/eslint/lib/cli-engine/index.js
- /var/www/ubunturadiumlaw/node_modules/react-scripts/node_modules/eslint/lib/api.js
- /var/www/ubunturadiumlaw/node_modules/eslint-webpack-plugin/dist/getESLint.js
- /var/www/ubunturadiumlaw/node_modules/eslint-webpack-plugin/dist/linter.js
- /var/www/ubunturadiumlaw/node_modules/eslint-webpack-plugin/dist/index.js
- /var/www/ubunturadiumlaw/node_modules/eslint-webpack-plugin/dist/cjs.js
- /var/www/ubunturadiumlaw/node_modules/react-scripts/config/webpack.config.js
- /var/www/ubunturadiumlaw/node_modules/react-scripts/scripts/build.js
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I tried to install the dependency individually, with npm, with yarn, and apt-get nothing worked.
Here's my package.json file:
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.1",
"#popperjs/core": "^2.5.3",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"algoliasearch": "^4.5.1",
"algoliasearch-helper": "^3.2.2",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"bootstrap": "^4.5.3",
"brew": "0.0.8",
"compression": "^1.7.4",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-react": "^7.21.5",
"express": "^4.17.1",
"file-system": "^2.2.2",
"flowtype": "^2.0.0",
"git": "^0.1.5",
"gridfs-stream": "^1.1.1",
"helmet": "^4.1.1",
"https-localhost": "^4.6.3",
"instantsearch.css": "^7.4.5",
"jquery": "^3.5.1",
"method-override": "^3.0.0",
"mongodb": "^3.5.9",
"mongoose": "^5.9.20",
"multer": "^1.4.2",
"multer-gridfs-storage": "^4.2.0",
"node-json-db": "^1.1.0",
"node-sass": "^4.14.1",
"nodemon": "^2.0.4",
"popper.js": "^1.16.1",
"react": "^17.0.1",
"react-autosuggest": "^10.0.2",
"react-bootstrap": "^1.3.0",
"react-create-app": "^2.0.6",
"react-dom": "^17.0.1",
"react-instantsearch-dom": "^6.7.0",
"react-router-dom": "^5.1.2",
"react-scripts": "4.0.0",
"react-tappable": "^1.0.4",
"react-toastify": "^6.0.4",
"rfs": "^9.0.3",
"serve": "^11.3.2",
"typescript": "^4.0.5",
"web-vitals": "^0.2.4",
"yarn": "^1.22.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}, "eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
What is wrong?
Ec2 Ubuntu 20.04
Using Node.js as Server
React
Mongo
Related
I am writing a test website using ReactJs & Node for a class and am having difficulties running tests.
I have tried reinstalling packages via npm install. Upgrading and downgrading to certain versions of "testing-library" but that leads to more failed tests ive tried installing npm i helpers/helper
This is my package.json
{
"name": "landingpage-react-template",
"private": true,
"dependencies": {
"#testing-library/react": "^9.3.2",
"axios": "^0.27.2",
"bcrypt": "^5.0.1",
"bcryptjs": "^2.4.3",
"cors": "^2.8.5",
"database.js": "^0.0.1",
"detect-file": "^1.0.0",
"detect-libc": "^2.0.1",
"emailjs-com": "^2.6.4",
"express": "^4.18.1",
"express-fileupload": "^1.4.0",
"express-handlebars": "^6.0.6",
"multer": "^1.4.5-lts.1",
"mv": "^2.1.1",
"mysql": "^2.18.1",
"mysql2": "^2.3.3",
"nodemailer": "^6.8.0",
"react": "^17.0.1",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.1",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-youtube": "^9.0.1",
"sequelize": "^6.23.2",
"sequelize-cli": "^6.5.1",
"smooth-scroll": "^16.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/user-event": "^14.4.3",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"enzyme": "^3.11.0"
}
}
And this is the error im getting after running npm test
FAIL src/pages/components/resetPasswordPage/resetPasswordComponent.test.jsx
● Test suite failed to run
Cannot find module '#testing-library/dom/dist/helpers.js' from 'node_modules/#testing-library/user-event/dist/cjs/utils/misc/getWindow.js'
Require stack:
node_modules/#testing-library/user-event/dist/cjs/utils/misc/getWindow.js
node_modules/#testing-library/user-event/dist/cjs/utils/dataTransfer/Clipboard.js
node_modules/#testing-library/user-event/dist/cjs/event/behavior/click.js
node_modules/#testing-library/user-event/dist/cjs/event/dispatchEvent.js
node_modules/#testing-library/user-event/dist/cjs/document/prepareDocument.js
node_modules/#testing-library/user-event/dist/cjs/setup/setup.js
node_modules/#testing-library/user-event/dist/cjs/setup/index.js
node_modules/#testing-library/user-event/dist/cjs/index.js
src/pages/components/resetPasswordPage/resetPasswordComponent.test.jsx
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
at Object.<anonymous> (node_modules/#testing-library/user-event/dist/cjs/utils/misc/getWindow.js:5:18)
#testing-library/dom is a peer dependency of user-event and needs to be installed separately in your project.
I am using a react dashboard template from themeforest. Here is the package.json content:
{
"name": "acorn-react",
"version": "1.0.1",
"private": true,
"proxy": "http://localhost:3000",
"dependencies": {
"#emoji-mart/data": "^1.0.2",
"#fullcalendar/bootstrap": "^5.9.0",
"#fullcalendar/daygrid": "^5.9.0",
"#fullcalendar/interaction": "^5.9.0",
"#fullcalendar/react": "^5.9.0",
"#fullcalendar/timegrid": "^5.9.0",
"#glidejs/glide": "^3.4.1",
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"#yaireo/tagify": "^4.12.0",
"autosuggest-trie": "^2.1.1",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"chart.js": "^3.5.1",
"chartjs-adapter-luxon": "^1.0.0",
"chartjs-plugin-crosshair": "^1.2.0",
"chartjs-plugin-datalabels": "^2.0.0",
"chartjs-plugin-streaming": "^2.0.0",
"clamp-js": "^0.7.0",
"classnames": "^2.3.1",
"date-fns": "^2.22.1",
"emoji-mart": "3.0",
"formik": "^2.2.9",
"fuse.js": "^6.4.6",
"intro.js": "^4.2.2",
"intro.js-react": "^0.5.0",
"luxon": "^2.0.1",
"overlayscrollbars": "^1.13.1",
"overlayscrollbars-react": "^0.2.3",
"pixabay-api": "^1.0.4",
"plyr-react": "^3.0.8",
"quill": "^1.3.7",
"rc-slider": "^9.7.2",
"react": "^16.13.0",
"react-autosuggest": "^10.1.0",
"react-bootstrap": "^2.0.0-rc.0",
"react-circular-progressbar": "^2.0.4",
"react-contexify": "^5.0.0",
"react-countdown": "^2.3.2",
"react-datepicker": "^4.1.1",
"react-datetime": "^3.1.1",
"react-dom": "^16.13.0",
"react-dropzone-uploader": "^2.11.0",
"react-flow-renderer": "^9.6.2",
"react-fuzzy-highlighter": "^1.0.0",
"react-helmet": "^6.1.0",
"react-hook-mousetrap": "^2.0.4",
"react-image-lightbox": "^5.1.4",
"react-intl": "^5.20.2",
"react-masonry-css": "^1.0.16",
"react-number-format": "^4.6.4",
"react-paginate": "^8.1.3",
"react-rating": "^2.0.5",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-select": "^4.3.1",
"react-simple-maps": "^3.0.0",
"react-slick": "^0.29.0",
"react-sortablejs": "^6.0.0",
"react-syntax-highlighter": "^15.4.4",
"react-table": "^7.7.0",
"react-tag-autocomplete": "^6.2.0",
"react-tenor": "^2.2.0",
"react-toastify": "^7.0.4",
"react-tooltip": "^4.2.21",
"react-world-flags": "^1.5.0",
"redux-undo": "^1.0.1",
"reduxjs-toolkit-persist": "^7.0.1",
"slick-carousel": "^1.8.1",
"sortablejs": "^1.14.0",
"web-vitals": "^0.2.4",
"yup": "^0.32.9"
},
"scripts": {
"start-js": "react-scripts start --dev",
"start-css": "sass --style=compressed --watch
src/sass/styles.scss:public/css/styles.css",
"start": "concurrently \"npm run start-js\" \"npm run start-css\"",
"build-js": "react-scripts build --prod",
"build-css": "sass --style=compressed --no-source-map
src/sass/styles.scss:public/css/styles.css",
"build": "concurrently \"npm run build-css\" \"npm run build-js\"",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint ./src/**/*.js",
"lint:fix": "eslint ./src --fix",
"precommit": "lint-staged",
"concurrently": "concurrently"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write",
"git add"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^4.1.0",
"concurrently": "^6.2.0",
"eslint": "^7.28.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"prettier": "2.3.1",
"sass": "^1.42.1"
}
}
After I run npm start, it takes about a minute or two until I see Starting the development server and localhost starts loading in browser. And then it takes about 30 minutes until the page is loaded. (Yes 30 minutes!) . I know that the list of dependency is quite long but still I expect it to start in maximum 5 minutes. I have searched a lot for similar issues and tried to apply the suggested solutions:
Allocated more memory: --max_old_space_size=4096
Updated nodejs and npm
Closed all browser tabs before starting the app
Notes:
When I ran npm install there were dependency errors, so I had to do npm install --force
I am running this on Windows 10 , my pc has 8GB of RAM.
Thanks to everyone who will help!
I think the problem is not with the package.json. the problem is you have something that makes it slower, which is the package prettier, the same thing happened to me, the problem was the prettier package that made my app slow by taking too much time in analyzing the format and makes the format better according to the language, so this process takes times, having too much files and prettier checks all of the file again and again, the more files you have the more time it will take. So i recommend removing prettier. You can just download a vscode extension of prettier that does the job better.
npm start is working fine but when I am trying to build with npm run build, compilation failed with this error
Creating an optimized production build...
Failed to compile.
The 'compilation' argument must be an instance of Compilation
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#nivo/radar": "^0.62.0",
"#stripe/react-stripe-js": "^1.7.0",
"#stripe/stripe-js": "^1.22.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.47",
"#types/react": "16.9.23",
"#types/react-bootstrap": "^0.32.28",
"#types/react-dom": "16.9.8",
"#types/react-router-dom": "^5.1.5",
"#types/uuid": "^8.0.0",
"antd": "^4.4.0",
"availity-reactstrap-validation": "^2.7.1",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.19.2",
"bootstrap": "^5.1.3",
"classnames": "^2.2.6",
"customize-cra": "^1.0.0",
"feather-icons-react": "^0.4.3",
"js-cookie": "^2.2.1",
"less": "^3.11.3",
"less-loader": "^6.2.0",
"lodash": "^4.17.20",
"mini-css-extract-plugin": "^2.4.5",
"mobx": "^5.15.4",
"mobx-react": "^6.2.2",
"mobx-react-lite": "^2.0.7",
"moment": "^2.27.0",
"react": "16.13.1",
"react-app-rewired": "^2.1.6",
"react-countup": "^4.3.3",
"react-device-detect": "^1.13.1",
"react-dom": "16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.0",
"react-svg": "^11.0.29",
"reactstrap": "^9.0.1",
"recharts": "^1.8.5",
"sass": "^1.45.0",
"source-map-loader": "^3.0.0",
"tar": "^6.1.11",
"typescript": "^3.7.5",
"uuid": "^8.2.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^3.5.0",
"#typescript-eslint/parser": "^3.5.0",
"babel-plugin-import": "^1.13.0",
"eslint-config-prettier": "^6.11.0",
"eslint-config-react": "^1.1.7",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "^2.0.5"
},
"resolutions": {
"**/react": "16.9.0",
"**/react-dom": "16.9.0"
}
}
I am using Typescript
node version: v16.13.1
npm version: 8.1.2
I was working on a react project and suddenly this error occurred saying,
Failed to compile
../node_modules/react-dom/lib/ReactMount.js
Module not found: Can't resolve 'react/lib/React' in 'C:\Users\Angelin\ecom\node_modules\react-dom\lib'
package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.0.0",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"antd": "^4.11.2",
"axios": "^0.21.1",
"firebase": "^8.2.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-toastify": "^7.0.2",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"body-parser": "^1.19.0",
"bootstrap": "^4.6.0",
"cloudinary": "^1.25.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-jwt": "^6.0.0",
"firebase-admin": "^9.4.2",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.11.14",
"morgan": "^1.10.0",
"multiscroll-reactjs": "^1.0.2",
"nodemon": "^2.0.7",
"react-awesome-button": "^6.5.1",
"react-bootstrap": "^1.5.2",
"react-device-detect": "^1.17.0",
"react-image-file-resizer": "^0.4.2",
"react-multi-carousel": "^2.6.2",
"react-responsive-carousel": "^3.2.13",
"react-star-ratings": "^2.3.0",
"slugify": "^1.4.6",
"typewriter-effect": "^2.17.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Please let me know what I should do
This seems to be a problem of installation of packages at first glance.
You can try removing node_modules folder and install all packages again with npm install or yarn install.
If this does not work then you can refer this post
I have a weird error since today, for no apparent reasons, i get this message in the back-end terminal whenever I try to launch my back-end and front-end :
"GET /main.e4d789223cfc4d592f75.hot-update.js 404 3.707 ms - 289"
It just loops indefinitely and I can't access my app anymore.
Weirdly also, it worked completely fine before, and it appeared without me touching anything in npm, proxys or back-end.
I tried to look up online but there are no useful answers.
Here My package.json server-side
{
"name": "workfromhome",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"heroku-postbuild": "cd reactapp && npm install && npm run build"
},
"dependencies": {
"cloudinary": "^1.23.0",
"cookie-parser": "~1.4.4",
"crypto-js": "^4.0.0",
"debug": "~2.6.9",
"dotenv": "^8.2.0",
"ejs": "~2.6.1",
"express": "~4.16.1",
"express-fileupload": "^1.2.0",
"force-ssl-heroku": "^1.0.2",
"http-errors": "~1.6.3",
"mongoose": "^5.10.13",
"morgan": "~1.9.1",
"node-mailjet": "^3.3.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.7.1",
"stripe": "^8.122.1",
"sync-request": "^6.1.0",
"uid2": "0.0.3"
}
}
And my package.json front
"name": "reactapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/colors": "^5.0.0",
"#ckeditor/ckeditor5-build-classic": "^23.1.0",
"#ckeditor/ckeditor5-react": "^3.0.0",
"#craco/craco": "^5.8.0",
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#fortawesome/react-fontawesome": "^0.1.12",
"#stripe/stripe-js": "^1.11.0",
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.1",
"#testing-library/user-event": "^12.2.0",
"antd": "^4.8.2",
"aos": "^2.3.4",
"cloudinary": "^1.23.0",
"craco-less": "^1.17.0",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"node-fetch": "^2.6.1",
"puppeteer": "^5.5.0",
"react": "^17.0.1",
"react-animated-css": "^1.2.1",
"react-dom": "^17.0.1",
"react-html-parser": "^2.0.2",
"react-loader-spinner": "^3.1.14",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-slick": "^0.27.13",
"react-sticky": "^6.0.3",
"react-sticky-box": "^0.9.3",
"react-typical": "^0.1.3",
"redux": "^4.0.5",
"slick-carousel": "^1.8.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3000/",
"secure": false,
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Ok, its working now. I just restarted Visual Studio. Thank you