React-scripts - Syntax Error: Unexpected token {

Question

I have been following this guide to do the upgrade from react-scripts-typescript to react-scripts and to upgrade my scripts to use react-scripts.

Running npm run start produces the following error:

     node_modules/webpack-dev-server/lib/Server.js:348
        } catch {
                    ^
        SyntaxError: Unexpected token {
        at createScript (vm.js:80:10)
        at Object.runInThisContext (vm.js:139:10)
        at Module._compile (module.js:617:28)
        at Object.Module._extensions..js (module.js:664:10)
        at Module.load (module.js:566:32)
        at tryModuleLoad (module.js:506:12)
        at Function.Module._load (module.js:498:3)
        at Module.require (module.js:597:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (/..mypath/node_modules/react-scripts/scripts/start.js:28:26)

Below are the versions that I use:

• react = 17
• react-scripts = 5.0
• typescript = 4.1.2
• node = 16.13.1

Package.json file:

{
  "dependencies": {
    "@types/node": "^17.0.1",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-redux": "^7.1.5",
    "apollo-upload-client": "^10.0.1",
    "autotrack": "^2.4.1",
    "core-js": "^3.6.5",
    "d3": "^5.9.2",
    "date-fns": "^2.8.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "fetch-mock": "^6.5.2",
    "file-saver": "^1.3.3",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.12.4",
    "history": "^5.0.0",
    "https-localhost": "^4.6.2",
    "material-ui-next-pickers": "0.0.19",
    "mdi-material-ui": "^5.1.1",
    "moment": "^2.24.0",
    "nivo": "^0.31.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-https-redirect": "^1.1.0",
    "react-redux": "^5.0.7",
    "react-router": "^6.0.0-beta.0",
    "react-router-dom": "^6.0.0-beta.0",
    "react-scripts": "^5.0.0",
    "redux-mock-store": "^1.5.3",
    "redux-saga": "^0.1å6.2",
    "redux-saga-test-plan": "^3.7.0",
    "reselect": "^4.0.0",
    "serve": "^11.3.2",
    "typescript": "^4.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "... react-scripts build",
    "test": "react-scripts test --env=jsdom --transformIgnorePatterns ....",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "engines": {
    "node": "16.13.1"
  },
  "devDependencies": {}
}

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "esnext"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "rootDir": "",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "alwaysStrict": false,
    "strictFunctionTypes": false,
    "strictPropertyInitialization": false
  }
}

Unsure where the error originates from, but this all what I use. Expecting the command npm start to start the react application.

The code works fine even without importing React which is a feature of react17.

Answer 1

I had the same issue, for me it was because I restarted my computer and NVM reset me down to node 8, using nvm to get back to 14 fixed it for me. Would suggest you confirm your node version.