So I've been trying to figure this for a while right now and I'm at the end of my rope here.
I'm trying to create a react application that makes simple API calls but I keep getting this error that prevents my lodable component from being rendered.
It comes out as a props.error which I log into chrome's console.log()
In the chrome's console I get:
TypeError: fs.existsSync is not a function
at Object.hasBinary (extensions.js:404)
at module.exports (binding.js:11)
at Object.<anonymous> (index.js:14)
at Object../node_modules/node-sass/lib/index.js (index.js:471)
at __webpack_require__ (bootstrap:772)
at fn (bootstrap:141)
at Object../src/routes/app/routes/tacas/components/FeatureCallouts.js (lib sync:9)
at __webpack_require__ (bootstrap:772)
at fn (bootstrap:141)
at Object../src/routes/app/routes/tacas/components/template.js (styles.scss?8f6b:45)
at __webpack_require__ (bootstrap:772)
at fn (bootstrap:141)
at Object../src/routes/app/routes/tacas/index.js (index.js:1)
at __webpack_require__ (bootstrap:772)
at fn (bootstrap:141)
I think it has something to do with the './node_modules/node-sass/lib/binding.js' file which is:
/*!
* node-sass: lib/binding.js
*/
var errors = require('./errors');
/**
* Require binding
*/
module.exports = function(ext) {
if (!ext.hasBinary(ext.getBinaryPath())) {
if (!ext.isSupportedEnvironment()) {
throw new Error(errors.unsupportedEnvironment());
} else {
throw new Error(errors.missingBinary());
}
}
return require(ext.getBinaryPath());
};
Also in the build CMD terminal, I am also getting this Warning:
./node_modules/node-sass/lib/binding.js
19:9-37 Critical dependency: the request of a dependency is an expression
I've looked at other questions similar to this but none seem to work for me. For instance, I don't have a webpack.config file at all.
Just in case here is my package.json file:
{
"name": "material",
"private": true,
"version": "4.0.0",
"main": "",
"homepage": "",
"scripts": {
"start": "react-app-rewired start",
"stop": "taskkill -F -IM node.exe",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject",
"prettier": "prettier --write ./src/**/**/**/*"
},
"dependencies": {
"@babel/runtime": "7.0.0-beta.55",
"@material-ui/core": "^1.5.1",
"@material-ui/icons": "^2.0.2",
"@material-ui/lab": "^1.0.0-alpha.10",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"core-js": "^2.5.7",
"date-fns": "2.0.0-alpha.7",
"downshift": "^2.1.1",
"echarts": "^4.1.0",
"echarts-for-react": "^2.0.14",
"element-resize-event": "^2.0.9",
"font-awesome": "~4.7.0",
"history": "^4.6.1",
"jquery": "^3.4.1",
"jquery-slimscroll": "~1.3.8",
"material-ui-pickers": "1.0.0-rc.11",
"prop-types": "^15.6.2",
"rc-queue-anim": "^1.6.5",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-hot-loader": "^4.3.4",
"react-loadable": "^5.5.0",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "5.0.0-alpha.6",
"react-scripts": "2.0.0-next.3e165448",
"redux": "^4.0.0",
"redux-immutable-state-invariant": "^2.1.0",
"redux-thunk": "^2.3.0"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions"
],
"production": [
">0.25%",
"not op_mini all",
"ie 11"
]
},
"devDependencies": {
"bootstrap": "^4.4.1",
"node-sass": "^4.13.1",
"prettier": "^1.14.2",
"react-app-rewire-provide-plugin": "^1.0.0",
"react-app-rewired": "^1.5.2",
"sass-loader": "^7.0.1"
}
}
Please help, I'm an intern at work and this is the first project I've gotten and I don't want to mess it up.
VS Code auto imported TRUE
from node-sass while I was typing thus adding import {TRUE} from 'node-sass'
in the file, which resulted in this error.
Removing it fixed the issue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With