react-router-dom is not working with console error - javascript

Here is my entry file
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
class Hello extends React.Component {
render () {
return <div>Hello!</div>
}
}
class Goodbye extends React.Component {
render () {
return <div>Goodbye!</div>
}
}
ReactDOM.render(
<BrowserRouter>
<div>
<Route path="/hello" component={Hello} />
<Route path="/goodbye" component={Goodbye} />
</div>
</BrowserRouter>,
document.getElementById('app')
)
Here is my dependency file
package.json
{
"name": "React-Router-Redux",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
},
"keywords": [],
"author": "Manoj Kumar",
"license": "ISC",
"dependencies": {
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
When I go http://localhost:8081/hello or http://localhost:8081/goodbye, it renders Cannot GET /hello or Cannot GET /goodbye with this console error
GET http://localhost:8081/hello 404 (Not Found)
or
GET http://localhost:8081/hello 404 (Not Found)
I use react-router-dom^4.1.2, react^15.6.1. I could not solve this please help me.
Thank You

This looks like a Webpack issue. Try adding the line
historyApiFallback: true
to the devServer block of your webpack.config.js. This will redirect the 404s back to /index.html where they should be properly routed by index.js.
Here's a thread discussing an issue similar to yours.

Related

Error: Failed to initialize react-native-reanimated library

I was working on a project on react native trying to create drawer navigation
I installed a navigation drawer, gesture handler, and reanimated libraries
and when I run I got an error
1st error :
ERROR Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
so I did according to the suggestion in this error I added plugins:['react-native-reanimated/plugin' in the babel.config.js and started with npm start ----reset cache that gave me another error:
2nd error
error: index.js: Unknown option: .Plugins. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
here is my package.json
{
"name": "Train",
"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": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.1",
"react": "18.1.0",
"react-native": "0.70.1",
"react-native-gesture-handler": "^2.6.2",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.4",
"react-native-screens": "^3.17.0",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.72.1",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
my index.js
import {AppRegistry} from 'react-native';
import App from './App';
import Login from './pages/Login';
import Home from './pages/Home';
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
my babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
Plugins:['react-native-reanimated/plugin'],//I added this line because of the 1st error
};
my app.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
//for stack
import Login from './pages/Login';
import Home from './pages/Home';
//for drawer
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import wallet from './pages/Drawer/wallet';
import orders from './pages/Drawer/orders';
const stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function MystackNav(){
return(
<stack.Navigator>
<stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
<stack.Screen name='Home' component={Home} options={{headerShown:false}}/>
<stack.Screen name='Drawer' component={MyDrawer}/>
</stack.Navigator>
)
}
function MyDrawer(){
return(
<Drawer.Navigator>
<Drawer.Screen name='cart' component={cart}/>
</Drawer.Navigator>
)
}
export default function App(){
return(
<NavigationContainer>
<MystackNav/>
</NavigationContainer>
)
}
Mine is working the only diff is:
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
};
};
package.json
{
"name": "awesomeproject2",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
"babel-preset-expo": "^9.2.0",
"expo": "^46.0.16",
"expo-status-bar": "^1.4.0",
"react": "~18.1.0",
"react-native": "^0.70.3",
"react-native-gesture-handler": "^2.7.1",
"react-native-reanimated": "^2.11.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-export-namespace-from": "^7.18.9",
"babel-preset-expo": "^9.2.0"
},
"private": true
}
1.Update babel.config.js
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
2.run expo start -c
references - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

How to use material-ui theme along with redux in gatsby

