Next.js: Invisible console.log's in getInitialProps

[larron]

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I'm not able to see console.log('some message') when applied to a pages getInitialProps.

Taking a fresh copy of next and creating an index page like so:

import React, { Component} from 'react'

export default class Index extends Component {
  async getInitialProps() {
    console.log('show your self')
  }
  render() {
    return (
      <div>Index Page</div>
    )
  }
}

Running the server (in dev mode) and hitting the index page shows no message in terminal.

Current Behavior

No log's at all

Steps to Reproduce (for bugs)

1. Create a new version of next.js project
2. Apply the above code to pages/index.js file
3. Run dev server
4. Check for logs after visiting localhost:3000

Context

Your Environment

| Tech | Version |
|---------|---------|
| next | 4.1.4 |
| node | 9.2 |
| OS | 10.12.6 OSX |
| browser | |
| etc | |

[timneutkens]

async getInitialProps() => static async getInitialProps(), the method has to be static otherwise we can't find it 👍

[PaulRBerg]

Playing around with 6.0.0-canary.3 and I have made sure to write it as static async getInitialProps(), but the function doesn't seem to be called.

[timneutkens]

Please make sure that when you comment something like "it doesn't work! please help" you provide a clear reproduction of how it happens, either a full repository or the code to reproduce.

[PaulRBerg]

Sorry, it seemed to be a problem only with 6.0.0, but indeed I tested now and it works on a different mockup project.

UPDATE: it was related to #3899

[cshl0ve]

In my case, if you are using hoc on page (withAuth, withLayout ...) I could use getInitialProps on that hoc. Not a page component.

[StupidSexyJake]

Same issue when using stateless components... console.log doesn't appear:

Index.getInitialProps = async (context) => {
    console.log('hit init props')
    const { loggedInUser } = await checkLoggedIn(context.apolloClient)
    console.log(loggedInUser)
    if (loggedInUser.me) {
        redirect(context, '/')
    }
    return {}
}

[laurencefass]

same on this page. simple fetch instruction to public api.

entire code for this page is:

`
import Link from 'next/link';
import fetch from 'isomorphic-unfetch';

export function Fetch (props) {
return (

Batman TV Shows

{props.shows.map(show => (

• /p/${show.id}}>
  {show.name}
  
  

))}

);
}

Fetch.getInitialProps = async function() {
const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
const data = await res.json();
console.log(data fetched=${data});
console.log(data length: ${data.length});
return {
shows: data.map(entry => entry.show)
};
};

export default Fetch;
`

thanks

[michaelteter]

@laurencefass did you look at your server console (where you ran npm run dev)? This function is running on the server, so the logging happens there instead of in your browser console.

[laurencefass]

thanks for advice i'm still wrapping my head around Next.js.... console.log works fine on server...

[w3debugger]

Not appearing on server as well 🤔

[ashylen]

I had the same problem but then I found out that I was trying to getInitialProps in children component and this is not allowed. Docs:

getInitialProps can not be used in children components. Only in pages.

[marko-stimac]

Just return those props and then in the render you can do console.log(this.props)

static async getInitialProps() {
    const res = await fetch(url);
    const data = await res.json();
    return { 
        posts: data
    };
}

render() {
    console.log(this.props.posts)
    return (
        <div>asdf</div>
    )
}

[pravinweb]

I am facing same issue, I am using console log inside static async getInitialProps(ctx) { I can see log in terminal but not in browser, any workaround for this please

[mrmos]

@pravinweb this method is executed on the server, not the client. if you want to see logs on the client, you'll want to log out from the render method or the body of the SFC

[Kachyz]

Similar issue here. I don't know if getInitialProps is actually running.

  static async getInitialProps({ query, res }) {
    // query is 'undefined'
    console.log('This is not printed anywhere');

    return {something: 'hello'};
  }

  render() {
    console.log('le props', this.props); // This just lists 'router' in the object, there is no res, query or anything else
    ...
  }

Next version: 9.0.0

Also, I called an non-existent method from getInitialProps() and didn't receive any warning or similar

  static async getInitialProps({ query, res }) {
    this.fakeMethod();
  }

[kirillzubovsky]

@Kachyz saw in the updated documentation that "getInitialProps can not be used in children components, only in the default export of every page." Maybe that's the cause?

[Kachyz]

Sorry, forgot to update this when was solved.
As @kirillzubovsky mentioned, I was using getInitialProps in a child component, had to change behavior to handle this in main component and send props to child according to results