I've recently updated from Intel to M1 Max and all my react web project sadly broke with the same error:
SyntaxError: /Users/giulioserra/Documents/Siti Web/CTS/ctsapp/node_modules/react-native-image-placeholder-cache/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (8:9):
6 |
7 |
> 8 | state = {
| ^
9 | isLoaded:false,
10 | path:''
11 | }
Add #babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
I have no babel config file and event installing the package seems to do nothing, here are my specs:
Mac Monterey M1 Max,
Node: v15.14.0
here is my package.info file:
{
"name": "xxxx",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"#popperjs/core": "^2.4.4",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"firebase": "^7.17.1",
"jquery": "^3.5.1",
"node-sass": "^4.14.1",
"popper.js": "^1.14.3",
"query-string": "^6.13.5",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-geocode": "^0.2.1",
"react-native-image-placeholder-cache": "^1.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"redirect": "^0.2.0",
"universal-cookie": "^4.0.3",
"uuid": "^8.2.0"
},
"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"
]
}
}
Any hints?
Thanks
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'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?
background: I did coding for ReactJS app and wanted to deploy on Netlify or Vercel. When I npm run build, I got error.
npm run build error
When I typed npm audit fix, I got this.
npm audit fix msg
I got stuck for days and dont know why I cant deploy my client app.
Here is my package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.5.10",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.3",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"apollo-link-context": "^1.0.20",
"graphql": "^16.3.0",
"graphql-tag": "^2.12.6",
"jwt-decode": "^3.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-moment": "^1.1.1",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.2",
"svgo": "^2.8.0",
"web-vitals": "^2.1.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"
]
},
"devDependencies": {
"terser-webpack-plugin": "^5.3.1"
},
"proxy": "https://fathomless-mountain-12345.herokuapp.com/"
}
This should be simple but I am not sure what I am missing.
I am trying to recreate the example stated in the docs, modifying only the variable names:
https://firebase.google.com/docs/functions/firestore-events
Trying to log the value of context.params returns undefined.
const functions = require("firebase-functions");
exports.makeUppercase = functions.firestore
.document("/messages/{documentId}")
.onCreate((snap, context) => {
console.log(context.params.documentId); // undefined
console.log(context.params); // undefined
});
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.0",
"#mui/material": "^5.0.0",
"#mui/styles": "^5.0.0",
"#mui/x-data-grid": "^4.0.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"firebase": "^9.0.2",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^3.0.4",
"react-redux": "^7.2.5",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"uuid": "^8.3.2",
"web-vitals": "^1.1.2"
},
"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"
]
},
"devDependencies": {}
}
What am I missing here? Thanks a lot!