Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
468 views
in Technique[技术] by (71.8m points)

reactjs - Ignore the errors className did not match Server and Client in Gatsby

I'm using css framework and place cdns like this

//public <head> tag
<Helmet>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/css/uikit.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/js/uikit-icons.min.js"></script>
</Helmet>

example inside the component

//Layout menu
<nav className="uk-navbar-container" data-uk-navbar="">
  <div className="uk-navbar-center">
    <ul className="uk-navbar-nav">
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/request">Request</Link></li>
    </ul>
  </div>
</nav>
...

I'm getting the errors for example

Warning: Prop `className` did not match. Server: "uk-navbar-container uk-navbar" Client: "uk-navbar-container"

UIkit JS will adjust class (className) when the page load, and I want to keep that for animation stuff. Then I've tried

// just add "uk-navbar" fixed the errors
<nav className="uk-navbar-container uk-navbar" data-uk-navbar="">
  <div className="uk-navbar-center">
    <ul className="uk-navbar-nav">
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/request">Request</Link></li>
    </ul>
  </div>
</nav>
...

But in reality there are so many to look up to fix the errors

How to turn off (ignore) the errors (warning) in Gatsby?

question from:https://stackoverflow.com/questions/66057434/ignore-the-errors-classname-did-not-match-server-and-client-in-gatsby

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Gatsby, by default, comes with a default ESLint configuration. As you can see from the docs:

Gatsby ships with a built-in ESLint setup. For most users, our built-in ESLint setup is all you need. If you know however that you’d like to customize your ESLint config e.g. your company has their own custom ESLint setup, this shows how this can be done

To disable the ESLint, just create an empty .eslintrc file in the root of your project.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...