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
Related
I have an old project that uses react version 15.6.0, and I want to install a new library to use icons.
I tried FontAwesomeIcons library but it seems to not be compatible with this react version.
Here is the package.jason of the project:
"dependencies": {
"airbnb-js-shims": "^1.3.0",
"axios": "^0.16.2",
"babel-plugin-macros": "^3.1.0",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"dns": "file:./src/dns",
"glamor": "^2.20.40",
"js-cookie": "2.1.4",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"react": "^15.6.0",
"react-bootstrap": "^0.31.0",
"react-bootstrap-autosuggest": "^0.5.0",
"react-bootstrap-switch": "^15.5.0-a",
"react-bootstrap-typeahead": "^2.0.0-alpha.3",
"react-click-outside": "^2.3.1",
"react-datetime": "^2.9.0",
"react-dom": "^15.6.0",
"react-loading-spinner": "^1.0.12",
"react-redux": "^5.0.5",
"react-redux-multilingual": "^1.0.4",
"react-router-dom": "^4.1.1",
"react-scripts": "1.0.13",
"react-select": "^1.0.0-rc.10",
"react-sortable": "^1.2.0",
"react-sortable-component": "^1.0.0",
"react-sortable-hoc": "^0.6.8",
"react-toastify": "^4.1.0",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"smoothscroll-polyfill": "^0.4.0"
},
"devDependencies": {
"babel-eslint": "^8.0.2",
"babel-plugin-import": "^1.6.2",
"babel-plugin-transform-imports": "^1.4.1",
"eslint": "^3.19.0",
"eslint-config-google": "^0.8.0",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-react": "^7.0.1",
"react-app-rewired": "^1.3.5",
"react-scripts": "1.0.7"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build && mv build ./webagent && mkdir ./build && mv ./webagent ./build/webagent",
"build:pre_prod": "react-app-rewired build",
"build:prod": "react-app-rewired build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Tried installing older versions and other libraries but woudn't work either
React version 15.6.0 is quite old and was released on June 8, 2017. Most current icon libraries are built with newer versions of React in mind and may not be compatible with such an old version of React.
However, there are still some icon libraries that may be compatible with React 15.6.0. One such library is the "react-icons" library. According to their documentation, it supports React 0.14.x and above, which should include React 15.6.0.
You can install the "react-icons" library using npm or yarn, and then use it in your React application like this:
import { FaStar } from 'react-icons/fa';
function MyComponent() {
return (
<div>
<FaStar />
<p>Star icon</p>
</div>
);
}
Note that since React 15.6.0 is a very old version, you may run into compatibility issues with other libraries and components, so it may be worth considering upgrading to a newer version of React if possible.
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
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.
So I've implemented redux-form in my react native application and it works fine. Now, Client has asked if we could change normal field to material-ui like this, I tried implementing redux-form-material-ui in my react native application but it doesn't work. Here is the error which i got while running my application.
error: Error: Unable to resolve module `material-ui/Toggle` from `node_modules/redux-form-material-ui/lib/Toggle.js`: material-ui/Toggle could not be found within the project.
This is my package.Json
{
"name": "Demo",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#material-ui/core": "^4.9.10",
"react": "16.11.0",
"react-native": "0.62.1",
"react-native-flash-message": "^0.1.15",
"react-native-gesture-handler": "^1.6.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^1.7.1",
"react-native-router-flux": "^4.2.0",
"react-native-screens": "^2.4.0",
"react-native-touch-id": "^4.4.1",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-form": "^8.3.2",
"redux-form-material-ui": "^4.3.4",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "7.9.0",
"#babel/runtime": "7.9.2",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.58.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
So, My question is can we implement redux-form-material-ui for React-Native or it is limited to reactjs. if yes then can anyone tell what is the problem here?
redux-form-material-ui has not been updated in a very long time and Toggle is not supported.
When i include react-bootstrap-validation v "^0.1.11" i get the following error.
My page imports like this;
import React, { Component } from 'react';
import { Grid, Row, Col, Image, Button } from 'react-bootstrap';
import {withRouter} from "react-router-dom";
import contactImage from './../images/contact-img.png';
import { Form, ValidatedInput } from 'react-bootstrap-validation';
If i remove last line, page works correctly. And my package.json looks like this;
{
"name": "coinepo-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^3.3.7",
"history": "^4.7.2",
"moment": "^2.20.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-bootstrap": "^0.32.1",
"react-bootstrap-validation": "^0.1.11",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Anyone can help me?
Thank you all.
You should downgrade "react-bootstrap": "^0.32.1", to version before <0.30.0
Anything under react-bootstrap <0.30.0 works . For example 0.29.5.
For more info, check this link
The reason is
If you look at version 0.30.0 of React Bootstrap, there is no component named Input, but in React Bootstrap Validation v0.1.11 for the ValidatedInput component, there is a reference to the Input component, which leads to an error: super expression must be null or a function
https://github.com/heilhead/react-bootstrap-validation/pull/67#issuecomment-235331997