I cloned a program written using typescript + react and I tried running the codebase but I got this error "Failed to compile. Unexpected token {" which occurred during build time and I don't know how to fix it. I tried installing babel-preset-react but no changes to the error. I've gone through similar questions but none solves my problem. How can I resolve this?
Here is my package.JSON
{
"dependencies": {
"@testing-library/dom": "^7.26.3",
"@types/lodash": "^4.14.159",
"@types/react-custom-scrollbars": "^4.0.7",
"@types/reactstrap": "^8.4.3",
"@types/testing-library__dom": "^7.5.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.5.0",
"class-validator": "^0.12.2",
"connected-react-router": "^6.8.0",
"formik": "^2.1.4",
"framer-motion": "^2.8.0",
"jquery": "^3.5.1",
"lodash": "^4.17.19",
"mobx": "^6.0.1",
"moment": "^2.27.0",
"popper.js": "^1.16.1",
"react": "^16.13.1",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.13.1",
"react-feather": "^2.0.8",
"react-icons": "^3.11.0",
"react-redux": "^7.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"reactstrap": "^8.5.1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"styled-components": "^5.1.1",
"typescript": "~3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"lint": "eslint ./src/**/*.ts ./src/**/*.tsx",
"postinstall": "rm -rf node_modules/@types/react-native"
},
"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": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.19",
"@types/node": "^14.11.8",
"@types/react": "^16.9.51",
"@types/react-dom": "^16.9.8",
"@types/react-redux": "^7.1.9",
"@types/react-router": "^5.1.8",
"@types/react-router-dom": "^5.1.5",
"@types/styled-components": "^4.1.8",
"@typescript-eslint/parser": "^3.6.0"
},
"babel": {
"presets": [ "react", "es2015"]
}
}
Here is a picture of the entire error message displayed
From the inspector tool, it made reference to line 1 of index.js file (in react-error-overlay) in node_modules containing this
!function(e, t) {
"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.ReactErrorOverlay = t() : e.ReactErrorOverlay = t()
}(window, (function() {
return function(e) {
var t = {};
function n(r) {
if (t[r])
return t[r].exports;
var u = t[r] = {
i: r,
l: !1,
exports: {}
};
return e[r].call(u.exports, u, u.exports, n),
u.l = !0,
u.exports
} ...
note: this is a minified code