How do I remove unwanted json3 module from my node_modules? - reactjs

I just upgraded my react app to include the newest react router v5.2 in order to get the useHistory hook. Things worked fine until I restarted for the first time next morning. Now when I use f5 to start a debugging session I get an exception in a node-modules file named json3. (BTW, the app runs okay in the browser after yarn start.) The exception is "SyntaxError: Unexpected token in JSON at position 1". The code is line 186 in json3.js:
186 parseSupported = !parse('"\t"');
I read the json3 README.md and it says: "JSON 3 is deprecated and no longer maintained. Please don't use it in new projects, and migrate existing projects to use the native JSON.parse and JSON.stringify instead. JSON 3 was a JSON polyfill for older JavaScript platforms." I don't know how this was installed and I don't think I need it. It's not listed in my package.json. It's at the top level in node_modules. How do I remove this?
Just in case it's needed, my package.json is this:
{
"name": "blue-duck-pwa",
"version": "0.1.0",
"private": true,
"devDependencies": {
"enzyme": "3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-react": "^7.18.3",
"faker": "^4.1.0",
"prettier": "2.0.1",
"react-scripts": "1.1.0",
"react-test-renderer": "16.0.0",
"redux-devtools": "^3.4.1",
"redux-devtools-dock-monitor": "1.1.4",
"redux-devtools-log-monitor": "2.0.1",
"redux-logger": "^3.0.6"
},
"dependencies": {
"add": "^2.0.6",
"base-64": "^0.1.0",
"bootstrap": "^3.3.7",
"chart.js": "2.9.3",
"cheerio": "0.19.x",
"file-saver": "^1.3.8",
"history": "^4.6.3",
"lodash": "^4.17.4",
"lodash.clonedeep": "^4.5.0",
"prop-types": "15.6.0",
"rc-dropdown": "^2.1.0",
"rc-menu": "^6.2.5",
"react": "16.13.0",
"react-auto-suggest": "^0.0.12",
"react-bootstrap": "0.32.0",
"react-chartjs-2": "2.6.4",
"react-dom": "16.13.0",
"react-notification-system": "0.2.16",
"react-portal": "^4.0.0",
"react-redux": "^5.0.6",
"react-router": "5.2.0",
"react-router-bootstrap": "0.25.0",
"react-router-dom": "5.2.0",
"react-scrollchor": "^4.2.1",
"react-sizes": "1.0.0",
"redux": "^3.7.2",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"uuid": "^3.1.0",
"xml2js": "0.4.19"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

Because of the conflicts I caused by upgrading my node_modules without regard to breaking changes (dumb I know), I was only able to fix this problem by starting over. I made another create-react-app, copied my package.json (with the corrected version numbers), ran yarn install, then copied over all my program data: src, .vscode, .eslintrc, etc, etc. With a few easy fixes, this worked. No exceptions deep in the node_modules.

Related

React App is not reloading when code changes are saved

When i do some updates on the code and save them the react app seems not to be functional , it stops and the mouse clicks seems not to be working. I'm obliged to manually refresh the page.
This is my package.json :
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.3",
"#webiny/ui": "^5.22.1",
"axios": "^0.21.1",
"firebase": "^9.6.10",
"material-ui": "^0.20.2",
"moment": "^2.29.3",
"npm": "^7.7.6",
"react": "^16.14.0",
"react-accessible-accordion": "^4.0.0",
"react-bootstrap": "^1.6.4",
"react-chartjs-2": "^4.1.0",
"react-dom": "^17.0.1",
"react-firebaseui": "^4.1.0",
"react-fontawesome": "^1.7.1",
"react-giphy-picker": "^1.1.1",
"react-icons": "^4.3.1",
"react-modal": "^3.14.3",
"react-paginate": "^7.1.3",
"react-redux": "^8.0.0",
"react-router-dom": "^5.3.1",
"redux": "^4.2.0",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "PORT=5000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm using VS code on linux Ubuntu 20
Try doing the the following changes.
If you're using npm
"overrides" : {
"react-error-overlay": "6.0.9"
}
If you are using yarn
"resolutions" : {
"react-error-overlay": "6.0.9"
}
After doing this, do install the packages once again and re-start the app. This should help

How to make create-react-app support .mjs files with webpack?

I'm trying to work with this twitch npm package (https://www.npmjs.com/package/twitch) and am running into some issues when deploying via creat-react-app / react-scripts.
From my understanding, the webpack config that is bundled with create-react-app doesn't like .mjs files that this npm package is using. So, I get the error below when I try to build the app.
./node_modules/twitch/es/API/Kraken/Channel/ChannelApi.mjs
app_1 | Can't import the named export 'Cacheable' from non EcmaScript module (only default export is available)
If I manually deleted the "es" folder, then the build worked and everything functioned as expected. However, this isn't a real solution because when I push to production and deploy there the node modules are re-installed and the build fails once again.
Build processes aren't really my strong suit and after googling around for a while I'm unable to find a solution. If anyone can assist or can point me in the right direction, that would be much appreciated!
If it helps, here is my package.json
{
"name": "ui",
"version": "1.0.0",
"license": "UNLICENCED",
"private": true,
"dependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/register": "^7.0.0",
"axios": "^0.19.2",
"babel-plugin-dynamic-import-node": "^2.2.0",
"btoa": "^1.2.1",
"clipboard-copy": "^3.0.0",
"connected-react-router": "^6.8.0",
"dateformat": "^3.0.3",
"dotenv": "^8.0.0",
"draft-js": "^0.11.0",
"draft-js-export-html": "^1.4.1",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"firebase": "^5.2.0",
"history": "^4.7.2",
"human-date": "^1.4.0",
"ignore-styles": "^5.0.1",
"immutability-helper": "^3.0.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"normalizr": "^3.2.4",
"prop-types": "^15.6.1",
"qs": "^6.5.2",
"react": "^16.8.0",
"react-animations": "^1.0.0",
"react-dnd": "^7.4.5",
"react-dnd-html5-backend": "^7.4.4",
"react-dom": "^16.8.0",
"react-ga": "^2.5.3",
"react-gtm-module": "^2.0.10",
"react-helmet": "^5.2.0",
"react-image-crop": "^8.3.0",
"react-is": "^16.8.0",
"react-loadable": "^5.5.0",
"react-loading-skeleton": "^2.0.1",
"react-on-screen": "^2.1.1",
"react-pdf": "^4.0.5",
"react-pose": "^4.0.6",
"react-redux": "^6.0.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-stripe-elements": "^2.0.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"semantic-ui-calendar-react": "^0.15.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1",
"styled-components": "^4.2.0",
"twitch": "^4.2.4",
"url-loader": "^1.1.2",
"validator": "^11.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint src",
"server": "NODE_ENV=production node server/bootstrap.js"
},
"engines": {
"node": "^10.0.0",
"yarn": "^1.12.3"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.8.1",
"eslint-plugin-react-hooks": "^3.0.0",
"prettier": "^2.0.2"
},
"proxy": "http://api:8080",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleNameMapper": {
"\\.worker.js": "<rootDir>/__mocks__/workerMock.js"
}
}
}
A suggestion presented at this GitHub comment was to add react-app-rewired to your project and then use this config-overrides.js file:
module.exports = function override(config) {
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return config;
}
In my project I was already using react-app-rewired, so I just added the rule from that snippet. This workaround fixed the error for me.
In the specific case of the twitch library, the author has suggested trying the #next release, although I haven't personally verified that solution yet.
Upgrading to the latest react-scripts version of 5.0.1 in my package.json as of writing this, has solved the issue for me.
Upgrading tolatest react-scripts version of 5.0.1 in my package.json as of writing this
use the code
npm install --save --save-exact react-scripts#5.0.1
or
yarn add --exact react-scripts#5.0.1

