We Keep Coding

Enzyme with Jest TC Failing

I am trying to run my Enzyme Tc but when i run Yarn run test it fails with following, I have tried updating the jest, enzyme and other things as well but cannot get it working
Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'Universal')
> 1 | import Enzyme from 'enzyme';
| ^
2 | import EnzymeAdapter from '#wojtekmaj/enzyme-adapter-react-17';
3 | import enableHooks from 'jest-react-hooks-shallow';
my setupTests file has following:
import Enzyme from 'enzyme';
import EnzymeAdapter from '#wojtekmaj/enzyme-adapter-react-17';
import enableHooks from 'jest-react-hooks-shallow';
Enzyme.configure({ adapter: new EnzymeAdapter() });
enableHooks(jest);
My current Package files is
{
"name": "abc-ui",
"version": "2.1.0",
"license": "UNLICENSED",
"jest": {
"resetMocks": false
},
"dependencies": {
"#date-io/date-fns": "1.x",
"#material-ui/core": "4.8.2",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "4.0.0-alpha.38",
"#material-ui/pickers": "3.2.10",
"#types/jest": "^29.2.2",
"#types/node": "13.7.7",
"#types/react": "16.9.23",
"#types/react-dom": "16.9.5",
"#wojtekmaj/enzyme-adapter-react-17": "^0.7.0",
"axios": "0.26.0",
"date-fns": "2.12.0",
"date-holidays": "1.4.12",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.7",
"execa": "3.4.0",
"formik": "2.0.4",
"lodash": "4.17.21",
"match-sorter": "^4.2.1",
"moment": "2.29.4",
"react": "17.0.1",
"react-app-polyfill": "1.0.4",
"react-dom": "17.0.1",
"react-idle-timer": "^5.4.1",
"react-redux": "7.1.3",
"react-router-dom": "5.1.2",
"react-scripts": "4.0.3",
"react-table": "^7.8.0",
"react-toastify": "5.5.0",
"redux": "4.0.4",
"redux-mock-store": "1.5.4",
"redux-thunk": "2.3.0",
"styled-components": "4.4.1",
"typescript": "3.9.9",
"web-vitals": "^0.2.4",
"xlsx": "^0.18.5",
"yup": "0.30.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --ci",
"test:ci": "react-scripts test --ci --coverage --reporters=default",
"test:coverage": "react-scripts test --coverage --watchAll=false",
"eject": "react-scripts eject",
"prettier": "prettier --write src/**/*.{js,jsx,css,scss}",
"lint": "eslint src",
"lint:report": "eslint src -o coverage/eslint.json -f json"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie >= 9"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie >= 9"
]
},
"devDependencies": {
"#babel/helper-create-class-features-plugin": "7.8.3",
"#testing-library/jest-dom": "5.11.5",
"#testing-library/react": "11.1.0",
"#testing-library/user-event": "12.1.10",
"babel-eslint": "10.1.0",
"eslint": "7.32.0",
"eslint-config-xo-react": "0.16.0",
"eslint-config-xo-space": "0.18.0",
"eslint-plugin-babel": "5.3.0",
"eslint-plugin-react": "7.16.0",
"husky": "4.0.0",
"jest-react-hooks-shallow": "^1.5.1",
"prettier": "1.19.1",
"pretty-quick": "2.0.1",
"prop-types": "15.7.2",
"react-test-renderer": "16.12.0",
"redux-devtools-extension": "2.13.8"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"resolutions": {
"**/ejs": "3.1.7",
"**/portfinder/async": "3.2.2",
"**/immer": "9.0.6",
"**/set-value": "4.0.1",
"**/shell-quote": "1.7.3",
"**/unset-value": "2.0.1",
"**/ansi-html": "0.0.8",
"**/recursive-readdir/minimatch": "3.0.5",
"**/selfsigned": "1.10.13",
"**/react-dev-utils/prompts": "2.4.2",
"react-scripts/prompts": "2.4.2",
"**/clean-css": "5.2.2",
"**/webpack-dev-server/ws": "7.5.7",
"**/default-gateway/execa": "2.0.1",
"**/sane/execa": "2.0.1",
"**/svgo/css-select": "3.1.1",
"**/css-what": "5.1.0",
"**/ansi-regex": "5.0.1",
"**/hosted-git-info": "2.3.0",
"**/react-dev-utils/browserslist": "4.16.6",
"**/webpack/watchpack": "2.0.0",
"**/webpack-dev-server/chokidar": "3.0.0",
"react-scripts/resolve-url-loader": "4.0.0",
"loader-utils": "2.0.3"
}
}
`
``
all my test case are failing with above error
I changes my version, even tried to update the enzyme and dependencies but ended in failure

Module not found error even when overriding webpack config

When running npm run build I'm getting Module not found error. The extension in the request is mandatory for it to be fully specified.
This is relating to a shared package I created using create-react-library. This lib is being referenced in a new project using the latest create-react-app.
I have created a config-overrides.js file setting fullySpecified to false but this does not seem to have any affect.
Any idea what I am missing?
Module not found: Error: Can't resolve './utils' in
'C:\Users\Bob\source\repos\my-react-app\node_modules#my-lib\shared\dist\services'
Did you mean 'utils.js'? BREAKING CHANGE: The request './utils' failed
to resolve only because it was resolved as fully specified (probably
because the origin is strict EcmaScript Module, e. g. a module with
javascript mimetype, a '.mjs' file, or a '.js' file where the
package.json contains '"type": "module"'). The extension in the
request is mandatory for it to be fully specified. Add the extension
to the request.
package.json
{
"name": "myreactapp",
"version": "1.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.16.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.9",
"#mui/x-date-pickers": "^5.0.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.65",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.40.0",
"#typescript-eslint/parser": "^5.40.0",
"#mylib/shared": "^1.0.128-preview", // <-- my shared lib
"aws-amplify": "^4.3.37",
"clsx": "^1.2.1",
"date-fns": "^2.29.3",
"eslint": "^8.25.0",
"jest": "^27.5.1",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-i18next": "^11.18.6",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"tailwindcss": "^3.1.8",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired 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"
]
}
}
config-overrides.js
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: function (config, env) {
const webpack = config.module.rules[1].oneOf;
webpack.splice(webpack.length - 1, 0, {
test: /\.m?js/,
resolve: {
fullySpecified: false
}
});
return config;
},
};
#mylib - package.json
{
"name": "#mylib/shared",
"version": "1.0.0-local",
"description": "Shared library",
"author": "na",
"license": "MIT",
"repository": "na",
"type": "module",
"main": "dist/index",
"module": "dist/index.modern.js",
"types": "dist/index",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test:all": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build",
"test": "jest",
"test:ci": "npm run test -- --watchAll=false --passWithNoTests --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura"
},
"peerDependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^7.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"jest": "^27.5.1",
"jest-junit": "^13.1.0",
"microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-scripts": "^5.0.1",
"ts-jest": "^27.1.3",
"typescript": "4.8.4"
},
"files": [
"dist"
],
"dependencies": {
"#types/jest": "^27.4.1",
"#types/node": "^17.0.21",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"aws-amplify": "^4.3.12",
"dotenv": "^16.0.0",
"fetch-intercept": "^2.4.0",
"object-mapper": "^6.2.0",
"react-i18next": "^11.15.6",
"typescript": "4.8.3",
"zen-observable-ts": "^1.1.0"
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
#mylib - index.ts
import sharedUtils from './services/utils';
export {
sharedUtils,
};

Jest is not collecting coverage from all my Vue files

I am testing a Vue3 project with Jest and I am facing this issue: I recently added Jest to my Vue project through the command vue add unit-jest. This command configured the environment to run unit tests with the command npm run test:unit, which refers to vue-cli-service test:unit.
I've also configured Jest in my package.json file with options "collectCoverage":true and "collectCoverageFrom":["src/views/**.{js,vue}","!src/main.js"].
However, when I run the tests, I don't get a coverage report from all of my Vue components, only some of them. These components are located in src/views folder of my project.
This is my package.json file:
{
"name": "proyecto-tfg",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"webpack": "webpack --watch --mode development"
},
"dependencies": {
"#vue/test-utils": "^2.0.2",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.20.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chart.js": "^3.8.2",
"cookie-parser": "^1.4.6",
"core-js": "^3.22.8",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"error-stack-parser": "^2.1.4",
"express": "^4.18.1",
"express-session": "^1.17.3",
"flush-promises": "^1.0.2",
"jest-fetch-mock": "^3.0.3",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.3",
"mongoose": "^6.3.6",
"mongoose-unique-validator": "^3.1.0",
"morgan": "^1.10.0",
"nodemon": "^2.0.16",
"vue": "^3.2.37",
"vue-chartjs": "^4.1.1",
"vue-ellipse-progress": "^2.1.1",
"vue-material-design-icons": "^5.1.1",
"vue-router": "^4.0.16",
"vue-star-rating": "^2.1.0",
"vue-toastification": "^2.0.0-rc.5",
"vue3-carousel": "^0.1.40"
},
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/eslint-parser": "^7.18.2",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"#vue/babel-preset-jsx": "^1.3.1",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^28.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^8.2.5",
"babel-preset-env": "^1.7.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"jest": "^28.1.3",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names": 0,
"vue/require-v-for-key": 0
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleDirectories": [
"node_modules",
"src/views"
],
"automock": false,
"setupFiles": [
"./tests/setupJest.js"
],
"collectCoverage": true,
"collectCoverageFrom": [
"src/views/**.{js,vue}",
"!src/main.js"
],
"preset": "#vue/cli-plugin-unit-jest"
}
}
This is the complete list of my Vue components:
- ActorShow.vue
- AddProgramaLista.vue
- Buscador.vue
- CrearLista.vue
- Estadisticas.vue
- Filtros.vue
- Footer.vue
- Home.vue
- Insignias.vue
- InsigniasShow.vue
- Listas.vue
- Login.vue
- Navbar.vue
- Perfil.vue
- Programas.vue
- ProgramasShow.vue
- RecomendacionesUsuario.vue
- Registro.vue
- Sugerencias.vue
And when I run the command npm run test:unit, I get the message "Running coverage on untested files..." with this output from the console:
Thanks in advance

Heap Out of Memory in React Application

Heap Out of Memory error while starting the application. I have listed my package.json file content which might be needed for proper detailing. Although I set max_old_space_size to 4096, it still provides me the same error. My Pc configuration is 4GB RAM and I5 intel processor. Is it due to my pc configuration or memory leaks in the code. Please elaborate the possible fix for the issue. I face this issue when I use sass in my dev dependencies.
"name": "superadmin-panel",
"version": "0.1.0",
"private": true,
"license": "MIT",
"dependencies": {
"#ant-design/icons": "4.6.2",
"#auth0/auth0-react": "^1.4.0",
"#david.kucsai/react-pdf-table": "^0.4.1",
"#react-pdf/renderer": "^2.1.1",
"#welldone-software/why-did-you-render": "^6.1.1",
"antd": "^4.15.0",
"antd-img-crop": "^3.14.1",
"apexcharts": "^3.26.0",
"axios": "^0.21.1",
"bootstrap-scss": "^4.6.0",
"chart.js": "^3.0.2",
"chartist": "^0.11.4",
"connected-react-router": "^6.9.1",
"draft-convert": "^2.1.11",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"emoji-mart": "^3.0.1",
"feather-icons": "^4.28.0",
"firebase": "^8.3.3",
"html-to-draftjs": "^1.5.0",
"jquery": "^3.6.0",
"leaflet": "^1.7.1",
"node-sass": "npm:sass#^1.52.3",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.5.2",
"react-bootstrap-typeahead": "^5.1.4",
"react-chartist": "^0.14.4",
"react-ckeditor-component": "^1.1.0",
"react-clock": "^3.0.0",
"react-copy-to-clipboard": "^5.0.3",
"react-countdown": "^2.3.1",
"react-countup": "^4.3.3",
"react-data-table-component": "^6.11.7",
"react-datepicker": "^3.7.0",
"react-draft-wysiwyg": "^1.14.5",
"react-dropzone-uploader": "^2.11.0",
"react-feather": "^2.0.9",
"react-google-maps": "^9.4.5",
"react-hook-form": "^6.15.4",
"react-icons": "^4.2.0",
"react-image-crop": "^8.6.6",
"react-image-lightbox": "^5.1.1",
"react-input-range": "^1.3.0",
"react-jwt": "^1.1.2",
"react-moment": "^1.1.1",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "^4.0.3",
"react-slick": "^0.28.1",
"react-slugify": "^2.1.0",
"react-spinners": "^0.11.0",
"react-switch-lang": "^1.0.2",
"react-times": "^3.1.12",
"react-toastify": "^7.0.3",
"react-transition-group": "^4.4.1",
"reactstrap": "^8.9.0",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"sweetalert2": "^10.16.0",
"swr": "^1.2.2",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md}' --config ./src/.prettierrc"
},
"resolutions": {
"react-dev-utils": "^10.0.0"
},
"eslintConfig": {
"extends": "react-app",
"plugins": [
"jsx-a11y"
],
"rules": {
"no-whitespace-before-property": "off"
},
"overrides": [
{
"files": [
"*-index.js"
],
"rules": {
"no-unused-expressions": "off"
}
}
],
"reportUnusedDisableDirectives": true,
"noInlineConfig": true
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"env-cmd": "^10.1.0",
"rc-tween-one": "^3.0.6",
"react-app-rewired": "^2.1.8",
"redux-devtools-extension": "^2.13.9",
"sass": "^1.52.3",
"typescript": "^4.2.3"
},
"husky": {
"hooks": {
"pre-commit": "npx run format",
"pre-push": "npx run format"
}
},
"engines": {
"npm": ">=6.0.0",
"node": ">=14.0.0"
}
}

VSCode EsLint Extension Does Not Lint in JS Files in a Mixed Next.JS Project, but next lint and Husky Work

For context, our project is a Next.JS project with mostly JavaScript files, and a few scattering of random TypeScript Files, mostly in our API folder. Recently we set up Husky to pre-commit our git commits, and some of the settings changed and while next lint correctly lints, and our Husky settings work with both types of files, the VSCode extension for EsLint no longer works on JavaScript files. While removing plugin:#typescript-eslint/recommended fixes that issue, next lint and husky then fails with TS files.
eslintrc.json:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"plugin:#next/next/recommended",
"plugin:import/recommended",
"prettier",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"typescript": {}
}
},
"plugins": ["react", "prettier"],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": "off",
"react/display-name": "off",
"no-unused-vars": 2,
"no-undef": 2,
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
},
{
"pattern": "next/*",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react", "next/*"],
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
},
"globals": {
"React": "writable"
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}
package.json:
{
"name": "our-organization",
"version": "2.0.0",
"private": true,
"scripts": {
"dev": "next dev && next export",
"build": "next build",
"start": "NODE_ENV=production next start -p 8080",
"lint": "next lint",
"prettier-fix": "prettier --write .",
"find:unused": "npx next-unused",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"test": "jest --json --outputFile=./test-results/report.json",
"prepare": "husky install"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"next lint .",
"prettier --write ."
]
},
"dependencies": {
"#analytics/google-analytics": "^0.5.2",
"#apollo/client": "^3.4.15",
"#contentful/rich-text-plain-text-renderer": "^15.6.2",
"#contentful/rich-text-react-renderer": "^15.3.6",
"#emotion/cache": "^11.5.0",
"#emotion/react": "^11.5.0",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.48",
"#mui/material": "^5.0.3",
"#mui/styles": "^5.0.1",
"#mui/x-data-grid": "^5.0.1",
"#testing-library/user-event": "^13.2.1",
"algoliasearch": "^4.10.5",
"analytics": "^0.7.14",
"apollo-link-rest": "^0.8.0-beta.0",
"bad-words": "^3.0.4",
"contentful": "^9.0.0",
"date-fns": "^2.25.0",
"dateformat": "^4.5.1",
"formik": "^2.2.9",
"graphql": "^15.6.0",
"graphql-anywhere": "^4.2.7",
"javascript-time-ago": "^2.3.8",
"next": "^11.1.2",
"next-instantsearch": "^0.3.15",
"qs": "^6.10.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-iframe": "^1.8.0",
"react-instantsearch-dom": "^6.22.0",
"react-markdown": "^7.0.1",
"react-player": "^2.9.0",
"react-scripts": "^5.0.0",
"react-share": "^4.4.0",
"react-show-more-text": "^1.5.0",
"react-to-print": "^2.13.0",
"serverless-mysql": "^1.5.4",
"sharethis-reactjs": "^1.6.0",
"swr": "^1.0.1",
"universal-cookie": "^4.0.4",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/plugin-proposal-export-default-from": "^7.14.5",
"#next/eslint-plugin-next": "^11.1.2",
"#storybook/addon-actions": "^6.3.10",
"#storybook/addon-essentials": "^6.3.10",
"#storybook/addon-jest": "^6.3.10",
"#storybook/addon-links": "^6.3.10",
"#storybook/react": "^6.3.10",
"#testing-library/dom": "^8.5.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#typescript-eslint/eslint-plugin": "^5.11.0",
"babel-jest": "^27.2.0",
"babel-loader": "^8.2.2",
"babel-plugin-react-require": "^3.1.3",
"eslint": "^7.32.0",
"eslint-config-next": "^12.0.10",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.25.1",
"husky": "^7.0.4",
"jest": "^27.2.0",
"jest-html-reporters": "^2.1.6",
"jest-transform-graphql": "^2.1.0",
"lint-staged": "^12.1.2",
"prettier": "^2.4.0",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.4.3"
},
"engines": {
"node": ">=14.17.0",
"npm": ">=6.0.0"
}
}
I have found no good resources on addressing this issue for mixed projects like this. I do not know why we have typescript files as they were added before I joined.

This eslint file is missing the typescript parser:
"parser": "#typescript-eslint/parser",