npm run build error: Linting and checking validity of types ...Error: Cannot find module 'escope' - reactjs

Upgraded my project's package.json & did some audit fixes. But now not able to run the build. Tried all the solutions from stackoverflow and other forums, none of them worked.
Here is my package.json
{
"name": "my-admin-frontend",
"version": "0.0.1",
"author": "",
"license": "ISC",
"scripts": {
"dev": "node server.js",
"build": "next build ./src",
"preinstall": "npx npm-force-resolutions",
"start": "npm run build && node server.js",
"coverage": "jest",
"lint": "npm run lint:js && npm run lint:styles",
"lint:js": "eslint \"./src/pages/*.js\" \"./src/components/**/*.js\" \"./src/adapters/**/*.js\" --fix",
"lint:styles": "stylelint \"./src/pages/*.js\" \"./src/components/**/*.styles.js\" \"./src/components/**/*.css\"",
"check-audit": "npm audit",
"check-quality": "npm run lint",
"eslint-report": "eslint --ext .jsx,.js -c .eslintrc.yml -o report.json ./src/components -f json",
"test": "npm run coverage -- --coverage --watchAll=false"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#date-io/date-fns": "^2.16.0",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.2.10",
"#microsoft/applicationinsights-web": "^2.8.9",
"#microsoft/microsoft-graph-client": "^3.0.4",
"applicationinsights": "^2.3.6",
"axios": "^1.2.1",
"body-parser": "^1.20.1",
"cookie": "^0.5.0",
"cookie-parser": "^1.4.6",
"date-fns": "^2.29.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.7",
"eslint-config-next": "^13.0.6",
"express": "^4.18.2",
"express-session": "^1.17.3",
"grapesjs": "^0.20.1",
"grapesjs-preset-webpage": "^1.0.2",
"helmet": "^6.0.1",
"hpp": "^0.2.3",
"identity-obj-proxy": "^3.0.0",
"jquery": "^3.6.1",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"mobx": "^6.7.0",
"mobx-react": "^7.6.0",
"mobx-react-lite": "^3.4.0",
"next": "^13.0.6",
"next-images": "^1.8.4",
"node-fetch": "^3.3.0",
"passport": "^0.6.0",
"passport-azure-ad": "^4.3.4",
"postcss": "^8.4.19",
"prop-types": "^15.8.1",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-idle-timer": "^5.4.2",
"react-player": "^2.11.0",
"react-responsive-carousel": "^3.2.23",
"react-screen-orientation": "0.0.4",
"react-test-renderer": "^18.2.0",
"styled-components": "^5.3.6"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.20.5",
"#babel/plugin-proposal-optional-chaining": "^7.18.9",
"#jest/fake-timers": "29.3.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"autoprefixer": "^10.4.13",
"babel-eslint": "^7.2.3",
"babel-plugin-styled-components": "^2.0.7",
"contentful-management": "^10.22.0",
"dotenv": "^16.0.3",
"eslint": "^8.29.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.2",
"jest": "^29.3.1",
"jest-enzyme": "^4.2.0",
"jest-puppeteer": "^6.1.1",
"junit-report-builder": "^3.0.1",
"pa11y-ci": "^3.0.1",
"puppeteer": "^19.4.0",
"stylelint": "^14.16.0",
"stylelint-config-recommended": "9.0.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.10.0",
"tailwindcss": "^3.2.4"
},
"resolutions": {
"node-fetch": "2.6.7",
"object-path": "0.11.5",
"glob-parent": "5.1.2",
"set-value": "4.0.1",
"underscore": "1.13.2",
"ws": "7.4.6",
"jest-environment-jsdom": "27.4.6"
},
"husky": {
"hooks": {
"pre-push": "npm run check-quality"
}
},
"robots": {
"prod": {
"userAgent": [
"*"
],
"allow": [
"/"
]
},
"dev": {
"userAgent": [
"*"
],
"disallow": [
"*"
],
"noindex": [
"*"
]
}
}
}
My .eslintrc.yml
env:
browser: true
node: true
commonjs: true
es6: true
jest: true
extends:
- eslint:recommended
- plugin:react/recommended
- plugin:jsx-a11y/recommended
- next/core-web-vitals
parser: babel-eslint
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: 2018
sourceType: module
plugins:
- react
- jsx-a11y
- react-hooks
rules:
react-hooks/rules-of-hooks:
- error
react-hooks/exhaustive-deps:
- warn
indent:
- error
- 4
semi:
- error
- never
no-console:
- error
- allow:
- error
- warn
- info
object-curly-spacing:
- error
- always
array-bracket-spacing:
- error
- never
jsx-quotes:
- error
- prefer-single
lines-between-class-members:
- error
- always
no-multiple-empty-lines:
- error
- max: 1
react/display-name:
- off
settings:
react:
version: detect
My .eslintignore
out/*
.next/*
Error I am getting is :
Linting and checking validity of types ...Error: Cannot find module 'escope'
Require stack:
C:\project test\MT-MyProject\node_modules\eslint\lib\api.js
I tried multiple changes in package.json but none worked.
I tried cleaning cache and installing all again but no luck.

have You tried to uninstall eslint library and then to try with npm i and then build

Related

React / Next - TypeError: Cannot read properties of undefined (reading 'compat')

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

Jest 29 with ts-test in React 17 Typescript gives Typescript errors on specific node_module package

When running all test suites within my project, only 1 test suite fails with the following TS validation error.
● Test suite failed to run
node_modules/#myorg/apple/src/components/apple-application/AppleApplication.tsx:637:8 - error TS2322: Type 'unknown' is not assignable to type 'ReactNode'.
637 {node}
~~~~~~
node_modules/#types/react/index.d.ts:1343:9
1343 children?: ReactNode | undefined;
~~~~~~~~
The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'
The jest.config.js is
module.exports = {
testEnvironment: 'jsdom',
testTimeout: 25000,
maxConcurrency: 20,
collectCoverageFrom: [
'src/**/*.js',
'src/**/*.ts',
'src/**/*.tsx',
'!**/index.*',
'!**/components.*',
'!**/node_modules/**',
'!**/*.stories.*',
'!**/*.md',
'!src/helpers/file.js',
'!src/helpers/jest-setup.js',
],
reporters: ['jest-progress-bar-reporter'],
coverageReporters: ['lcov', 'text-summary'],
testMatch: ['**/?(*.)spec.[tj]s?(x)'],
testEnvironmentOptions: { url: 'http://localhost' },
setupFilesAfterEnv: ['raf/polyfill', '<rootDir>/src/helpers/jest-setup.ts'],
transformIgnorePatterns: ['/node_modules/((?!(#myorg))/)'],
transform: {
'src/.+\\.(j|t)sx?$': 'ts-jest',
'node_modules/(#myorg)/.+\\.(j|t)sx?$': 'ts-jest',
},
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$':
'<rootDir>/src/mocks/file.js',
'^.+\\.(css|less|scss|md)$': 'identity-obj-proxy',
},
coverageThreshold: {
global: {
lines: 90,
statements: 90,
},
},
};
Also disabling diagnostic for this specific module does not resolve the issue.
transform: {
'node_modules/(#myorg)/apple/.+\\.(j|t)sx?$': [
'ts-jest',
{
diagnostics: false,
},
],
'src/.+\\.(j|t)sx?$': 'ts-jest',
'node_modules/(#myorg)/.+\\.(j|t)sx?$': 'ts-jest',
},
package.json
{
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"resolutions": {
"babel-eslint-parser/semver": "^7.3.2"
"version": "1.0.0",
"private": true,
"license": "ISC",
"repository": {
"type": "git",
"url": "https://gitlab......"
},
"scripts": {
"build": "webpack --mode=production",
"build:analyse": "webpack --mode=production --env=analyse=true",
"build:ota": "webpack --mode=development",
"build:ota:analyse": "webpack --mode=development --env=analyse=true",
"build:storybook": "build-storybook -c .storybook -o storybook-static",
"commitizen": "git-cz",
"lint:js": "eslint --fix --ext .ts,.tsx src",
"lint:less": "stylelint --syntax less",
"prepare": "husky install",
"prettier": "prettier --write --check 'src/**/*.{ts,tsx,css,json,md}'",
"sonar": "sonar-scanner -Dproject.settings=sonar-project.properties",
"start": "start-storybook -p 9001 -c .storybook",
"test": "NODE_ENV=test && jest --silent --maxWorkers=50%",
"test:coverage": "jest --coverage --ci --silent --maxWorkers=50%",
"test:debug": "NODE_ENV=test && jest -t 'debug*' --maxWorkers=50%",
"test:regression": "yarn run test -c jest.config.regression.js --maxWorkers=50%",
"test:watch": "yarn run test --watch --maxWorkers=25%"
},
"dependencies": {
"#myorg/account-helpers": "^2.6.0",
"#myorg/api": "^5.0.7",
"#myorg/application": "^12.0.0",
"#myorg/browser": "^4.2.0",
"#myorg/card": "^19.3.3",
"#myorg/core-less-imports": "^2.2.18",
"#myorg/description-list": "^11.0.0",
"#myorg/design-tokens": "^10.2.0",
"#myorg/form": "^21.1.2",
"#myorg/form-block": "^9.4.0",
"#myorg/form-block-address": "^15.2.1",
"#myorg/form-block-password-create": "^14.1.0",
"#myorg/form-field-birthday": "^12.1.1",
"#myorg/form-field-checkbox": "^9.1.0",
"#myorg/form-field-datepicker": "^16.7.5",
"#myorg/form-field-iban": "^10.1.1",
"#myorg/form-field-input": "^10.1.0",
"#myorg/form-field-input-radio-button-group": "^14.0.1",
"#myorg/form-field-nationality": "^10.0.0",
"#myorg/form-field-select": "^10.1.0",
"#myorg/form-field-telephone": "^10.1.0",
"#myorg/form-field-username": "^10.1.0",
"#myorg/form-footer": "^9.2.0",
"#myorg/grid": "^2.1.3",
"#myorg/inpage-navigation": "^7.1.0",
"#myorg/apple": "^4.1.2",
"#myorg/modal": "^20.0.0",
"#myorg/monitoring": "^2.1.0",
"#myorg/my-page": "^5.5.0",
"#myorg/notification": "^15.1.1",
"#myorg/panel": "^30.1.0",
"#myorg/providers-application": "^2.1.0",
"#myorg/theme": "^10.18.1",
"#myorg/toggle-content-visibility": "^6.3.1",
"#myorg/tooltip": "^14.0.0",
"#myorg/typography": "^11.2.0",
"#myorg/username-availability": "^1.0.3",
"#myorg/visibility-sensor": "^7.0.1",
"styled-components": "^5.3.6",
"#myorg/form-field-email": "^10.2.1",
"#myorg/data-layer": "^8.0.3",
"#myorg/form-field-password": "^14.3.1",
"#myorg/button": "^18.6.1",
"#myorg/link": "^17.0.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#myorg/test-utils": "^2.0.0",
"#babel/cli": "^7.19.3",
"#babel/core": "^7.20.2",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/register": "^7.18.9",
"#cerner/duplicate-package-checker-webpack-plugin": "^2.3.0",
"#storybook/addon-a11y": "^6.4.19",
"#storybook/addon-essentials": "^6.5.9",
"#storybook/addon-knobs": "^6.4.0",
"#storybook/addon-queryparams": "^6.2.9",
"#storybook/addon-storyshots": "^6.5.9",
"#storybook/addon-storyshots-puppeteer": "^6.5.9",
"#storybook/addon-storysource": "^6.5.9",
"#storybook/react": "^6.5.13",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^12.1.5",
"#testing-library/user-event": "^13.2.1",
"#types/classnames": "2.3.1",
"#types/jest": "^29.2.3",
"#types/jsdom": "16.2.14",
"#types/node": "14.14.28",
"#types/styled-components": "^5.1.23",
"#typescript-eslint/eslint-plugin": "^5.18.0",
"#typescript-eslint/parser": "^5.18.0",
"autoprefixer": "9.8.6",
"babel-eslint-parser": "^7.13.10",
"babel-jest": "^29.3.1",
"babel-loader": "^8.3.0",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-require-context-hook": "^1.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"clean-webpack-plugin": "^4.0.0",
"commitizen": "4.2.4",
"cross-env": "7.0.3",
"css-loader": "5.2.7",
"css-minimizer-webpack-plugin": "1.0.0",
"cz-conventional-changelog": "3.3.0",
"enzyme": "3.11.0",
"eslint": "^8.12.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"eslint-plugin-unused-imports": "^2.0.0",
"fetch-mock": "9.11.0",
"fetch-mock-jest": "1.5.1",
"file-loader": "6.2.0",
"husky": "^7.0.0",
"identity-obj-proxy": "3.0.0",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"jest-fetch-mock": "^3.0.3",
"jest-junit": "^15.0.0",
"jest-progress-bar-reporter": "^1.0.25",
"less": "3.12.2",
"less-loader": "7.2.1",
"lint-staged": "12.4.1",
"mini-css-extract-plugin": "^1.6.2",
"mockdate": "3.0.5",
"postcss-loader": "4.1.0",
"preact": "10.8.2",
"preact-render-to-json": "3.6.6",
"prettier": "2.6.2",
"puppeteer": "^13.1.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"sonarqube-scanner": "2.8.1",
"standard-version": "9.3.2",
"style-loader": "2.0.0",
"ts-jest": "^29.0.3",
"typescript": "4.6.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "4.1.1",
"webpack": "4.44.1",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "4.9.2"
}
}
Oddly enough this module is use in the component where the test is failing on.
In the end the TS validation was definitely not the issue. After replacing ts-jest by babel-jest in the the jest.config.ts the actual error was shown. An missing Context Provider in the test setup.

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch on HEROKU with React

I get this error in 9 of 10 attempts of deploy, and I don't know what is the cause of it. I've tried every recommendation I found on StackOverflow, but non of them works stable. I have no ideas why it is going on, and will preciate any help, guys!
Procfile
web: npm start
initializers/server/index.js
import Express from 'express';
import handleRender from './handleRender';
const app = Express();
const port = process.env.PORT || 3000;
// Serve static files
app.use('/assets', Express.static('./dist/assets/'));
// This is fired every time the server side receives a request
app.use(handleRender);
// We are going to fill these out in the sections to follow
/* eslint no-console: 0 */
app.listen(port, () => console.log('App is listening on', port));
package.json
{
"name": "planner",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fullhuman/postcss-purgecss": "^3.1.3",
"#reduxjs/toolkit": "^1.5.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"history": "^4.1.0",
"html-webpack-plugin": "^4.5.0",
"i18next": "^19.8.5",
"mini-css-extract-plugin": "^1.3.3",
"msw": "^0.25.0",
"postcss": "^7.0.35",
"prop-types": "^15.7.2",
"qs": "^6.9.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-i18next": "^11.8.5",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.2",
"redux": "^4.0.5",
"redux-undo": "^1.0.1",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^7.3.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"universal-cookie": "^4.0.4",
"uuid-random": "^1.3.2",
"webpack": "^4.40.2",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^3.0.0",
"webpack-node-externals": "^2.5.2"
},
"engines": {
"node": "14.5.0",
"npm": "6.14.9"
},
"scripts": {
"test": "jest",
"build:css": "tailwind build src/assets/tailwind.css -o src/assets/main.css",
"watch:css": "chokidar 'src/assets/tailwind.css' -c 'npm run build:css'",
"start:dev": "concurrently -n Tailwind,React 'npm run watch:css' 'webpack-dev-server --config ./initializers/webpack/development.js'",
"build:client": " rimraf ./dist/assets/* && webpack --config ./initializers/webpack/production.js",
"build:server": "NODE_ENV=production npm run build:css && webpack --config ./initializers/webpack/server.js",
"start:server": "NODE_ENV=production node --enable-source-maps ./dist/server/server",
"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"src",
"node_modules"
],
"moduleNameMapper": {
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
"setupFilesAfterEnv": [
"<rootDir>src/tests/setupTests.js"
],
"transform": {
"^.+\\.svg$": "<rootDir>/src/tests/svgTransform.js",
"^.+\\.(js|jsx)$": "babel-jest"
}
},
"devDependencies": {
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#testing-library/dom": "^7.29.4",
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"#typescript-eslint/eslint-plugin": "^4.11.1",
"#typescript-eslint/parser": "^4.11.1",
"babel-eslint": "^10.1.0",
"chokidar-cli": "^2.1.0",
"concurrently": "^5.3.0",
"eslint": "^7.16.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"react-test-renderer": "^17.0.1",
"redux-mock-store": "^1.5.4",
"webpack-dev-server": "^3.11.0"
}
}
What else can I do to solve this problem?
Your code looks fine but:
"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
This is too much.
Put them in build or heroku-postbuild, see https://devcenter.heroku.com/changelog-items/1557 and https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process
Don't do any "building" in your start script. Use your start script to only execute your code.
It fails to bind to $PORT within 60 seconds due to building.