Tried To register two Views with the same name RTCVideoView in React Native

I am trying to run my app on Android but I am getting this error I don't know why I am getting this, I don't know what is causing this error in my project
I have tried tried many ways to resolve this issue but Still wasn't able to resolve this issue.
Tried To register two Views with the same name RTCVideoView
My Package.json is
{
"name": "Hello World",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^1.0.0",
"#react-native-community/async-storage": "^1.6.2",
"#react-native-community/slider": "^2.0.0",
"axios": "^0.19.0",
"connectycube-reactnative": "^1.7.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-autogrow-textinput": "^5.2.0",
"react-native-cache-store": "^1.0.2",
"react-native-calendars": "^1.212.0",
"react-native-deck-swiper": "^1.6.7",
"react-native-image-picker": "^1.1.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-navigation": "^3.0.0",
"react-native-scrollable-tab-view": "^0.10.0",
"react-native-swiper": "^1.5.14",
"react-native-vector-icons": "^6.6.0",
"react-native-view-overflow": "^0.0.4",
"react-native-webrtc": "^1.75.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"rn-prompt": "^1.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.0",
"#babel/runtime": "^7.6.0",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.4.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Any Help Would be Appreciated.
All you need is just clean up the cache by the following command
npm cache clean --force
This will resolve your problem most probably
The version of react-native-webrtc you have specified in your package.json is different from the version that connectycube-reactnative depends on. The latest connectycube-reactnative (1.8.0) depends on "react-native-webrtc": "1.69.1".
Double check the dependency of the version you have installed by looking at the node_modules/connectycube-reactnative/package.json and match the version specified in your package.json to the version the connectycube-reactnative requires.
The #arzundo answer is correct
And seems this issue is addressed in latest releases here https://github.com/ConnectyCube/connectycube-reactnative-samples/tree/master/RNVideoChat so you can simply try to pull the latest master

Redux Provider not working in React

so i've come across a strange issue where the Provider component wont work when i try and host my website. If i want to run it locally using yarn start it works fine with the Provider. I'm pretty sure my hosting setup is correct as if i replace the Provider with a jsx component it displays that jsx page. Heres what i have at the moment in my App.js file.
export default class App extends Component {
render() {
return (
<Provider store={store}>
<AppContainer />
</Provider>
);
}
}
Any help is much appreciated, thanks.
here is my package.json
{
"name": "ca-website",
"version": "0.1.0",
"private": true,
"homepage": "/build",
"dependencies": {
"axios": "^0.17.1",
"material-ui": "^0.20.0",
"raven-js": "^3.20.1",
"react": "^16.2.0",
"react-bootstrap": "^0.31.5",
"react-collapsible": "^2.0.3",
"react-device-detect": "^0.1.0",
"react-dom": "^16.2.0",
"react-ga": "^2.4.1",
"react-google-maps": "^9.4.3",
"react-icons": "^2.2.7",
"react-localization": "^0.1.6",
"react-lottie": "^1.0.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-tap-event-plugin": "^3.0.2",
"react-typist": "^2.0.4",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-loop": "git+ssh://git#stash.cabforce.com:7999/cod/redux-
loop#cod",
"redux-promise": "^0.5.3",
"redux-storage": "^4.1.2",
"redux-storage-decorator-filter": "^1.1.8",
"redux-storage-decorator-migrate": "^1.1.0",
"redux-storage-engine-localstorage": "^1.1.4",
"redux-thunk": "^2.2.0",
"sweetalert": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Managed to fix this, All the stuff above is correct, turns out it was a ReactRouter issue, i was wrapping my components in BrowserHistory, changed it to HashRouter and voila it worked. this thread helped me a lot React-router urls don't work when refreshing or writting manually

How do I fix flow error "TouchHistoryMath. Duplicate module provider"

I'm configuring a new project and have started importing some libraries when I get the following flow error. What does this error mean and how do I diagnose and fix? This is a react native project and I recently added the subscriptions-transport-ws library.
Launching Flow server
Spawned flow server (pid=13272)
node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/event/eventPlugins/TouchHistoryMath.js:0
TouchHistoryMath. Duplicate module provider
current provider. See: node_modules/react-native-gesture-responder/library/TouchHistoryMath.js:0
package.json
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"flow": "node_modules/.bin/flow",
"flow-stop": "node_modules/.bin/flow stop"
},
"dependencies": {
"#shoutem/ui": "^0.10.9",
"apollo-client": "0.8.0",
"graphql": "^0.9.1",
"graphql-tag": "^1.2.4",
"lodash": "^4.17.4",
"react": "~15.4.0",
"react-apollo": "^0.10.1",
"react-native": "0.41.2",
"react-native-lock": "^0.4.0",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-actions": "^1.2.1",
"redux-persist": "^4.4.0",
"redux-thunk": "^2.2.0",
"subscriptions-transport-ws": "^0.5.1"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "6.9.0",
"flow-bin": "0.37.0",
"jest": "18.1.0",
"react-test-renderer": "~15.4.0"
},
"jest": {
"preset": "react-native"
}
I believe it is a bug caused by two modules having the same name. A workaround that solved the issue for me was to tell Flow to ignore one of the modules. In other words, add one (or both) of the following lines under the [ignore] section of your .flowconfig file:
.*/node_modules/react-native/Libraries/Renderer/src/renderers/shared/shared/event/eventPlugins/TouchHistoryMath.js
.*/node_modules/react-native-gesture-responder/library/TouchHistoryMath.js
Note: the first of these files seems to be part of the core react-native library, while the second comes from a dependency used by #shoutem/ui. I'm not sure if there's any side effects with excluding any of these files from Flow.
You should comment these lines.
# UNSUPPORTED - HASTE
#module.system=haste
#module.system.haste.use_name_reducers=true
Reference: https://github.com/facebookarchive/node-haste
Unsupported/Archived Facebook no longer uses node-haste, and this
project was not being maintained.

Resources