How to fix “Warning: Prop className did not match” when using UIkit and NextJs

Question

The warning appears when using UIkit to style components in NextJS.

To reproduce:

Create new nextjs app: npx create-next-app {app-name}
cd {app-name} && npm i
Replace the code in pages/index.js with the snippet below (2nd part)
Create components/layout.js and add the snippet below (1st part)
npm run dev and go to http://localhost:3000
You'll see the warning in the console

The app functions normally, but the warnings are really a turn-off

 // components/layout.js (1st part) import Head from "next/head"; const Layout = ({ children }) => { return ( <> <Head> {/* UIkit CSS */} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" /> <title>NextJs App</title> {/* UIkit JS */} <script async src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js" /> <script async src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js" /> </Head> {children} </> ); }; export default Layout; // pages/index.js (2nd part) import Layout from "../components/layout"; const Home = () => { return ( <Layout> <div className="uk-child-width-expand@s uk-text-center" data-uk-grid> <div> <div className="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div className="uk-card uk-card-default uk-card-body">Item</div> </div> <div> <div className="uk-card uk-card-default uk-card-body">Item</div> </div> </div> </Layout> ); }; export default Home;

The error on the console appears as shown in the picture below

Answer 1

The problem seems to have been the way I was loading the scripts.

When I changed the script attribute async to defer the Warning was gone and the page was compiled without any warnings

How to fix “Warning: Prop className did not match” when using UIkit and NextJs

Question

1 answers

solution1
0 ACCPTED 2020-08-04 23:23:53

How to fix “Warning: Prop className did not match” when using UIkit and NextJs

Question

1 answers

solution1 0 ACCPTED 2020-08-04 23:23:53

solution1
0 ACCPTED 2020-08-04 23:23:53