Extra attributes from the server: style

[desaijay315]

Bug report

Describe the bug

While running npm run dev, there is this error on the console, but while I do npm run build and npm run start. Now sometimes I do receive the errors in the console and sometimes I dont

Below is the explanation:

Currently, I am rendering this component dynamically.

Example here -

main.js

import React, {Fragment} from 'react';
import dynamic from 'next/dynamic'


const xyzComponent = dynamic(
    () => import('./xyzComponent')
)

const Main = () =>{
    return(
        <Fragment>
            <main>
                 <...>
                <xyzComponent />
               <.....>
            </main>
        </Fragment>
    )
}


export default Main;

index.js

import Main from './Main';

const Index = () =>{
    return(
        <Fragment>
            <main>
                <BaseLayout >
                     
                <BaseLayout />
           
            </main>
        </Fragment>
    )
}

xyzComponent.js

import React, {Fragment} from 'react';

const xyzComponent = () =>{
    return(
        <>
             <section className="page_section driving_transformation">
                <div className="container-fluid py-5">
                    <div className="row justify-content-center">
                        <div className="col-md-10">
                            <h2 className="section_heading fadeInDown wow">DIGITAL DATA</h2>
                            <div className="row d-flex align-items-center mt-3">
                                <div className="col-md-8">
                                    <p className="fadeInUp wow">WE DO DIGITAL TRANSFORMATION
                                    </p>
                                </div>
                                <div className="col-md-4">
                                    <a href="#"  className="btn btn-primary fadeInLeft wow">HERE’S HOW
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
         </section>       
        </>
    )
}



export default xyzComponent;

There are other multiple components which are added in the main.js file.

I have added wow.js in my BaseLayout Head Tag and animate.css in my _app.js file.
What I am trying to do is convert my HTML CSS and JS to Next JS APP.

Can someone please look into this? Is this normal behaviour?

Complete error here

index.js:1 Warning: Extra attributes from the server: style
in h2 (created by xyzComponent)
in div (created by xyzComponent)
in div (created by xyzComponent)
in div (created by xyzComponent)
in section (created by xyzComponent)
in xyzComponent (created by Main)
in main (created by Main)
in Main (created by Index)
in BaseLayout (created by Index)
in Index (created by MyApp)
in div (created by MyApp)
in MyApp
in Container (created by AppContainer)
in AppContainer

Thanks

[LassiterJ]

After looking through your post and online for references I want to say the issue is likely in your implementation of wow.js.

Reasoning:

wow.js is not SSR compatible and could definitely cause issues if your server is trying to implement them rather than client.

Checkout this article I found that might help you figure out what went wrong.

If you still can't figure it out, post your wow.js implementation and other relevant code and we can work it out.

[desaijay315]

Hi @LassiterJ , Yes you are right. I have implemented wow js and have tried the above solution before pushing the question here.

What I did for now is downgraded my NextJs version to 9.0.1 and issue seem to be solved.

I do agree that this might not be the ideal way to downgrade the version where I will not be able to use getStaticProps. But I had figured that the issue is with WOW JS. Thanks for pointing that out.

Can I get the list of the JS libraries which are enabled with SSR? (I know this ask is too much) This will sort my life henceforth.

I would like to say that since this is my second application in NextJS, really appreciate the work done by the founders and everyone who contributed.

Though as per your suggestion, will try this once more, and keep you posted. But the only catch here, is there are several components which need to be addressed, hence that was the reason I downgraded the NExt JS version

Thank you so much!

[LassiterJ]

I tried to look for a list of SSR packages for you but I had no luck. Best bet is if you need a packaged, determine where you need it to work (client side, server side, or both) and find something that works for you.

[desaijay315]

Yes, mee too. No luck. I am wondering if Nextjs team might at least have a list at someplace with them 👍

[desaijay315]

To be honest - I always get confused while choosing packages - bcox many a times we need to deal with raw htlm,css, js libraries provided by UI team. Sometimes js libraries might not support react and sometimes we need to convert the JS part to React which is I think a terrible way to handle react js projects. This is just my personal opinion.

Maybe the good way is to think in React from the day team receive layouts!!!!

[desaijay315]

Hi @LassiterJ , I have tried the solution on wowjs for the version of next js 9.3.5, but it anyways doesn't work. Throws similar error

So, the only option remained for me was to downgrade the next js version 9.0.1.

[LassiterJ]

What did you try?

[desaijay315]

Hi @LassiterJ , thanks for all your research on the topic!

Following are the step which made wow js worked on the client as well as server side!

1. Include wow.js inside public folder - public/js/wow.js and import animate.css file in _app.js
2. Default wowjs initiaztion will look like this -

wow = new WOW({
        animateClass: 'animated',
        offset: 100
    });
    wow.init();

3. Work around on wow.js - in order to load document on ready.. Some issue found while window on load(haven' tried any solution on this), but below works well

$(document).ready(function(){
    wow = new WOW({
        animateClass: 'animated',
        offset: 100
    });
    wow.init();
})

4. Add wow.js as a script as inside the page you want to load
5. now you can add wow and fadeinup, fadeindown classes to your html elements. This works.

First observation -

• Let's say you have click events in which you to initiate wow.js ... May be onClick event with Tabs,buttons, links or after fetching and while populating dynamic data.

• My solution for this - Onclick event - Fetch data and animate once the data is loaded. Remember to initiate wowjs after setState

setTimeout(
      function() {
         this.setState(this.state);
         wow = new WOW({
            animateClass: 'animated',
            offset: 100
        });
        wow.init();
      }
      .bind(this),
      0
  );

[desaijay315]

This is the one project where I am integrating Headless CMS. To be honest getStaticProps and getStaticPaths works like a charm with headless cms - Currently, I have integrated 4 APIs with a lot of nested data and state management.