We Keep Coding

Enzyme with Jest TC Failing

I am trying to run my Enzyme Tc but when i run Yarn run test it fails with following, I have tried updating the jest, enzyme and other things as well but cannot get it working
Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'Universal')
> 1 | import Enzyme from 'enzyme';
| ^
2 | import EnzymeAdapter from '#wojtekmaj/enzyme-adapter-react-17';
3 | import enableHooks from 'jest-react-hooks-shallow';
my setupTests file has following:
import Enzyme from 'enzyme';
import EnzymeAdapter from '#wojtekmaj/enzyme-adapter-react-17';
import enableHooks from 'jest-react-hooks-shallow';
Enzyme.configure({ adapter: new EnzymeAdapter() });
enableHooks(jest);
My current Package files is
{
"name": "abc-ui",
"version": "2.1.0",
"license": "UNLICENSED",
"jest": {
"resetMocks": false
},
"dependencies": {
"#date-io/date-fns": "1.x",
"#material-ui/core": "4.8.2",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "4.0.0-alpha.38",
"#material-ui/pickers": "3.2.10",
"#types/jest": "^29.2.2",
"#types/node": "13.7.7",
"#types/react": "16.9.23",
"#types/react-dom": "16.9.5",
"#wojtekmaj/enzyme-adapter-react-17": "^0.7.0",
"axios": "0.26.0",
"date-fns": "2.12.0",
"date-holidays": "1.4.12",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.7",
"execa": "3.4.0",
"formik": "2.0.4",
"lodash": "4.17.21",
"match-sorter": "^4.2.1",
"moment": "2.29.4",
"react": "17.0.1",
"react-app-polyfill": "1.0.4",
"react-dom": "17.0.1",
"react-idle-timer": "^5.4.1",
"react-redux": "7.1.3",
"react-router-dom": "5.1.2",
"react-scripts": "4.0.3",
"react-table": "^7.8.0",
"react-toastify": "5.5.0",
"redux": "4.0.4",
"redux-mock-store": "1.5.4",
"redux-thunk": "2.3.0",
"styled-components": "4.4.1",
"typescript": "3.9.9",
"web-vitals": "^0.2.4",
"xlsx": "^0.18.5",
"yup": "0.30.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --ci",
"test:ci": "react-scripts test --ci --coverage --reporters=default",
"test:coverage": "react-scripts test --coverage --watchAll=false",
"eject": "react-scripts eject",
"prettier": "prettier --write src/**/*.{js,jsx,css,scss}",
"lint": "eslint src",
"lint:report": "eslint src -o coverage/eslint.json -f json"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie >= 9"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie >= 9"
]
},
"devDependencies": {
"#babel/helper-create-class-features-plugin": "7.8.3",
"#testing-library/jest-dom": "5.11.5",
"#testing-library/react": "11.1.0",
"#testing-library/user-event": "12.1.10",
"babel-eslint": "10.1.0",
"eslint": "7.32.0",
"eslint-config-xo-react": "0.16.0",
"eslint-config-xo-space": "0.18.0",
"eslint-plugin-babel": "5.3.0",
"eslint-plugin-react": "7.16.0",
"husky": "4.0.0",
"jest-react-hooks-shallow": "^1.5.1",
"prettier": "1.19.1",
"pretty-quick": "2.0.1",
"prop-types": "15.7.2",
"react-test-renderer": "16.12.0",
"redux-devtools-extension": "2.13.8"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"resolutions": {
"**/ejs": "3.1.7",
"**/portfinder/async": "3.2.2",
"**/immer": "9.0.6",
"**/set-value": "4.0.1",
"**/shell-quote": "1.7.3",
"**/unset-value": "2.0.1",
"**/ansi-html": "0.0.8",
"**/recursive-readdir/minimatch": "3.0.5",
"**/selfsigned": "1.10.13",
"**/react-dev-utils/prompts": "2.4.2",
"react-scripts/prompts": "2.4.2",
"**/clean-css": "5.2.2",
"**/webpack-dev-server/ws": "7.5.7",
"**/default-gateway/execa": "2.0.1",
"**/sane/execa": "2.0.1",
"**/svgo/css-select": "3.1.1",
"**/css-what": "5.1.0",
"**/ansi-regex": "5.0.1",
"**/hosted-git-info": "2.3.0",
"**/react-dev-utils/browserslist": "4.16.6",
"**/webpack/watchpack": "2.0.0",
"**/webpack-dev-server/chokidar": "3.0.0",
"react-scripts/resolve-url-loader": "4.0.0",
"loader-utils": "2.0.3"
}
}
`
``
all my test case are failing with above error
I changes my version, even tried to update the enzyme and dependencies but ended in failure

Jest is not collecting coverage from all my Vue files

I am testing a Vue3 project with Jest and I am facing this issue: I recently added Jest to my Vue project through the command vue add unit-jest. This command configured the environment to run unit tests with the command npm run test:unit, which refers to vue-cli-service test:unit.
I've also configured Jest in my package.json file with options "collectCoverage":true and "collectCoverageFrom":["src/views/**.{js,vue}","!src/main.js"].
However, when I run the tests, I don't get a coverage report from all of my Vue components, only some of them. These components are located in src/views folder of my project.
This is my package.json file:
{
"name": "proyecto-tfg",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"webpack": "webpack --watch --mode development"
},
"dependencies": {
"#vue/test-utils": "^2.0.2",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.20.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chart.js": "^3.8.2",
"cookie-parser": "^1.4.6",
"core-js": "^3.22.8",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"error-stack-parser": "^2.1.4",
"express": "^4.18.1",
"express-session": "^1.17.3",
"flush-promises": "^1.0.2",
"jest-fetch-mock": "^3.0.3",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.3",
"mongoose": "^6.3.6",
"mongoose-unique-validator": "^3.1.0",
"morgan": "^1.10.0",
"nodemon": "^2.0.16",
"vue": "^3.2.37",
"vue-chartjs": "^4.1.1",
"vue-ellipse-progress": "^2.1.1",
"vue-material-design-icons": "^5.1.1",
"vue-router": "^4.0.16",
"vue-star-rating": "^2.1.0",
"vue-toastification": "^2.0.0-rc.5",
"vue3-carousel": "^0.1.40"
},
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/eslint-parser": "^7.18.2",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"#vue/babel-preset-jsx": "^1.3.1",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^28.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^8.2.5",
"babel-preset-env": "^1.7.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"jest": "^28.1.3",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names": 0,
"vue/require-v-for-key": 0
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleDirectories": [
"node_modules",
"src/views"
],
"automock": false,
"setupFiles": [
"./tests/setupJest.js"
],
"collectCoverage": true,
"collectCoverageFrom": [
"src/views/**.{js,vue}",
"!src/main.js"
],
"preset": "#vue/cli-plugin-unit-jest"
}
}
This is the complete list of my Vue components:
- ActorShow.vue
- AddProgramaLista.vue
- Buscador.vue
- CrearLista.vue
- Estadisticas.vue
- Filtros.vue
- Footer.vue
- Home.vue
- Insignias.vue
- InsigniasShow.vue
- Listas.vue
- Login.vue
- Navbar.vue
- Perfil.vue
- Programas.vue
- ProgramasShow.vue
- RecomendacionesUsuario.vue
- Registro.vue
- Sugerencias.vue
And when I run the command npm run test:unit, I get the message "Running coverage on untested files..." with this output from the console:
Thanks in advance

Module parse failed: Unexpected token You may need an appropriate loader to handle this file type. #splinetool/runtime

I am using a react portfolio template. I am new to react and webpack. I am trying to use Spline to add a 3D model to my page, but I'm getting the following error.
./node_modules/#splinetool/runtime/build/runtime.js 19847:16
Module parse failed: Unexpected token (19847:16)
You may need an appropriate loader to handle this file type.
| function fI(r, e) {
| var t = typeof r; > return e = e ?? hI, !!e && (t == "number" || t != "symbol" && dI.test(r)) && r > -1 && r % 1 == 0 && r < e;
| }
|
I have also installed react-script package and typescript which are required for spline to work.
My package.json file:
"name": "portfolio",
"version": "0.1.0",
"private": true,
"homepage": "/",
"basename": "/",
"dependencies": {
"#babel/core": "7.4.3",
"#splinetool/react-spline": "^2.2.1",
"#splinetool/runtime": "^0.9.73",
"#svgr/webpack": "4.1.0",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"babel-eslint": "10.0.1",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.7",
"babel-preset-react-app": "^9.1.2",
"bootstrap": "^4.5.3",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"eslint": "^5.16.0",
"eslint-config-react-app": "^4.0.1",
"eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "^1.7.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"google-map-react": "^1.1.7",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.14.0",
"react-accessible-accordion": "^3.3.3",
"react-animate-on-scroll": "^2.1.5",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.4.0",
"react-countup": "^4.3.3",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.14.0",
"react-helmet": "^5.2.1",
"react-icons": "^3.11.0",
"react-iframe": "^1.8.0",
"react-image-lightbox": "^5.1.1",
"react-modal-video": "^1.2.6",
"react-parallax": "^3.1.2",
"react-particles-js": "^2.7.1",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-scroll-up": "^1.3.5",
"react-scrollspy": "^3.4.3",
"react-slick": "^0.24.0",
"react-tabs": "^3.1.1",
"react-text-loop": "^2.3.0",
"react-tilt": "^0.1.4",
"react-video-tag": "0.0.10",
"react-visibility-sensor": "^5.1.1",
"resolve": "1.10.0",
"sass-loader": "^7.3.1",
"semver": "6.0.0",
"slick-carousel": "^1.8.1",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.3",
"ts-pnp": "1.1.2",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"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"
]
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"#babel/preset-react": "^7.18.6",
"#babel/runtime": "^7.18.6",
"sass": "^1.53.0",
"typescript": "^4.7.4"
}
}
Part of my React code:
class SliderOne extends Component {
render() {
return (
<div className="slider-activation">
<div className="inner">
<Spline scene="https://prod.spline.design/zijR8dif6Kg3gTyC/scene.splinecode" />
</div>
</div>```

