We Keep Coding

How to properly import makeStyles in reactJS from material UI in 5 version?

I have tried using following imports :-
import { makeStyles } from '#material-ui/core/styles';
import makeStyles from '#mui/styles/makeStyles';
#material-ui/core/styles'
import makeStyles from '#material-ui/styles'
import {makeStyles} from "#mui/material"
import {makeStyles} from "#mui/styles"
import { makeStyles } from '#material-ui/core/styles'
import { makeStyles } from '#material-ui/styles';
none of these imports are working and I am getting error:-
MUI: makeStyles is no longer exported from #mui/material/styles.
You have to import it from #mui/styles.
How to correctly import makeStyle from material UI
import React from 'react';
import { makeStyles } from '#material-ui/styles';
import { Toolbar, Divider, IconButton, Typography, Badge} from "#mui/material"
import MenuRoundedIcon from '#mui/icons-material/MenuRounded';
import NotificationsActiveRoundedIcon from '#mui/icons-material/NotificationsActiveRounded';
import AccountCircleRoundedIcon from '#mui/icons-material/AccountCircleRounded';
const useStyles = makeStyles((theme)=>({
title: {
flexGrow :1,
}
}))
const Header = () => {
const classes=useStyles()
}

I think you did not install the #mui/styles package, because this is a legacy solution, and it is not used in the #mui/material (deprecated from v5).
// with npm
npm install #mui/styles
// with yarn
yarn add #mui/styles

Ant-Design CSS not loading properly

I am having an issue with rendering my Ant-Design CSS on the first-render using React.js. I have a very basic page, that is just rendering a button.
import React from 'react';
import { Button } from 'antd';
const LoginPage = () => {
return (
<div>
<Button type="primary">Button</Button>
</div>
)
};
export default LoginPage;
I am trying to import the Ant-Design modules through the config-overrides.js file, as per the documentation:
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
Here is my index.js file:
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import 'normalize.css';
import App from './components/App/App';
import reducers from './reducers';
import { fetchUser } from './actions';
import * as serviceWorker from './serviceWorker';
const store = createStore(reducers, applyMiddleware(thunkMiddleware));
store.dispatch(fetchUser()).then(() => console.log(store.getState()));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
And here is my App.js and App.css for more reference:
import React, { Component } from 'react';
import LoginPage from '../LoginPage/LoginPage';
import DashboardPage from '../DashboardPage/DashboardPage';
import { Spin } from 'antd';
import './App.css';
import { connect } from 'react-redux';
class App extends Component {
constructor(props){
super(props);
this.state = {
loggedIn: false
}
}
componentDidMount(){
this.setState({loggedIn: true });
}
render() {
return <LoginPage/>
}
}
const mapStateToProps = (state) => {
console.log(state);
return {
user: state.currUser
};
};
export default connect(mapStateToProps)(App);
#import '~antd/dist/antd.css';
However, on the first render it will only show a normal button, before fixing itself a second later. Here are two images that show the problem:
And here is the page after the second render:

Just import this file in your jsx file or js file:
If you import it in App.jsx file once then no need to import in other files
import "antd/dist/antd.css";

Add #import '~antd/dist/antd.css';
To the top of either/both of App.css and Index.css.
Hope that helps! 👍.
P.S - If you are using a single component for instance lets say Input, then import only that part.
import 'antd/es/input/style/index.css';

this below import is used my react project with create-react-app cli
import 'antd/dist/antd.css',
use this import to your root component.

Do NOT import the root styles from ant, as they contain some global styles, unfortunately, and will affect yours styling anyway, this was addressed a lot of times to them, but still I found the only solution is to directly import the components styling like this (replace select with your component):
import "antd/lib/select/style/index.css";

In your index.js file, you can import ant style files:
import 'antd/dist/antd.css';

As of this issue, please use the minified version.
import "antd/dist/antd.min.css";

TypeError: undefined is not an object (evaluating 'store.getState')

