So I have a standard react project created with the last version of create-react-app
Recently I moved it to typescript following the documentation here and started modifying some of the files to move them to ts/tsx.
Well now, after running npm start, on the browser console every single one of my log messages generated by winston, which were before showing the correct source file that generated them, are now showed by the browser console as being generated from a file called BrowserConsole.ts:29. I have no idea what this file is, I suppose it is some react build generated file?
Anyway what I need is to have back the correct mapping so I know which file is printing which log messages, as it was before adding typescript to the project.
I already tried all the solutions suggested here in the first answer (except the one which requires ejecting because I REALLY don't want to do that) without success.
As requested I add below the package.json and tsconfig.json of the project (note that I cannot modify most of the parameters on the last one because they get anyway instantly overwritten by the react scripts of create-react-app as soon as I run npm start)
package.json:
{
"name": "cra",
"version": "0.2.0",
"private": true,
"dependencies": {
"@date-io/date-fns": "^1.1.0",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-brands-svg-icons": "^5.11.2",
"@fortawesome/free-regular-svg-icons": "^5.11.2",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/react-fontawesome": "^0.1.7",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.39",
"@material-ui/pickers": "^3.3.10",
"@reduxjs/toolkit": "^1.6.0",
"@types/jest": "^26.0.23",
"@types/node": "^15.12.4",
"@types/openlayers": "^4.6.16",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",
"@types/web3": "^1.2.2",
"axios": "^0.21.1",
"change-case": "^4.1.0",
"classnames": "^2.3.1",
"date-fns": "^2.0.0-alpha.25",
"formik": "^2.2.9",
"formik-material-ui": "3.0.1",
"i18next": "^17.0.0",
"i18next-browser-languagedetector": "^3.0.1",
"i18next-xhr-backend": "^2.0.1",
"lodash": "^4.17.15",
"md5": "^2.2.1",
"mdi-material-ui": "^6.22.1",
"moment": "^2.24.0",
"multihashes": "^0.4.19",
"notistack": "^1.0.9",
"ol": "^5.3.2",
"qrcode.react": "^1.0.0",
"react": "^17.0.2",
"react-country-flag": "^2.3.0",
"react-dom": "^17.0.2",
"react-geolocated": "^3.2.0",
"react-i18next": "^10.7.0",
"react-infinite-scroll-component": "^4.5.2",
"react-qr-reader": "^2.2.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-sizes": "^2.0.0",
"react-swipeable-views": "^0.14.0",
"react-swipeable-views-utils": "^0.13.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"socket.io-client": "^2.2.0",
"source-map-explorer": "^1.7.0",
"typescript": "^4.3.4",
"web3": "^1.2.4",
"webfontloader": "^1.6.28",
"winston": "^3.2.1",
"winston-transport-browserconsole": "^1.0.1",
"yup": "^0.32.9"
},
"scripts": {
"analyze": "source-map-explorer build/static/js/main.* > sourcemap.html",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@types/md5": "^2.3.1",
"@types/qrcode.react": "^1.0.2",
"@types/react-qr-reader": "^2.1.4",
"@types/react-router-dom": "^5.1.9",
"faker": "^4.1.0",
"lorem-ipsum": "^1.0.6",
"react-test-renderer": "^17.0.2",
"size-limit": "^1.1.2"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
