We Keep Coding

TypeError: URL is not a constructor while using react-router-dom

I have been working on one of my personal projects which includes use of react-router-dom.I switched from react-router-dom v5 to v6 and errors started popping out .I have used react-router before but the error shown this time is kind of different and not able to debug the thing since a while. Why it is showing this kind of error?
I
here is my App.js
import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import StreetNode from "./components/StreetNode";
import Nodes from "./components/Nodes";
import { Scheduler } from "./components/Scheduler";
function App() {
return (
<Router>
<Navbar />
<Routes>
{/* <Route path="/" exact component={Nodes} /> */}
<Route path="/" element={<Nodes />} />
<Route path="/node/:id" element={<StreetNode />} />
<Route path="/scheduler" element={<Scheduler />} />
</Routes>
</Router>
);
}
export default App;
index.js
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { NodeProvider } from "./NodeContext";
ReactDOM.render(
<NodeProvider>
<App />
</NodeProvider>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
package.json
{
"name": "lightitup",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.2",
"#date-io/date-fns": "^2.11.0",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.2.0",
"#mui/lab": "^5.0.0-alpha.61",
"#mui/material": "^5.0.2",
"#mui/styles": "^5.0.1",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"bootstrap": "^5.1.3",
"chart.js": "^3.6.2",
"chartjs-plugin-zoom": "^1.2.0",
"classnames": "^2.3.2",
"date-fns": "^2.27.0",
"react": "^17.0.2",
"react-chartjs-2": "^4.0.0",
"react-dom": "^17.0.2",
"react-google-charts": "^3.0.15",
"react-notifications-menu": "^1.0.6",
"react-router-dom": "^6.4.5",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"react-circular-slider-bar": "^1.3.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
}
}

You must wrap Router with BrowserRouter. I'm not sure if this is because of the error but you must wrap BrowserRouter anyway.

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/

NativeWind not working when used with React Navigation

NativeWind it's not working.
It was working when the content of the file tailwind.config.js was './App,{js,jsx,ts,tsx}' but not anymore since I implemented the React Navigation.
tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
package.json:
{
"name": "inovarlagos",
"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/native": "^6.0.12",
"#react-navigation/native-stack": "^6.8.0",
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"nativewind": "^2.0.7",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"tailwindcss": "^3.1.8"
},
"private": true
}
App.js:
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
./screens/HomeScreen.js:
import { View, Text } from 'react-native';
import React from 'react';
const HomeScreen = () => {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text className="text-red-200">Futuristik Lagos- Home</Text>
</View>
);
};
export default HomeScreen;
Project structure:
Result (TailWind not working):

I assume you're using NativeWind, since support for TailwindCSS ended for React Native recently.
First stop the expo server. Then, instead of starting it with expo start, run expo start -c to wipe the cache that NativeWind adds and restart the server.
Source: https://www.nativewind.dev/guides/troubleshooting

To fix this issue, simply clear your project's cache either by expo start -c or react-native start --reset-cache.

Material Ui React Theme customization is not applying

I'm using Nextjs with Material UI React I want to change default primary color to other color. I have used below code in app.js
import Layout from '../components/layout'
import '../styles/global.css'
import { createTheme , ThemeProvider } from "#material-ui/core/styles";
const theme = createTheme({
palette: {
primary: {
main: '#00ab55',
},
secondary: {
main: "#00ab55"
}
}
});
export default function MyApp({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}>
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider >
)
}
and used it in another component like below in color props.
<TextField className="num_input_field" color='primary' placeholder="phone number" inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} />
<Button variant="contained" color="primary">Go</Button>
But no any changes. I have done below multiple things to check
I have changed ThemeProvider to MuiThemeProvider
Also tried <ThemeProvider theme={theme}> to <ThemeProvider MuiTheme={theme}>
Also used createMuiTheme instead of createTheme. but here createMuiTheme is deprecated showing in visual studio code.
Also changed from "#material-ui/core/styles" to from "#material-ui/core"
Below is my package.json to see version.
{
"name": "xyz",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "^5.0.1",
"#mui/material": "^5.0.2",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-flags-select": "^2.1.2",
"sass": "^1.42.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.2"
}
}
Please help. Thank you.

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>
...