How to fix " Failed to compile Unexpected token { " error

793 Views Asked by At

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 enter image description here

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

0

There are 0 best solutions below