Error: `fsevents` unavailable (this watcher can only be used on Darwin) in CRA v2.1.7 and craco v3.5.0

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.

I can't use new feature ES 2020 in my next.js app

I wanted to use a new feature of ES 2020 in my next.js so I used optional changes in my app. When I ran my code this error has occurred
Module parse failed: Unexpected token (50:191)
You may need an appropriate loader to handle this file type.
Then I ran this command
npm install --save-dev #babel/plugin-proposal-optional-chaining
but the problem still exists.
Then I decided to update babel/core to version 7, I updated it via this command
npx babel-upgrade --write
but the loader error still there and I don't have any idea. Here is my package.json file:
{
"name": "Karan",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "SET NODE_ENV=development && SET PORT=3001 && node server.js",
"build": "next build",
"prod-build": "next build",
"start": "SET NODE_ENV=production && SET PORT=8080 && node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#ckeditor/ckeditor5-basic-styles": "^11.1.4",
"#ckeditor/ckeditor5-build-classic": "^12.4.0",
"#ckeditor/ckeditor5-font": "^11.2.2",
"#ckeditor/ckeditor5-paragraph": "^11.0.5",
"#ckeditor/ckeditor5-react": "^1.1.3",
"#fullpage/react-fullpage": "^0.1.17",
"#sentry/browser": "^4.6.6",
"#svgr/webpack": "^4.3.2",
"#zeit/next-css": "^1.0.1",
"#zeit/next-stylus": "^1.0.1",
"axios": "^0.18.1",
"express": "^4.17.1",
"global": "^4.4.0",
"jalaali-js": "^1.1.0",
"leaflet": "^1.5.1",
"moment-jalaali": "^0.8.3",
"moment-jalali": "^0.3.9",
"next": "^8.1.0",
"next-images": "^1.1.2",
"next-routes": "^1.4.2",
"npm": "^6.12.1",
"numeral": "^2.0.6",
"persianjs": "^0.4.0",
"pm2": "^3.5.1",
"prop-types": "^15.6.2",
"qs": "^6.8.0",
"react": "^16.9.0",
"react-bootstrap-star-rating": "^3.5.5-alpha.0.3",
"react-dom": "^16.9.0",
"react-leaflet": "^2.4.0",
"react-modal": "^3.9.1",
"react-paginate": "^5.2.4",
"react-persian-calendar": "^1.0.3",
"react-rating": "^2.0.4",
"react-redux": "^5.0.7",
"react-responsive": "^5.0.0",
"react-select": "^2.4.4",
"react-share": "^2.4.0",
"react-slick": "^0.23.1",
"react-star-ratings": "^2.3.0",
"react-toastify": "^4.3.0",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"stylus": "^0.54.5"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"cross-env": "^5.2.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"poststylus": "^1.0.0"
}
}
Since i see that you are using next you need to add a .babelrc file beside your package.json and include the below content -
{
"presets": ["next/babel"],
"plugins": []
}
next/babel includes
preset-env
preset-react
preset-typescript
plugin-proposal-class-properties
plugin-proposal-object-rest-spread
plugin-transform-runtime
styled-jsx
An alternative approach would be to add something similar (including the preset/transforms you need for your application) in your package.json
,
"babel": {
"presets": [
"nano-react-app"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"#babel/plugin-transform-react-jsx",
{
"pragmaFrag": "React.Fragment"
}
]
]
}

Resources