4

I updated react-scripts@^4.0.3 as well as typescript@~3.7.2 to the latest however when I run npm run start I get the following error :

ReferenceError: Cannot access {variable name} before initialization

I'm aware of "Temporal Deadzones" however this app has had no problem with declaring exports for arrow functions like this, in fact, we declare most/all of our functions in this syntax:

export const someFunc = () => {}

Now it's only allowing me to export after declaration like this:

function someFunction(){} -or- const someFunction = () => {}

export { someFunction }

Question: How can I allow for the export shorthand function expression syntax, with these new package updates?

Filename: tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es2015",
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "jsx": "react",
    "baseUrl": "src",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "allowJs": true,
    "noEmit": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "./node_modules"
  ],
  "extends": "./tsconfig.paths.json"
}

Filename: tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@src": ["*"],
      "@pages": ["pages"],
      "@pages/*": ["pages/*"],
      "@hooks": ["core/hooks"],
      "@hooks/*": ["core/hooks/*"],
      "@components": ["core/components"],
      "@components/*": ["core/components/*"],
      "@containers": ["containers"],
      "@containers/*": ["containers/*"],
      "@services": ["core/services"],
      "@services/*": ["core/services/*"],
      "@configs": ["core/configs"],
      "@configs/*": ["core/configs/*"],
      "@assets": ["core/assets"],
      "@assets/*": ["core/assets/*"],
      "@models": ["core/models"],
      "@models/*": ["core/models/*"],
      "@store": ["core/store"],
      "@store/*": ["core/store/*"],
      "@utils": ["core/utils"],
      "@utils/*": ["core/utils/*"],
      "@styles": ["core/styles"],
      "@styles/*": ["core/styles/*"]
    }
  }
}

Filename: craco.config.js

const CracoAlias = require("craco-alias")

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.paths.json"
      }
    }
  ]


}

Filename: package.json

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@prettier/plugin-xml": "^0.12.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.1.2",
    "@types/bootstrap": "^4.5.1",
    "@types/classnames": "^2.2.11",
    "@types/debug": "^4.1.5",
    "@types/jest": "^24.9.1",
    "@types/jquery": "^3.5.5",
    "@types/lodash": "^4.14.168",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "@types/react-helmet": "^5.0.16",
    "@types/react-redux": "^7.1.15",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-select": "^3.1.2",
    "@types/react-table": "^7.0.27",
    "bootstrap": "^4.6.0",
    "classnames": "^2.2.6",
    "core-js": "^3.12.1",
    "debug": "^4.3.1",
    "file-selector": "^0.1.19",
    "husky": "^4.3.8",
    "i18next": "^19.8.4",
    "immer": "^6.0.9",
    "jquery": "^3.5.1",
    "lint-staged": "^10.5.3",
    "node-sass": "^4.14.0",
    "prettier": "^2.2.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.4.3",
    "react-dom": "^16.14.0",
    "react-dropzone": "^10.2.2",
    "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.3",
    "react-select": "^3.1.1",
    "react-table": "^7.6.3",
    "redux-thunk": "^2.3.0",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "BROWSER=none craco start",
    "build": "npm run check && craco build",
    "test": "craco test",
    "coverage": "CI=true npm test -- --colors --coverage",
    "check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md,xml,svg}\"",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md,xml,svg}\"",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "coverageReporters": [
      "text",
      "html"
    ],
    "moduleNameMapper": {
      "react-i18next": "<rootDir>/__mocks__/react-i18next.js",
      "^file-loader": "<rootDir>/__mocks__/file-loader.js"
    },
    "resetMocks": false
  },
  "prettier": {
    "singleQuote": true,
    "jsxSingleQuote": true
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md,xml,svg}": [
      "prettier --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "craco-alias": "^3.0.0"
  }
}
Jordan Davis
  • 378
  • 1
  • 4
  • 14

0 Answers0