We Keep Coding

Tailwindcss does not get loaded in react application

I am using the following packages and have installed tailwindcss in the following project folder /home/admin/Desktop/Code/main_project/client/package.json:
{
"name": "react-app",
"version": "1.0",
"private": true,
"dependencies": {
"babel-eslint": "10.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router": "^6.3.0",
"react-scripts": "3.2.0",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.0.1",
"web3": "^1.6.1",
"web3-eth-contract": "^1.5.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"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": "^10.4.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24"
}
}
My tailwind.config.js looks like the following:
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
As you can see my react-project lies in a subfolder.
My postcss.config.js looks like the following:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
This is my index.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
In my index.js I am loading my index.css:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from "./redux/store";
import { Provider } from "react-redux";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
My App.js looks like the following:
import React, { useEffect, useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { connect } from "./redux/blockchain/blockchainActions";
import { fetchData } from "./redux/data/dataActions";
import "./App.css";
function App() {
const dispatch = useDispatch();
const blockchain = useSelector((state) => state.blockchain);
const data = useSelector((state) => state.data);
const [CONFIG, SET_CONFIG] = useState({
CONTRACT_ADDRESS: "",
SCAN_LINK: "",
NETWORK: {
NAME: "",
SYMBOL: "",
ID: 0,
},
NFT_NAME: "",
SYMBOL: "",
MAX_SUPPLY: 1,
WEI_COST: 0,
DISPLAY_COST: 0,
GAS_LIMIT: 0,
MARKETPLACE: "",
MARKETPLACE_LINK: "",
SHOW_BACKGROUND: false,
});
const getData = () => {
if (blockchain.account !== "" && blockchain.smartContract !== null) {
dispatch(fetchData(blockchain.account));
}
};
const getConfig = async () => {
const configResponse = await fetch("/config/config.json", {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
const config = await configResponse.json();
SET_CONFIG(config);
};
useEffect(() => {
getConfig();
}, []);
useEffect(() => {
getData();
}, [blockchain.account]);
return (
<>
<h1 className="text-3xl font-bold underline">Welcome</h1>
<>
);
}
export default App;
However, the components in my App.js do not get rendered with tailwindcss.
Any suggestions what I am doing wrong?
I appreciate your replies!

TypeError: [setState with createContext] is not a function - React

I am using React's Context API to call setCurrentUser below. But it gives me this error:
TypeError: setCurrentUser is not a function.
Upon logging console.log(useContext(globalContext)), I get the empty object {}.
I have manually converted my project from TS(where it worked by specifying setCurrentUser as type Dispatch) to JS, so I am not sure if that broke something...at least my react and react-dom packages should be current.
How do we make this work with JS? Thanks
Router.jsx - where I am calling setCurrentUser
import React, { useContext, useEffect } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import LoginPg from "../pages/LoginPg/LoginPg";
import ErrorHandler from "./ErrorHandler";
import ErrorPg from "../pages/ErrorPg/ErrorPg";
import useGet from "../../server_api/useGet";
import ProtectedRoute from "./ProtectedRoute";
import HomePg from "../pages/HomePg/HomePg";
import { globalContext } from "../../store/context/globalContext";
import CalendarPg from "../pages/Calendar/CalendarPg";
function Router() {
const { currentUser, setCurrentUser } = useContext(globalContext);
const [doGet] = useGet();
let user;
console.log(useContext(globalContext)); // <==== logs: {}
useEffect(() => {
doGet("auth/authenticate", (res) => {
if (res) {
user = res.username;
setCurrentUser(res);
} else {
console.log("Router: user not authenticated");
}
});
}, []);
return (
<BrowserRouter>
<ErrorHandler>
<Switch>
<Route path="/error" component={ErrorPg} />
<Route path="/login" component={LoginPg} />
<ProtectedRoute
path="/calendar"
Component={CalendarPg}
isAuth={currentUser}
key="uniquevalue"
/>
<ProtectedRoute path="/" Component={HomePg} isAuth={currentUser} />
</Switch>
</ErrorHandler>
</BrowserRouter>
);
}
export default Router;
globalContext.jsx
import { createContext, useState } from "react";
export const globalContext = createContext({});
export default function GlobalContext(props) {
const [currentUser, setCurrentUser] = useState(null);
return (
<globalContext.Provider value={{ currentUser, setCurrentUser }}>
{props.children}
</globalContext.Provider>
);
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"homepage": "/",
"dependencies": {
"#fullcalendar/daygrid": "^5.9.0",
"#fullcalendar/interaction": "^5.9.0",
"#fullcalendar/react": "^5.9.0",
"#fullcalendar/timegrid": "^5.9.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"antd": "^4.16.13",
"axios": "^0.21.1",
"bootstrap": "^5.1.1",
"font-awesome": "^4.7.0",
"fullcalendar": "^5.9.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"query-string": "^4.3.4",
"react": "^17.0.2",
"react-calendar": "^3.4.0",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-modal": "^3.14.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"sass": "^1.39.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cypress": "npx cypress open"
},
"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": {
"cypress": "^7.5.0"
}
}

You need the consumer (Router) to be a child of the provider (GlobalContext).
Also your component names should start with an Upper case.
import { GlobalContext } from "../../store/context/GlobalContext";
const App = () => {
const [currentUser, setCurrentUser] = useState(DEFAULT_USER);
return (
<GlobalContext.Provider value={{ currentUser, setCurrentUser }}>
<Router />
</GlobalContext.Provider>
);
};

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.

Module not found: Can't resolve '#material-ui/lab/TabContext' in '/home/sanika/Desktop/Coding/React/my-forms/src/Components'

I am new to ReactJs and I am trying to implement TabContext using material UI library of react and I am getting the error above. I think it's due to path. I tried to install material UI again but it didn't help. I am sharing my code.Please check
my-app/src/App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './Components/Navbar';
import Form from './Components/Form';
function App() {
return (
<div className="App">
<h1>Hi</h1>
<Navbar></Navbar>
</div>
);
}
export default App;
my-app/src/Components/Navbar.js
import React from 'react'
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tab from '#material-ui/core/Tab';
import {TabContext} from '#material-ui/lab/TabContext';
import {TabList} from '#material-ui/lab/TabList';
import {TabPanel} from '#material-ui/lab/TabPanel';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
function Navbar() {
const classes = useStyles();
const [value, setValue] = React.useState('1');
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<TabContext value={value}>
<AppBar position="static">
<TabList onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" value="1" />
<Tab label="Item Two" value="2" />
<Tab label="Item Three" value="3" />
</TabList>
</AppBar>
<TabPanel value="1">Item One</TabPanel>
<TabPanel value="2">Item Two</TabPanel>
<TabPanel value="3">Item Three</TabPanel>
</TabContext>
</div>
);
}
export default Navbar
package.json
{
"name": "my-forms",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"material-ui": "^0.20.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts 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"
]
}
}

