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"
}
}