I am using material-ui theme along with redux-toolit in gatsby.
My theme.ts file:
import { createMuiTheme } from "#material-ui/core";
import { useSelector } from "react-redux";
import { State } from "./Types/SliceTypes";
export const Theme = () => {
const islit = useSelector((state: State) => state.themes.value);
const theme = createMuiTheme({
palette: {
type: islit ? "light" : "dark",
},
});
return theme;
}
Now When I import this Theme in gatsby-browser and gatsby-ssr file it give an error. Invalid hook call. Hooks can only be called inside of the body of a function component
Even if I don't use islit and use theme only that is inside the Theme function the code still doesn't work.
My gatsby-browser.js and gatsby-ssr.js file:
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/Global/store';
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "./src/Global/theme";
export const wrapRootElement = ({ element }) => {
return <Provider store={store}><ThemeProvider theme={Theme()}>{element}</ThemeProvider></Provider>;
};
My gatsby-config.js file:
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-material-ui`,
`gatsby-plugin-image`,
My package.json file:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#contentful/rich-text-react-renderer": "^14.1.3",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#reduxjs/toolkit": "^1.5.1",
"#types/react": "^17.0.3",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"dotenv": "^8.2.0",
"firebase": "^8.4.1",
"firebaseui": "^4.8.0",
"gatsby": "^3.3.0",
"gatsby-plugin-firebase": "^0.2.0-beta.4",
"gatsby-plugin-gatsby-cloud": "^2.2.0",
"gatsby-plugin-image": "^1.2.1",
"gatsby-plugin-manifest": "^3.2.0",
"gatsby-plugin-material-ui": "^3.0.1",
"gatsby-plugin-offline": "^4.2.0",
"gatsby-plugin-react-helmet": "^4.2.0",
"gatsby-plugin-sharp": "^3.2.1",
"gatsby-source-contentful": "^5.3.0",
"gatsby-source-filesystem": "^3.2.0",
"gatsby-transformer-remark": "^4.0.0",
"gatsby-transformer-sharp": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-redux": "^7.2.3",
"typescript": "^4.2.4"
},
"devDependencies": {
"#types/react-helmet": "^6.1.1",
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
I have a similar set up and was able to solve this by following this setup recommended by MUI; https://github.com/mui-org/material-ui/tree/next/examples/gatsby
In the file gatsby/plugins/gatsby-plugin-top-layout/TopLayout.js you can add your redux Provider;
import { Provider } from "react-redux";
import { ThemeProvider } from "#material-ui/core/styles";
import { Theme } from "../../src/Global/theme";
import store from '../../src/Global/store';
...
<Provider store={store}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{props.children}
</ThemeProvider>
</Provider>
...

Error :: Invalid hook call. Hooks can only be called inside of the body of a function component

I am trying to bundle my custom component using microbundle
Reference : https://github.com/developit/microbundle
My component package.json is this.
{
"name": "components",
"version": "0.0.0",
"description": "react.js component library",
"homepage": "",
"license": "ISC",
"main": "dist/index.js",
"source": "lib/index.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"scripts": {
"dev": "microbundle --external=\"react,react-dom\" --globals=\"React,ReactDOM\" watch --jsx React.createElement lib/*.js"
},
"dependencies": {
"axios": "^0.21.1",
"prop-types": "^15.7.2",
"react-debounce-input": "^3.2.3"
},
"devDependencies": {
"microbundle": "^0.13.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
when I Have component this
import React from 'react';
const Index = () => {
return (
<div>
<button onClick={()=>{
alert('==')
}}>{'state'}</button>
</div>
);
};
export default Index;
it works perfectly .I am using this component in NEXTJS or (server side react framework).
but when I use HOOKS it show me below error
import React from 'react';
const Index = () => {
const [state,setState] = React.useState(0)
return (
<div>
<button onClick={()=>{
alert('==')
}}>{'state'}</button>
</div>
);
};
export default Index;
error
my bundle.js
function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=e(require("react"));exports.Header=function(){return t.default.useState(0),t.default.createElement("div",null,t.default.createElement("button",{onClick:function(){alert("==")}},"state"))};
//# sourceMappingURL=index.js.map
You can try by removing the .next folder and running the server again.

I've looked at the single-spa site on how to create parcels, I get exceptions

I've been trying to implement single-spa parcels, but I've been getting the following exception
index.js:167 Uncaught (in promise) Error: During 'mount', parcel threw an error:
<Parcel /> was not passed a mountParcel prop, nor is it rendered where mountParcel is within the React context.
If you are using <Parcel /> within a module that is not a single-spa application, you will need to import mountRootParcel from single-spa and pass it into <Parcel /> as a mountParcel prop
at index.js:167
at index.js:114
The error is about a mountParcel attribute of which is passed down the parcel, I've pulled it from single-spa library but still I get the same issue, I've been battling with this problem for a while now, please assist
Please find my code below
parcel-config.js
// myParcel.js
import React from 'react'
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react'
import MyParcelComponent from './my-parcel-component.component';
export const MyParcel = singleSpaReact({
React,
ReactDOM,
rootComponent: MyParcelComponent
})
export function bootstrap(props) {
return MyParcel.bootstrap(props).then(res => {
debugger;
});
}
export function mount(props) {
return MyParcel.mount(props);
}
export function unmount(props) {
return MyParcel.unmount(props);
}
// in this case singleSpaReact is taking our inputs and generating an object with the required lifecycles.
MyParcelComponent.js
import React from 'react';
export default class MyParcelComponent extends React.Component {
render() {
return (
<div >
<h1>This is a parcel</h1>
</div>
);
}
}
single-spa application. attempt to consume the parcel
import React from 'react';
import Parcel from 'single-spa-react/parcel'
import * as singleSpa from 'single-spa';
import { MyParcel } from './parcel1/parcel-config';
export default class Root extends React.Component {
componentWillMount(){
console.log(singleSpa);
}
render() {
return (
<div style={{ marginTop: '100px' }}>
This was rendered by app 1, which is written in React.
<Parcel
config={MyParcel}
mountParcel={singleSpa.mountRootParcel}
wrapWith="div" />
</div>
);
}
}
package.json
{
"name": "simple-single-spa-webpack-example",
"version": "1.0.0",
"description": "A simple example of how to use webpack with single-spa",
"scripts": {
"watch": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/joeldenning/simple-single-spa-webpack-example.git"
},
"author": "Joel Denning",
"license": "MIT",
"bugs": {
"url": "https://github.com/joeldenning/simple-single-spa-webpack-example/issues"
},
"homepage": "https://github.com/joeldenning/simple-single-spa-webpack-example#readme",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^2.1.1",
"http-server": "^0.10.0",
"style-loader": "^0.23.1",
"ts-loader": "^2.3.2",
"typescript": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"#angular/common": "^4.3.3",
"#angular/compiler": "^4.3.3",
"#angular/core": "^4.3.3",
"#angular/platform-browser": "^4.3.3",
"#angular/platform-browser-dynamic": "^4.3.3",
"#angular/router": "^4.3.6",
"core-js": "^2.4.1",
"es6-promise": "^4.1.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.2",
"single-spa": "^3.9.1",
"single-spa-angular2": "^1.2.0",
"single-spa-react": "^2.9.0",
"single-spa-vue": "^1.3.0",
"vue": "^2.6.10",
"zone.js": "^0.8.16"
}
}

React Router "Content Security Policy directive" error

Trying to learn React Router, get blocker when try to route the login page.
I guess it might be:
Problem in Webpack config
Skipped some meta tag
Need to change domain in Windows Host file
Dependencies problem in package.json
General info: All actions are performed locally. No server or custom domain. Just classic localhost:3000.
Steps to reproduce:
Adding manually /login to http://localhost:3000
Error:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-GBZpdGedoBaq6YBC2+5oO7Dc8WC1XJ5EUI5Md05Lls8='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Screen:
login page error
For more visibility here is the github repository - Project link
Webpack.config.js:
var webpack = require('webpack');
var path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
watch: true,
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [
{
loader: "url-loader",
options: { limit: 40000}
},
'image-webpack-loader'
]
}]
},
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
historyApiFallback: true,
files: ['./dist/*.html'],
server: { baseDir: ['dist'] }
})
]
};
App.js
import React from "react";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import Home from './components/Home/Home';
import Login from './components/Login/Login';
export default () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login}/>
</Switch>
</BrowserRouter>
);
Login.js:
import React, {Component} from 'react';
import './Login.scss'
class Login extends React.Component {
render() {
return(
<div className="container2">
<h1>Login Page</h1>
</div>
)
}
}
export default Login;
package.json:
{
"name": "upstar_music",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --progress --colors",
"start": "webpack && npm run dev"
},
"author": "",
"license": "ISC",
"dependencies": {
"faker": "^3.1.0",
"lodash": "^4.17.2",
"react": "15.4.1",
"react-dom": "15.4.1",
"react-input-range": "^0.9.2",
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-dom": "^4.2.2",
"redux": "^3.6.0",
"redux-form": "^6.3.2",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"axios": "^0.18.0",
"babel-core": "^6.17.0",
"babel-loader": "^6.2.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.1.4",
"babel-preset-react": "^6.16.0",
"browser-sync": "^2.24.5",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^3.0.2",
"image-webpack-loader": "^4.3.1",
"node-fetch": "^2.1.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.13.1",
"url-loader": "^1.0.1",
"webpack": "2.2.0-rc.0",
"webpack-dev-server": "^2.11.2"
}
}
Index.js:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '../style/style.scss';
ReactDOM.render(<App />, document.getElementById('root'));
Content Security Policy (CSP) is giving the violation simply because the CSP does not allow unsafe-inline in the Script src. For React, simply adding the hash (SHA) might not work as React simply load the script (DOM) once, when you navigate to other pages, React simply throws you "Sha-...". Another method you might look into is nonce by providing dynamic nonce. You might be able achieve from what these guys had mentioned https://stackoverflow.com/a/49890126/2875928
I was also facing the same problem, if you are using webpack simply add a new key to modules.exports named devServer as
devServer:{ historyApiFallback: true }
sharing my webpack config with devServer for reference
my working webpack configuration
for the production, if you are using nginx you can do the configuration to server same html for all requests with path being handled by react on client side.

Categories