I had the same problem, my version of node js was in 12.x.x, I changed to 16.x.x and everything works

SCSS variable export not imported in React

After a general package upgrade on my React project, SCSS variable imports in JavaScript stopped working. Imports themselves are still working, but variables exported from SCSS never appear in JavaScript.
Here's what I'm doing:
_variables.scss:
$akt-dark-teal: #035164;
$akt-light-blue: #007FAA;
:export {
primaryMain: $akt-dark-teal;
secondaryMain: $akt-light-blue;
}
In React:
import scss from './scss/parts/_variables.scss';
console.log(scss); // [object Object]
console.log(scss.primaryMain); // undefined
console.log(scss.secondaryMain); // undefined
This used to work before the package upgrade. The path to the imported SCSS file is correct, I verified it. Besides similar exports fail the same way with other files, no matter where they are or what is their name.
I think the problem lies somewhere in the packages:
The current package.json:
{
"name": "js-dashboard",
"version": "0.0.1",
"private": true,
"homepage": "/public/",
"dependencies": {
"#date-io/moment": "^2.10.8",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/pickers": "^3.3.10",
"#reduxjs/toolkit": "^1.5.1",
"#stripe/react-stripe-js": "^1.4.0",
"#stripe/stripe-js": "^1.13.2",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^13.1.5",
"#types/react-redux": "^7.1.16",
"axios": "^0.21.1",
"chart.js": "^3.1.1",
"cryptr": "^6.0.2",
"css-loader": "^5.2.4",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^7.24.0",
"firebase": "^8.4.1",
"history": "^5.0.0",
"html-react-parser": "^1.2.6",
"http": "0.0.1-security",
"https": "^1.0.0",
"immer": "^9.0.1",
"json-loader": "^0.5.7",
"libphonenumber-js": "^1.9.16",
"lodash": "^4.17.21",
"material-ui-phone-number": "^2.2.6",
"moment": "^2.29.1",
"nanoid": "^3.1.22",
"node-sass": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-chartjs-2": "^3.0.2",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-to-pdf": "0.0.13",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.32.11"
},
"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"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"
]
},
"devDependencies": {
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1"
}
}
The old package.json before the package upgrade:
{
"name": "js-dashboard",
"version": "0.0.1",
"private": true,
"homepage": "/public/",
"dependencies": {
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.54",
"#material-ui/pickers": "^3.2.10",
"#reduxjs/toolkit": "^1.5.0",
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.11.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-redux": "^7.1.11",
"axios": "^0.21.1",
"chart.js": "^2.9.4",
"cryptr": "^6.0.2",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^6.6.0",
"firebase": "^7.23.0",
"history": "^5.0.0",
"html-react-parser": "^0.14.2",
"immer": "^7.0.15",
"json-loader": "^0.5.7",
"libphonenumber-js": "^1.9.4",
"lodash": "^4.17.20",
"material-ui-phone-number": "^2.2.6",
"moment": "^2.29.1",
"nanoid": "^3.1.18",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-beautiful-dnd": "^13.0.0",
"react-chartjs-2": "^2.11.1",
"react-csv": "^2.0.3",
"react-dom": "^16.13.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
"react-to-pdf": "0.0.13",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
},
"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"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"
]
}
}

