I am trying to use Chakra UI v2.4.9 with my Next.js v13.1.6 following the the Chakra UI step-up guide with Next.js, but it doesn't work.
I am using the src/ folder which contains app/ and pages/. as the provider step up says I created the _app.js file with the following content
// src/_app.js
import { ChakraProvider } from '#chakra-ui/react'
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp
Then I tried to use Chakra elements in my src/app/page.js as follows:
"use client"
import Image from 'next/image'
import { Inter } from '#next/font/google'
import styles from './page.module.css'
import { Button } from '#chakra-ui/react'
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return <div>
<h1>Hello Chakra UI</h1>
<Button colorScheme={"red"}>CLICK ME</Button>
</div>
}
It shows the button without any style, Not like the Chakra UI Button with the red color scheme.
I thought the issue was the _app.js file location that it is currently in src/_app.js and tried putting the file at
/_app.js at the project root
/src/_app.js root of src folder (current)
/src/pages/_app.js as the Chakra UI docs says
/src/app/_app.js
And it is still not working.
It seems like the Chakra documentation only warned about the app directory, and the other part is for the pages folder, like in older versions. To use any context in the app folder, I suggest you read the context part of the new doc. Following that, you would do it like so:
// app/theme-provider.js 👈🏽
'use client';
import { ChakraProvider } from '#chakra-ui/react'
export default function ThemeProvider({ children }) {
return (
<ChakraProvider>
{children}
</ChakraProvider >
);
}
// app/layout.js 👈🏽
import ThemeProvider from './theme-provider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
// app/page.js 👈🏽
"use client";
import { Button } from "#chakra-ui/react";
export default function Home() {
return (
<div>
<h1>Hello Chakra UI</h1>
<Button colorScheme={"red"}>CLICK ME</Button>
</div>
);
}
Related
So I am using ChakraUI and React JS to make a project. Whenever I start the project it gives me the error, "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')".
I didn't edit any global theme or anything in chakra. I just started making the navbar, designed with CSS. And when I try to run it, it shows me the error.
here is my navbar component
import React from "react";
import { MenuItems } from "./MenuItems";
import "./navbar.css";
function Navbar() {
return (
<>
<nav className='NavbarItems'>
<h1 className='navbar-logo'></h1>
<div className='menu-icon'></div>
<ul>
{MenuItems.map((item, index) => {
return (
<li key={index}>
<a className={item.cname} href={item.url}>
{item.title}
</a>
</li>
);
})}
</ul>
</nav>
</>
);
}
export default Navbar;
Navbar CSS file
.NavbarItems {
height: 80px;
display: flex;
justify-content: center;
}
App.js file
import { ChakraProvider } from "#chakra-ui/provider";
import Navbar from "./components/navbar";
function App() {
return (
<ChakraProvider>
<Navbar />
</ChakraProvider>
);
}
export default App;
So basically this is a problem with ChakraUI theme,even though I did not do anything with ChakraUI theme or whatsoever.
I added theme.js file which included the following:
// theme.js
// 1. import `extendTheme` function
import { extendTheme } from "#chakra-ui/react";
// 2. Add your color mode config
const config = {
initialColorMode: "light",
useSystemColorMode: true,
};
// 3. extend the theme
const theme = extendTheme({ config });
export default theme;
then I included the following in index.js file:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ColorModeScript } from "#chakra-ui/color-mode";
import theme from "./theme";
ReactDOM.render(
<React.StrictMode>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<App />
</React.StrictMode>,
document.getElementById("root")
);
And it worked. If anyone facing the same problem, you can check out https://chakra-ui.com/docs/features/color-mode.
Once I used extendTheme instead of an object for theme the error was gone. https://chakra-ui.com/docs/theming/customize-theme
The first thing you should do is to check the name of the message type (error, success, warning)
if you misspell it, the error will occure
I'm having a problem with the relative path for my react app. It seems super simple but I've double checked everything and I still can't get it to work.
The path is src > components(folder) > Navigation(folder) > navigation.js
The terminal says: "Failed to compile.
./src/App.js
Module not found: Can't resolve './components/Navigation/navigation' in '/Users/misbahhemraj/Desktop/facefind/src'"
This is my code in my app.Js:
import React, { Component } from 'react';
import navigation from './components/Navigation/navigation';
import './App.css';
class App extends Component {
render () {
return (
<div className="App">
<navigation />
{/*<Logo />
<ImageLinkForm />
<FaceRecognition />*/}
</div>
);
}
}
export default App;
This is my code in navigation.js
import React from 'react';
const Navigation = () => {
return (
<nav>
<p> Sign Out </p>
</nav>
)
}
export default navigation;
I've tried changing the ports and changing the syntax of the import statement but I can't get it it work. Any advice would be appreciated - thank you so much!
Look at your export component name, you have navigation and your component name it´s Navigation
import React from 'react';
const Navigation = () => {
return (
<nav>
<p> Sign Out </p>
</nav>
)
}
export default Navigation;
I'm trying to use styled components with next.js. I've added the babel plugin and added a custom _document.js. That all seems to be working fine.
However, when I try and use isomorphic-unfetch to getInitialProps into the page, the request returns data, but it doesn't make it into Props.
For _document.js I'm using the code from the next.js site here and have also tried a slightly different version from here which I also saw on the next.js docs site at some point.
My test page looks like this (also from the next.js docs):
import styled from 'styled-components';
import fetch from 'isomorphic-unfetch';
export default class MyPage extends React.Component {
static async getInitialProps({ req }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}
render() {
return (
<div>
Hello World {this.props.userAgent}
</div>
)
}
}
I also have an _app.js that looks like this:
import App, { Container } from 'next/app';
import Page from '../components/Page';
class MyApp extends App {
render() {
const { Component } = this.props;
return (
<Container>
<Page>
<Component />
</Page>
</Container>
);
}
}
export default MyApp;
And Page.js just has some styled components and a theme with a component that looks like this:
class Page extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<StyledPage>
<GlobalStyle />
<Meta />
<Header />
{this.props.children}
</StyledPage>
</ThemeProvider>
);
}
}
export default Page;
I feel like it's something to do with the new _document.js or _app.js not passing the props down somehow.
Clearly I'm pretty new to next.js, so apologies if it's something stupid. In the meantime, I'll keep plugging away to get a better understanding of what's going on. I wanted to ask in parallel here since I'm under some time pressure for this project.
Many thanks for any thoughts you might have.
Not long after posting, I worked out the issue. I guess posting on SO helps to understand the issue.
Essentially it was _app.js which was the problem, not _document.js as I had initially expected.
I needed to add pageProps to _app.js so that they were propagated down to the page:
import App, { Container } from 'next/app';
import Page from '../components/Page';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<Page>
<Component {...pageProps} />
</Page>
</Container>
);
}
}
export default MyApp;
While learning react JS from official documentation page, everything is working fine so far, now when I tried to export one method from another page in another page as below ( file name on top of each snippet)
src/Greeting.js
function UserGreeting() {
return <h1>Welcome back!</h1>;
}
function GuestGreeting() {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedin;
if(isLoggedIn) {
return <UserGreeting />;
} else {
return <GuestGreeting />;
}
}
export default Greeting;
src/LoginControl.js
import React from 'react';
import Greeting from 'Greeting';
function LoginButton(props) {
return <button onClick={props.onClick}>Login</button>;
}
function LogoutButton(props) {
return <button onClick={props.onClick}>Logout</button>;
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false})
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if(isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
export default LoginControl;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import LoginControl from './LoginControl';
ReactDOM.render(
<LoginControl />,
document.getElementById('login')
);
ReactDOM.render(<App />, document.getElementById('root'));
public/index.html
<body>
<div id="root"></div>
<div id="login"></div>
</body>
but it gives below error in the browser?
./src/LoginControl.js Module not found: Can't resolve 'Greeting' in '/opt/rqt/src'
Why am I getting this error?
Do I need to create a class in Greeting.js instead of direct export a function?
You are getting that error because you are importing the module incorrectly.
If you do:
import Greeting from 'Greeting';
Your compiler will look for the file in node_modules (and possibly other directories, depending on your configuration).
Since it's in the same directory, you have to import it as:
import Greeting from './Greeting';
Basically ./ means that the file exists at the current working directory.
Another Possible Solution
FWIW I had this issue when I was importing from a single library using different import syntax approaches on more than one line in my script.
Why did this happen to me?
This problem happened because I would import like this by hand:
import { Stuff, Things } from 'some-library', then as I was coding, VS Code would automatically bring in new imports. So, I'd end up with this in my script:
import { Stuff, Things } from 'some-library'
...
import Code from 'some-library/Code'
For some reason, when this occurs, this error would get thrown.
Tech Stack
Next.js
Material UI
I am building a small chat app with React and Flux via a tutorial, however the tutorial seems to be out of date as it is using a method from Alt (used with Flux) that throws the following error:
Cannot resolve module 'alt/utils/connectToStores'
...which I believe is coming from the line with #connectToStores. Below is my code. I looked into this issue and it seems like Alt was broken up into smaller packages, one of them being Alt-React (which is stumping me completely). My question is, how can I use this method in an up-to-date manner?
import React from 'react';
import mui from 'material-ui';
import MessageList from './MessageList.jsx';
import MessageBox from './MessageBox.jsx';
import Login from './Login.jsx';
import ChannelList from './ChannelList.jsx';
import connectToStores from 'alt/utils/connectToStores';
import ChatStore from '../stores/ChatStore';
// Material UI
import * as Colors from 'material-ui/lib/styles/colors';
import AppBar from 'material-ui/lib/app-bar';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
#connectToStores // es7 decorator with deprecated 'connectToStores'
class App extends React.Component {
constructor() {
super();
}
static getStores() {
return [ChatStore];
}
static getPropsFromStores() {
return ChatStore.getState();
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext() {
return {
muiTheme: getMuiTheme({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
})
};
}
render() {
var view = <Login />;
if (this.props.user) {
view = (
<div>
<div id="content-container">
<ChannelList />
<MessageList />
</div>
<MessageBox />
</div>
);
}
return (
<div>
<AppBar title="Chat App"/>
{{view}}
</div>
);
}
}
export default App;
The Alt Utils libraries have all been moved into a separate package at https://github.com/altjs/utils
Once installed
npm i --save-dev alt-utils
You can access the same libraries as the tutorial requires using:
import connectToStores from 'alt-utils/lib/connectToStores';
import {decorate, bind, datasource} from 'alt-utils/lib/decorators';