Next.js: componentDidMount not being called at all

Created on 11 Mar 2019 · 8Comments · Source: vercel/next.js

Bug report

Describe the bug

ComponentDidMount is supposed to be called on the client side, but here, it is not being called at all.

To Reproduce

componentDidMount() {
        alert('hello');
        this.props.reduxStore.dispatch(listenToDimensions());
    }

Expected behavior

Expected for the alert('hello') to call an alert dialog, but it is not being called.

Screenshots

None

System information

OS: macOS
Version of Next.js: 8.0.1

Additional context

componentWillMount does get called, but obviously on server side. I am trying to attach a listener that dispatches to the redux store on initial component mount that relies on the client window dimensions.

please add a complete reproduction

Source

jennmueng

👍3

Most helpful comment

A custom <Document> is not rendered client-side, per our documentation. componentDidMount (or any lifecycle method) will never trigger for <Document> components client-side.

Timer on 23 Jul 2019

👍6 😄1

All 8 comments

Please provide a reproduction. We have tests ensuring all of this works 👍

timneutkens on 12 Mar 2019

I am having this issue but I don't understand why. It only happens when I have a custom _document.js file.

This is what it looks like:

```import Document, { Head, Main } from 'next/document';
import { NextScript } from '@engineerapart/nextscript';
import flush from 'styled-jsx/server';
import { CookiesProvider } from 'react-cookie';
import Modal from 'react-modal';
import PropTypes from 'prop-types';

Modal.setAppElement('#website');

class MyDocument extends Document {

// static getInitialProps({ renderPage }) {

//  const { html, head, errorHtml, chunks } = renderPage();
//  const styles = flush();
//  return { html, head, errorHtml, chunks, styles };

// }

render() {
    const { pageContext } = this.props;
    return (
        <html>
            <Head>
                {/* <meta name="viewport" content="width=device-width, initial-scale=1.0" /> */}
                <meta
                    name="viewport"
                    content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
                />
                {/* PWA primary color */}
                <meta
                    name="theme-color"
                    content={pageContext ? pageContext.theme.palette.primary.main : null}
                />

                <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <script dangerouslySetInnerHTML={{
                    __html: `WebFont.load({google:{families:["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Raleway:100,200,300,regular,italic,500,600,700,800,900"]}});`,
                }} />

                {/* <link rel="shortcut icon" href="/static/logoTrans.png"/> */}
            </Head>
            <body>
                <div id='websiteID' />

                <CookiesProvider>
                    <div id='home' />
                    <Main />
                </CookiesProvider>

                <NextScript />
                <script src="/static/website.js" />

            </body>


        </html>
    );
}

}```

jayb967 on 30 Apr 2019

👍1

Turns out non nextjs NextScript library breaks it..

jayb967 on 30 Apr 2019

I have the same issue, did you manage to make it work without removing NextScript library?

uri3000 on 31 May 2019

I got the same issue.

reinhardt1053 on 23 Jul 2019

A custom <Document> is not rendered client-side, per our documentation. componentDidMount (or any lifecycle method) will never trigger for <Document> components client-side.

Timer on 23 Jul 2019

👍6 😄1

What is the workaround? This works in dev, but not production for me.