Update: fixed on CRA v5.0.0
This is a bug that appeared with the version 4 of create-react-app. Here is the issue about it on Github. It has been fixed since then and the fix should be available in the next release.
In the meantime, if you use something to override the webpack config of CRA you can fix it yourself by setting the compileType of css-loader to 'icss' as explained in this answer.

ReactJS randomly Unexpected token '<'

Project was created with create-react-app. Did not eject. There are no webpack configs. Default "react-scripts": "^3.4.0". On dev version there is no error. But on production when user stays long on one page and clicks the link it shows white page, and after updating the site(deploying new version). This error randomly appears. Output on console
Unexpected token '<'
and no other information.
There is my package.json
{
"name": "project-name",
"version": "2.0.0",
"description": "description",
"private": true,
"dependencies": {
"#bugsnag/js": "^6.5.0",
"#bugsnag/plugin-react": "^6.5.0",
"#glidejs/glide": "^3.4.1",
"#material-ui/core": "^4.4.1",
"#sentry/browser": "^5.11.2",
"#sentry/cli": "^1.49.0",
"#types/jest": "^25.1.3",
"#types/node": "^13.7.4",
"#types/rc-switch": "^1.9.0",
"#types/react": "^16.9.22",
"#types/react-dom": "^16.9.5",
"axios": "^0.19.0",
"chart.js": "^2.9.1",
"classnames": "2.2.6",
"debounce-promise": "^3.1.2",
"formik": "^1.5.8",
"jquery": "^3.4.1",
"logrocket": "^1.0.6",
"logrocket-react": "^4.0.1",
"moment": "2.24.0",
"moment-timezone": "^0.5.27",
"orgchart": "^2.1.5",
"prop-types": "^15.7.2",
"purgecss": "^1.4.0",
"rc-switch": "^1.9.0",
"react": "^16.9.0",
"react-autosuggest": "^9.4.3",
"react-chartjs-2": "^2.7.6",
"react-circular-progressbar": "^2.0.2",
"react-contextmenu": "^2.11.0",
"react-data-export": "^0.6.0",
"react-datepicker": "^2.9.6",
"react-dom": "^16.9.0",
"react-dropzone-component": "^3.2.0",
"react-intl": "2.4.0",
"react-perfect-scrollbar": "^1.5.3",
"react-redux": "7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.0",
"react-select": "^3.0.4",
"react-select-async-paginate": "^0.3.10",
"react-table": "latest",
"react-transition-group": "^4.3.0",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-saga": "^1.0.5",
"styled-components": "^5.0.0",
"tailwindcss": "^1.1.2",
"typescript": "^3.8.2",
"xlsx": "^0.15.5",
"yup": "^0.27.0"
},
"scripts": {
"start": "yarn run tailwind && react-scripts start",
"build": "yarn run tailwind && node ./purge-tailwindcss.js && cross-env react-scripts build",
"tailwind": "./node_modules/.bin/tailwind build ./src/assets/css/vendor/tailwind.base.css -c ./tailwind.js -o ./src/assets/css/vendor/tailwind.css",
"test": "react-scripts test --env=node",
"crt": "bash create-component.sh",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-plugin-import": "^1.13.0",
"cross-env": "^5.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^1.7.0",
"node-sass": "^4.12.0",
}
}

Don't know how. But after enabling sourcemap this error doesn't shown.
I removed this command from yarn build:
GENERATE_SOURCEMAP=false