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.
Related
I'm getting errors in the app which I cannot help myself with fixing it. What might be the reason of 2 below errors? There are similar, the root-directory of them differs.
TypeError: C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\src\pages\cv-list\list\list.js: (0 , _genMapping.maybeAddMapping) is not a function
ERROR in ./src/pages/cv-list/list/list.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\src\pages\cv-list\list\list.js: (0 , _genMapping.maybeAddMapping) is not a function
at SourceMap.mark (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\source-map.js:49:37)
at Buffer._mark (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\buffer.js:142:60)
at Buffer._append (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\buffer.js:121:12)
at Buffer.append (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\buffer.js:82:10)
at Generator._append (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\printer.js:192:52)
at Generator.word (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\printer.js:100:10)
at Generator.VariableDeclaration (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\generators\statements.js:296:8)
at C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\printer.js:309:19
at Buffer.withSource (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\buffer.js:212:5)
Failed to compile.
TypeError: C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\src\pages\cv-list\list\list.js: (0 , _genMapping.maybeAddMapping) is not a function
ERROR in ./src/pages/cv-list/list/list.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\src\pages\cv-list\list\list.js: (0 , _genMapping.maybeAddMapping) is not a function
at SourceMap.mark (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\source-map.js:49:37)
at Buffer._mark (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\buffer.js:142:60)
at Buffer._append (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\buffer.js:121:12)
at Buffer.append (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\buffer.js:82:10)
at Generator._append (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\printer.js:192:52)
at Generator.word (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\printer.js:100:10)
at Generator.VariableDeclaration (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\generators\statements.js:296:8)
at C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\printer.js:309:19
at Buffer.withSource (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\buffer.js:212:5)
at Generator.withSource (C:\Users\marci\OneDrive\Pulpit\300B\BDB\bdb-front\node_modules\#babel\generator\lib\printer.js:176:15)
Just in case, here is my package.json
{
"name": "bdb-front",
"version": "0.1.0",
"private": true,
"dependencies": {
"#progress/kendo-date-math": "^1.5.7",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.39",
"#types/react": "^18.0.12",
"#types/react-dom": "^18.0.5",
"#types/styled-components": "^5.1.25",
"axios": "^0.27.2",
"eslint-config-airbnb": "^19.0.4",
"formik": "^2.2.9",
"js-joda": "^1.11.0",
"moment": "^2.29.4",
"primeflex": "^3.1.0",
"primeicons": "^5.0.0",
"primereact": "^8.1.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-export-excel": "^0.5.3",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-transition-group": "^4.4.1",
"redux": "^4.2.0",
"sass": "^1.53.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src"
},
"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"
]
},
"devDependencies": {
"node-sass": "^7.0.1",
"typescript": "^4.7.4"
}
}
it occurred when I started to work on react-export-table, my intention is to export data which is an array of objects into excel file. Below You can find the codesandbox which reflects the code I have in my app:
https://codesandbox.io/s/nice-cannon-zohev8?file=/src/App.js
thanks a lot !
I have been facing an unknown error after deploying on Heroku namely:
SyntaxError: Unexpected token '<'
However, deployment on GitHub pages works fine so I am unsure of the issue. Everything is working fine, except the actual page is just blank. When I view sources, it looks like this: Error
Here is my package.json file:
{
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.2",
"#mui/styled-engine-sc": "^5.5.2",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"autosuggest-highlight": "^3.2.1",
"axios": "^0.26.1",
"react": "^16.14.0",
"react-bootstrap": "^2.1.1",
"react-countup": "^6.1.1",
"react-dom": "^16.14.0",
"react-hook-form": "^7.29.0",
"react-icons": "^4.3.1",
"react-redux": "^7.2.8",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.3.0",
"react-scripts": "^5.0.0",
"react-scroll": "^1.8.4",
"react-text-typist": "^1.0.9",
"react-typist": "^2.0.5",
"redux": "^4.1.2",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "node --max_old_space_size=2560 node_modules/.bin/react-scripts start",
"build": "node --max_old_space_size=2560 node_modules/.bin/react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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"
]
},
"devDependencies": {
"gh-pages": "^3.2.3",
"sass": "^1.48.0"
}
}
Does anyone know what is the problem?
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
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