In my-app/src/Components/Navbar.js
try this:
import React from 'react'
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tab from '#material-ui/core/Tab';
import TabContext from '#material-ui/lab/TabContext';
import TabList from '#material-ui/lab/TabList';
import TabPanel from '#material-ui/lab/TabPanel';

You need to install #material-ui/lab and #material-ui/core as well.
npm install #material-ui/lab
npm install #material-ui/core
Then use these imports:
import Tab from '#material-ui/core/Tab';
import TabContext from '#material-ui/lab/TabContext';
import TabList from '#material-ui/lab/TabList';
import TabPanel from '#material-ui/lab/TabPanel';
The above tested for #material-ui/core v4.12 and #material-ui/lab v4.0.

It seems like you are actually trying to import some components from the lab side of material-ui but from your package I don't see it installed in your project. To use the lab components you need to install a separate dependency.
https://material-ui.com/components/about-the-lab/
So basically will need to install it.
npm install #material-ui/lab

You need to install #mui/lab and #mui/material.
https://mui.com/material-ui/about-the-lab/#installation
npm install #mui/lab #mui/material
For yarn:
yarn add #mui/lab #mui/material

If you've installed, #material-ui/lab then change your import in Navbar.js
import TabContext from '#material-ui/lab/TabContext';
// or
import { TabContext } from '#material-ui/lab';
Ref:- https://material-ui.com/api/tab-context/
You're doing import {TabContext} from '#material-ui/lab/TabContext'; which is incorrect. Same correction would be needed for TabList and TabPanel

react i18next hasLoadedNamespace: i18next was not initialized undefined

