I am using Nextjs and Vercel to deploy my website. Cypress was working fine yesterday. But today when Vercel runs the build I get the following error:
I noticed that vercel was installing Cypress version 6.9.0 whereas I had 6.8.0 in my package.json file.
So I updated to version to 6.9.0 but I still get the same error. Why is this suddenly happening?
My package.json file
{
"name": "website",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env API_URL=http://localhost:1337 next dev",
"public-dev": "next dev",
"build": "next build",
"start": "next start",
"cypress:open": "cypress open"
},
"dependencies": {
"#apollo/client": "^3.1.3",
"#blueprintjs/core": "^3.35.0",
"#blueprintjs/datetime": "^3.19.3",
"#popperjs/core": "^2.5.4",
"axios": "^0.21.1",
"graphql": "^15.3.0",
"graphql-tag": "^2.10.4",
"isomorphic-unfetch": "^3.1.0",
"moment": "^2.29.1",
"next": "10.0.2",
"next-with-apollo": "^5.1.0",
"nouislider-react": "^3.3.8",
"react": "^17.0.1",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^17.0.1",
"react-flatpickr": "^3.10.6",
"react-froala-wysiwyg": "^3.2.1",
"react-ga": "^3.2.1",
"react-gtm-module": "^2.0.11",
"react-localization": "^1.0.15",
"react-lottie": "^1.2.3",
"react-popper": "^2.2.3",
"react-scroll": "^1.8.1",
"react-slick": "^0.27.13",
"sass": "^1.30.0",
"swiper": "^6.3.5",
"swr": "^0.4.2"
},
"devDependencies": {
"#types/node": "^14.0.27",
"#types/react": "^16.9.46",
"cross-env": "^7.0.2",
"cypress": "^6.9.0",
"cypress-localstorage-commands": "^1.4.2",
"eslint": "^7.4.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-standard": "^4.0.1",
"typescript": "^3.9.7"
}
}
Cypress team published 6.9.0 by mistake, really the version is 7.0.0 and they will remove 6.9.0:
https://github.com/cypress-io/cypress/issues/15797
Related
All of a sudden I am getting an issue when trying to run npm build.
The error I get is as follows (for all pages):
Error occurred prerendering page "/sharelink/Index". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'compat')
> Build error occurred
Error: Export encountered errors on following paths
Here is my package.json
{
"name": "nextjstemplate",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 14009",
"build": "next build",
"start": "next start -p 14009",
"lint": "next lint",
"prepare": "husky install",
"postinstall": "npm run prepare",
"eslint": "eslint \"**/*.+(js|jsx|ts|tsx)\"",
"eslint:fix": "eslint --fix \"**/*.+(js|jsx|ts|tsx)\"",
"prettier": "prettier --check \"**/*.+(js|jsx|ts|tsx|json|yml|yaml|md|css|scss)\"",
"prettier:fix": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|yml|yaml|md|css|scss)\"",
"pre-commit": "lint-staged"
},
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/server": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#hookform/resolvers": "^2.9.10",
"#mui/base": "^5.0.0-alpha.105",
"#mui/icons-material": "^5.10.6",
"#mui/material": "^5.11.3",
"#mui/system": "^5.10.10",
"#mui/x-date-pickers": "^5.0.8",
"#reduxjs/toolkit": "^1.8.6",
"axios": "^1.1.3",
"cookies-next": "^2.1.1",
"crypto": "^1.0.1",
"dompurify": "^2.4.3",
"html-react-parser": "^3.0.8",
"lottie-react": "^2.3.1",
"moment": "^2.29.4",
"next": "^12.3.0",
"next-progress": "^2.2.0",
"next-pwa": "5.5.4",
"nextjs-progressbar": "^0.0.14",
"notistack": "^2.0.8",
"pm2": "^5.2.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.40.0",
"react-redux": "^8.0.2",
"react-share": "^4.4.1",
"react-slick": "^0.29.0",
"react-toastify": "^9.1.1",
"sass": "^1.54.5",
"slick-carousel": "^1.8.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#commitlint/cli": "^17.1.2",
"#commitlint/config-conventional": "^17.1.0",
"cypress": "^10.6.0",
"eslint": "8.22.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "12.2.5",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-css-modules": "^2.11.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-mui-path-imports": "^0.0.3",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.10",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-unused-imports": "^2.0.0",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
"prettier": "^2.7.1"
},
"lint-staged": {
"./*/**/*.{js,jsx,ts,tsx}": [
"npm run prettier:fix",
"npm run eslint:fix"
],
"*.{json,md}": [
"npm run prettier:fix"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
Just to add to the above, the error seems more likely to be in relation to emotion.
error - TypeError: Cannot read properties of undefined (reading 'compat')
at /var/www/vhosts/staging-site.co.uk/node_modules/#emotion/react/dist/emotion-react.cjs.dev.js:190:29
at /var/www/vhosts/staging-site.co.uk/node_modules/#emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:66:16
Any ideas on what is the cause for this issue?
This issue is caused by an update in #mui/styled-engine that apparently removes the CacheProvider from emotion.
You can force the resolution of this package to a previous version in the package.json as a workaround meanwhile the issue is not being fixed.
{
...,
"resolutions": {
"#mui/styled-engine": "5.11.0"
}
}
You can track the status of the issue here: https://github.com/mui/material-ui/issues/36096
Thanks for the help in advance. I am trying to install a react app but it is not installing.I am using yarn for this.
The screenshot of the error I am getting after yarn install is the below one
the error I am getting after yarn run start is 'REACT_APP_SERVER' is not recognized as an internal or external command,operable program or batch file.
package.json
{
"name": "queenofraw",
"version": "0.1.0",
"private": true,
"homepage": "https://ja.materiamx.com",
"main": "",
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-regular-svg-icons": "^5.3.1",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/react-fontawesome": "^0.1.3",
"#material-ui/core": "^3.0.1",
"#material-ui/icons": "^3.0.1",
"#mdi/svg": "^3.0.39",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.3",
"#react-jvectormap/core": "^1.0.3",
"#rematch/core": "^0.6.0",
"#stripe/stripe-js": "^1.8.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"antd": "^3.10.4",
"axios": "^0.18.0",
"chart.js": "^3.9.1",
"classnames": "^2.2.6",
"country-list": "^2.1.0",
"echarts": "^4.2.0-rc.2",
"echarts-for-react": "^2.0.15-beta.0",
"err": "^2.1.12",
"events": "^2.0.0",
"formsy-react": "^1.1.4",
"image-to-base64": "^2.0.1",
"jquery": "^3.6.1",
"js-cookie": "^2.2.0",
"loadash": "^1.0.0",
"material-ui-table-edit": "^3.0.3",
"moment": "^2.22.0",
"namor": "^1.1.1",
"qs": "^6.9.4",
"query-parse": "^2.0.0",
"rc-queue-anim": "^1.6.7",
"react": "^16.4.2",
"react-chartjs-2": "^4.3.1",
"react-confirm": "^0.1.17",
"react-cookie": "^3.0.4",
"react-country-flag": "^1.0.1",
"react-dom": "^16.4.2",
"react-dropzone": "^7.0.1",
"react-fontawesome": "^1.6.1",
"react-google-recaptcha": "^2.1.0",
"react-icons": "^3.2.2",
"react-images-upload": "^1.2.3",
"react-inline-editing": "^1.0.10",
"react-jvectormap": "0.0.4",
"react-moment": "^0.8.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-scripts": "^1.1.5",
"react-scroll": "^1.7.11",
"react-table": "^6.8.6",
"recharts": "^1.2.0",
"slick-carousel": "^1.8.1",
"socket.io-client": "1.7.0",
"superagent": "^4.0.0-beta.5",
"web-vitals": "^3.0.1",
"yarn": "^1.13.0"
},
"scripts": {
"start": "REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts start",
"starts": "PORT=6500 REACT_APP_SERVER=http://localhost:5080 react-scripts start",
"sass:watch": "node-sass -w src/assets/scss/style.scss -o src/assets/css",
"sass:build": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map true",
"dev": "npm-run-all --parallel start sass:watch",
"start:stag": "react-scripts start",
"build": "REACT_APP_SERVER=http://192.168.2.18:5080 react-scripts build",
"deploy": "aws s3 sync build/ s3://qor-mmx-static --acl public-read",
"stag:build": "REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts build",
"prod:build": "REACT_APP_SERVER=https://api-dev.materiamx.com/ react-scripts build",
"stag": "yarn run stag:build && sls client deploy --stage staging --aws-profile qor --region us-east-1",
"prod": "yarn run prod:build && sls client deploy --stage production --aws-profile qor --region us-east-1",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"flow-bin": "^0.68.0",
"node-sass": "^4.9.3",
"npm-run-all": "^4.1.5",
"react-edit-inline": "^1.0.8",
"react-test-renderer": "^16.2.0",
"serverless-finch": "^2.2.0",
"serverless-single-page-app-plugin": "^1.0.2"
},
"jest": {}
}
Windows doesn't support setting env variables like that
I would recommend using cross-env
Install npm install -D cross-env
Change your commands to cross-env REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts start"
You can also try using git bash instead, but I doubt it will work
You should install python2.7 and Visual studio 2019 Environment.
Python 2.7 download link
I wish your success.
I've got a NextJS site running TypeScript and a component of it in a separate repo installed using npm, but when I try and use the component in the site it shows the following message:
error - ./node_modules/promotion-spot/dist/PromotionSpot/Conditional/index.jsx
Module parse failed: Unexpected token (11:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
The component works fine when it isn't in a separate npm dependency but, when it is, NextJS won't load it properly. The component is compiled into JavaScript with .d.ts files and I saw that react-chrono does something similar and that works in the site fine.
The component's source code is at https://github.com/Relucent-Software/promotion-spot.
Here's the package.json file for the NextJS site too:
{
"name": "thederbyinn.co.uk",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "npm-run-all test:*",
"test:eslint": "eslint --ext .ts --ext .js --ext .tsx --ext .jsx src/**/*"
},
"dependencies": {
"#types/react-gtm-module": "^2.0.1",
"animate.css": "^4.1.1",
"classnames": "^2.3.1",
"formik": "^2.2.9",
"libphonenumber-js": "^1.9.53",
"lodash.get": "^4.4.2",
"luxon": "^2.4.0",
"next": "^12.1.6",
"next-seo": "^4.29.0",
"promotion-spot": "github:Relucent-Software/promotion-spot",
"query-string": "^7.1.1",
"react": "17.0.2",
"react-chrono": "^1.15.0",
"react-dom": "17.0.2",
"react-gtm-module": "^2.0.11",
"react-icons": "^4.3.1",
"react-masonry-css": "^1.0.16",
"sass": "^1.51.0",
"schema-dts": "^1.1.0",
"swiper": "^7.4.1",
"tailwindcss": "^2.2.19",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"#babel/core": "^7.17.10",
"#types/lodash.get": "^4.4.7",
"#types/lodash.has": "^4.5.7",
"#types/luxon": "^2.3.2",
"#types/node": "16.11.7",
"#types/react": "17.0.35",
"#types/react-datepicker": "^4.4.1",
"#typescript-eslint/eslint-plugin": "^5.23.0",
"#typescript-eslint/parser": "^5.23.0",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"eslint": "^8.15.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-n": "^15.2.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.13",
"typescript": "4.4.4"
}
}
error occur when doing build next build, I have installed the module that was not found, but the error still appears
./node_modules/mdx-bundler/dist/client.js
Module not found: Package path ./compat/jsx-runtime.js is not exported from package /vercel/path0/node_modules/preact (see exports field in /vercel/path0/node_modules/preact/package.json)
this my package
{
"name": "x",
"version": "1.2.0",
"private": true,
"scripts": {
"develop": "vercel",
"start": "node ./scripts/next-remote-watch.js ./data",
"dev": "next dev",
"build": "next build && node ./scripts/generate-sitemap",
"serve": "next start",
"analyze": "cross-env ANALYZE=true next build",
"lint": "next lint --fix --dir pages --dir components --dir lib --dir layouts --dir scripts",
"prepare": "husky install"
},
"dependencies": {
"#mailchimp/mailchimp_marketing": "^3.0.65",
"esbuild": "^0.12.15",
"github-slugger": "^1.4.0",
"gray-matter": "^4.0.2",
"image-size": "1.0.0",
"isomorphic-unfetch": "^3.1.0",
"mdx-bundler": "^8.0.1",
"motion": "^10.4.0",
"next": "12.0.2",
"next-themes": "^0.0.14",
"preact": "^10.6.6",
"querystring": "^0.2.1",
"react": "^17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1",
"reading-time": "1.3.0",
"rehype-autolink-headings": "^6.0.0",
"rehype-katex": "^6.0.0",
"rehype-prism-plus": "^1.1.0",
"rehype-slug": "^5.0.0",
"remark-footnotes": "^4.0.0",
"remark-gfm": "^2.0.0",
"remark-math": "^5.0.0",
"sharp": "^0.28.3",
"swr": "^1.1.2",
"unist-util-visit": "^4.0.0"
},
"devDependencies": {
"#next/bundle-analyzer": "12.0.2",
"#svgr/webpack": "^5.5.0",
"#tailwindcss/aspect-ratio": "^0.4.0",
"#tailwindcss/forms": "^0.4.0",
"#tailwindcss/line-clamp": "^0.3.0",
"#tailwindcss/typography": "^0.5.0",
"#types/react": "^17.0.14",
"#types/tailwindcss": "^2.2.0",
"#typescript-eslint/eslint-plugin": "^4.28.1",
"#typescript-eslint/parser": "^4.28.1",
"autoprefixer": "^10.4.0",
"cross-env": "^7.0.3",
"dedent": "^0.7.0",
"eslint": "^7.29.0",
"eslint-config-next": "12.0.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"file-loader": "^6.0.0",
"globby": "11.0.3",
"husky": "^6.0.0",
"inquirer": "^8.1.1",
"lint-staged": "^11.0.0",
"next-remote-watch": "^1.0.0",
"postcss": "^8.4.5",
"prettier": "2.2.1",
"socket.io": "^4.1.3",
"socket.io-client": "^4.1.3",
"tailwindcss": "^3.0.7",
"typescript": "^4.3.5",
"vercel": "^24.0.0"
},
"lint-staged": {
"*.+(js|jsx|ts|tsx)": [
"eslint --fix"
],
"*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
"prettier --write"
]
}
}
I am getting the above error while running jest v23 in a monorepo. The package i am running jest on is built on CRA and craco.
Package.json of my CRA
{
"name": "#sprinklr/chat-web-client",
"version": "0.1.0",
"dependencies": {
"#emotion/core": "^10.0.5",
"#emotion/styled": "^10.0.5",
"#sentry/browser": "^5.8.0",
"#sentry/integrations": "^5.8.0",
"#sprinklr/chat-constants": "2.0.0",
"#sprinklr/chat-entities": "2.0.0",
"#sprinklr/chat-utils": "2.0.0",
"#sprinklr/rest-client": "2.0.0",
"azure-storage": "^2.10.3",
"bluebird": "^3.4.0",
"classnames": "^2.2.6",
"core-js": "^3.0.1",
"emotion": "^10.0.2",
"emotion-theming": "^10.0.5",
"formik": "^1.3.2",
"immutability-helper": "^2.8.1",
"jstz": "^2.1.1",
"lodash": "^4.17.4",
"polished": "^2.3.0",
"prop-types": "^15.5.7",
"react": "^16.8.6",
"react-autosize-textarea": "^6.0.0",
"react-dom": "^16.8.6",
"react-frame-component": "^4.0.2",
"react-redux": "7.2.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.7",
"react-transition-group": "^2.5.3",
"react-use": "^14.1.1",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.1",
"reselect": "^4.0.0",
"scriptjs": "^2.5.8",
"shortid": "^2.2.14",
"styled-system": "^3.0.2",
"typesafe-actions": "^2.0.4",
"validate.js": "^0.13.1"
},
"scripts": {
"precommit": "pretty-quick --staged",
"start": "sh internals/build/build-packages.sh && craco start --workspace",
"prebuild": "NODE_ENV=production babel-node internals/build/tools/run prebuild",
"build": "sh internals/build/build.sh",
"analyze": "source-map-explorer build/static/js/main.*",
"eject": "react-scripts eject",
"docz:dev": "docz dev",
"docz:build": "docz build",
"static": "NODE_ENV=production babel-node internals/build/tools/run static/index",
"widget": "NODE_ENV=production babel-node internals/build/tools/run widget/index",
"i18n": "sh internals/i18n/index.sh",
"lint": "eslint src",
"format": "npm run prettier -- --write",
"prettier": "prettier \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\"",
"validate": "npm run lint && npm run prettier -- --list-different",
"test": "craco test --workspace --env=jsdom",
"test-watch": "npm run test -- --watch",
"test-coverage": "npm run test -- --coverage",
"test-update": "npm run test -- --updateSnapshot"
},
"devDependencies": {
"#babel/cli": "7.2.3",
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"#babel/preset-env": "^7.3.1",
"#craco/craco": "^3.5.0",
"#emotion/babel-preset-css-prop": "^10.0.7",
"#sprinklr/chat-types": "2.0.0",
"#testing-library/jest-dom": "4.2.4",
"#testing-library/react": "^9.4.0",
"#types/bluebird": "^3.5.26",
"#types/classnames": "^2.2.7",
"#types/jest": "26.0.0",
"#types/lodash": "^4.14.118",
"#types/node": "^11.13.7",
"#types/react": "^16.8.14",
"#types/react-dom": "^16.8.4",
"#types/react-intl": "^2.3.15",
"#types/react-redux": "^7.1.0",
"#types/react-router": "^4.4.2",
"#types/react-textarea-autosize": "^4.3.3",
"#types/react-transition-group": "^2.0.15",
"#types/redux-logger": "^3.0.6",
"#types/scriptjs": "^0.0.2",
"#types/shortid": "^0.0.29",
"#types/styled-system": "^3.0.8",
"aws-sdk": "^2.392.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-plugin-react-intl": "^3.0.1",
"babel-plugin-react-intl-auto": "^1.6.0",
"babel-preset-react-app": "^7.0.0",
"cheerio": "^1.0.0-rc.2",
"docz": "^0.12.15",
"eslint-plugin-prettier": "^2.6.2",
"glob": "^7.1.2",
"husky": "^0.14.3",
"node-sass-chokidar": "^1.3.0",
"prettier": "1.13.7",
"pretty-quick": "^1.6.0",
"react-intl": "^2.8.0",
"source-map-explorer": "^1.5.0",
"terser": "3.16.1",
"ts-jest": "26.1.1",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.16.0",
"tslint-react-hooks": "^1.1.0",
"typescript": "3.4.5",
"typescript-styled-plugin": "^0.13.0",
"webpack-merge": "^4.1.4"
},
"optionalDependencies": {
"fsevents": "1.2.4"
},
"browserslist": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
}
I checked my node_modules and it has fsevents installed. Still getting the error. Most common solution which I found was reinstalling node_modules after deleting yarn.lock but this solution isn't working for me. Neither installing watchman worked.
I am using jestConfig of CRA itself
Solved this issue by installing brew and then doing
brew install watchman
on my mac.