I'm following the Let’s Build: Cryptocurrency Native Mobile App With React Native + Redux tutorial.
When I create my store in App.js, the app works fine
import { createStore, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import React, { Component } from 'react';
import { Platform, View } from 'react-native';
import { Provider } from 'react-redux';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { Header, CryptoContainer } from './src/components';
import rootReducer from './src/reducers';
const middleware = applyMiddleware(thunk, promise, logger);
const Store = createStore(rootReducer, compose(middleware, devTools({
name: Platform.OS,
hostname: 'localhost',
port: 5678
}), ));
export default class App extends Component {
render() {
return (
<Provider store={Store}>
<View>
<Header />
<CryptoContainer />
</View>
</Provider>
);
}
}
but when I move the store logic to a new file ./src/Store.js,
import { Platform } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';
const middleware = applyMiddleware(thunk, promise, logger);
const Store = createStore(rootReducer,compose(middleware,devTools({
name: Platform.OS,
hostname: 'localhost',
port: 5678
}),
)
);
export default Store;
and use it in App.js like
import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { Header, CryptoContainer } from './src/components';
import { Store } from './src/Store';
export default class App extends Component {
render() {
return (
<Provider store={Store}>
<View>
<Header />
<CryptoContainer />
</View>
</Provider>
);
}
}
I get
TypeError: undefined is not an object (evaluating 'store.getState')
What's causing my build (expo start) to fail when I import Store.js?

It seems the import statement is not right. It should be:
import Store from './src/Store';

if you're importing a single named export
e.g where you've done export const MyComponent = () => {} you'd import it like import { MyComponent } from "./MyComponent"
if you're importing a default export e.g where you've done const MyComponent = () => {} export default MyComponent you'd import it like import MyDefaultComponent from "./MyDefaultExport"

I got this error because I was exporting the wrong component from my main App file.
I was exporting this:
import React from 'react'
import { Provider } from 'react-redux'
import { createAppContainer } from 'react-navigation'
import Navigator from './src/components/Navigator'
import { store } from './src/store'
const App = createAppContainer(Navigator);
const Wrapped = props => (
<Provider store={store}>
<App />
</Provider>
)
export default Provider; // wrong!
That last line should be:
export default Wrapped; // right!

The answer from Itunu Adekoya shows that you can decide how you want to export / import, and in this case about personal preference, as there isn't a perf difference.
In the case where you have a lot of exports from a file, and perhaps some are unrelated or won't all be used together, it is better to export them individual as consts and then in other file only import what you need via import { } format, this will be sure to only include relevant imprts

in my case its casing & named import issue. imported as
import store from './Redux/Store'
it should be
import {Store} from './Redux/Store'

Error when importing local component file into my LoginForm component

I am new to react-native but I have successfully imported local files into another before and I am getting this error message:
Unable to resolve "./common" from "src/components/LoginForm.js"
I am using expo XDE for the first time as well if that provides any insight. This seems so simple but I can't seem to find if I have a typo.
Here is a screenshot of my project file structure:
These are my imports in LoginForm.js
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';
import { Form, FormSection } from './common'; // what am i doing wrong with this????
These are my imports in App.js
import React from 'react';
import LoginForm from './src/components/LoginForm';

you have to create an index.js in your /common, Then export all of you components:
export * from "./Button";
export * from "./Card";
export * from "./CardSection";
export * from "./Header";
export * from "./Input";
export * from "./Spinner";
also be sure to export { YourComponentName }; in each file as well!

Module not found: Can't resolve

I'm developing a component with React.js and the console is throwing the following error:
Failed to compile:
./src/components/file_tree.js
Module not found: Can't resolve '.src/components/directory.js' in
'D:\Treebeard\src'
Here you can see the code inside file_tree.js:
import React from 'react';
import ReactDOM from 'react';
import { Directory } from './components/directory.js';
The code inside directory.js:
import React from 'react';
import { TriangleDown } from './components/file_tree.js';
import { FolderIcon } from './components/file_tree.js';
import { formatName } from './components/file_tree.js';
import { renderTree } from './components/file_tree.js';
And here, the App.js code, just in case:
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchEngine } from './components/search_engine.js';
import { FileTree } from './components/file_tree.js';
import { Directory } from './components/directory.js';
I checked the file paths from both files and everything seems okay, but this error is thrown. Am I missing something about the file paths? Both directory.js and file_tree.js are inside './src/components' folder.
App.js is inside './src' folder.

Since you are accessing file path from same directory. It should be:
file_tree.js:
import React from 'react';
import ReactDOM from 'react';
import { Directory } from './directory.js';
directory.js:
import React from 'react';
import { TriangleDown } from './file_tree.js';
import { FolderIcon } from './file_tree.js';
import { formatName } from './file_tree.js';
import { renderTree } from './file_tree.js';
App.js: It's okay. Since you're accessing components file path from the current directory.
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchEngine } from './components/search_engine.js';
import { FileTree } from './components/file_tree.js';
import { Directory } from './components/directory.js';
For further help, see this post which will help you in relevant case.