Yarn start causes intermittent errors.
No correction has been made to the code that is causing the error.
It is also common to save and recompile code from other files.
Once in a while you can render without any problems.
Error
Error image
Console alert image
TypeError: t(...).map is not a function
*Please check the image.
I made a map of the json file that i18next uses to translate.
i18next: hasLoadedNamespace: i18next was not initialized undefined
,
key "about" for languages "en" won't get resolved as namespace "header" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!! is printed from the console with the error mentioned earlier.
Package.json
{
"name": "homepage",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/i18next": "^13.0.0",
"#types/react-i18next": "^8.1.0",
"i18next": "^19.8.4",
"i18next-xhr-backend": "^3.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-i18next": "^11.7.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts 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": {
"#types/react": "^17.0.0",
"#types/react-router-dom": "^5.1.6",
"#types/styled-components": "^5.1.4",
"#typescript-eslint/eslint-plugin": "^4.9.0",
"#typescript-eslint/parser": "^4.9.0",
"eslint": "^7.14.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.2.1",
"prettier-eslint": "^12.0.0",
"prettier-eslint-cli": "^5.0.0"
}
}
Dir
root
|-public
| |-locales
| |-productWS
| |-en.json
| |-ko.json
|-src
| |-components
| | |-MwsCard.tsx
| |-systems
| | |-ProductWs.ts
| |-i18n.ts
en.json
{
"miniTitle":"ABC",
"title":"ABCDEFG",
"text": "abcdefg",
"version":[
{
"name": "1",
"sensor": ["1", "2", "3", "4", "5"],
"src":"/img/1.jpg"
},
{
"name": "2",
"sensor": ["1", "2", "3", "4", "5", "6", "7"],
"src":"/img/2.jpg"
}
]
}
ProductWs.tsx
import React from 'react';
import { useTranslation } from 'react-i18next';
import { MwsCard } from '../../components';
import { Wrap, Container, TitleH5, TitleH2, TextP1, CardContainer } from './ProductWsStyle';
interface VersionProps {
name: string;
sensor: string[];
src: string;
}
function ProductWs() {
const { t } = useTranslation('productWsDB');
return (
<Wrap>
<Container>
<TitleH5>{t('miniTitle')}</TitleH5>
<TitleH2>{t('title')}</TitleH2>
<TextP1>{t('text')}</TextP1>
<CardContainer>
****Error point---------------
{t<VersionProps[]>('version', { returnObjects: true }).map(item => (
<MwsCard key={item.name} name={item.name} sensor={item.sensor} src={item.src} />
))}
****Error point---------------
</CardContainer>
</Container>
</Wrap>
);
}
export default ProductWs;
MwsCard.tsx
import React from 'react';
import * as S from './MwsCardStyle';
import { Version } from './MwsProdDBType';
function MwsCard({ name, sensor, src }: Version) {
return (
<S.Container>
<S.Img src={src} alt={name} />
<S.Info>
<S.Title>{name}</S.Title>
{sensor.map(item => (
<S.Spec key={item}>{item}</S.Spec>
))}
</S.Info>
</S.Container>
);
}
export default MwsCard;
i18n.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import backend from 'i18next-xhr-backend';
const userLanguage = window.navigator.language;
i18n
.use(backend)
.use(initReactI18next)
.init({
lng: localStorage.getItem('language') || userLanguage || 'en',
fallbackLng: 'en',
debug: true,
keySeparator: '.',
interpolation: {
escapeValue: false,
},
react: {
wait: true,
useSuspense: false,
},
backend: {
loadPath: '/locales/{{ns}}/{{lng}}.json',
},
});
export default i18n;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './i18n';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);
reportWebVitals();
app.js
import React, { Suspense } from 'react';
import Routes from './Routes';
import Theme from './global-styles/Theme';
import './global-styles/import-fonts.css';
import { GlobalStyle } from './global-styles/GlobalStyle';
function App() {
return (
<Suspense fallback={<div>Loading...</div>} maxDuration={5000}>
<Theme>
<GlobalStyle />
<Routes />
</Theme>
</Suspense>
);
}
export default App;

You need to add the i18next provider into your react tree.
import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
import './i18n';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<I18nextProvider i18n={i18n}>
// ---^
<App />
</I18nextProvider>
</React.StrictMode>,
document.getElementById('root'),
);
reportWebVitals();