Question 226676 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – console.logs are not showing on browsers console but showing on my terminal

I just started learning React.js, and I’m doing very simple tests in a React project using Next.js.

I noticed that console.log() aren’t showing up on any browser’s console tab, but it’s showing on the VS Code terminal instead. That won’t be useful at all in future projects, I’d like to see it normally on the browser…

Here’s the simple test:

export const Page = ()=> {

  console.log('Hello, World');

  return (
    <div>
      Hello
    </div>
  )
}

export default Page;

After saving the changes and running "npm run dev", nothing appears on the console (Chrome, Mozilla, Opera…), not even error or warnings, but on VS Code terminal it’s there:

- wait compiling...
- event compiled client and server successfully in 976 ms (512 modules)
Hello, World

I can see console.log messages using JavaScript normally.
The Next.js project was initiated with default settings.
I already turned off all the browser extensions, created a new Next app, but same issue. I’m using npm -v 9.6.7.

I also looked for topics related, but I haven’t found the solution yet.

Tags:

2

Answers


  1. 0

    It sounds like the issue is that console.log statements in Next.js components are being directed to the terminal output rather than the browser console.

    A couple things to try:

    1. Make sure you are viewing the browser console in development mode. Console statements won’t show up in production mode.

    2. Try adding the config setting devIndicators:

    { buildActivity: false }
    in next.config.js. This may prevent console statements from being redirected to the terminal:

    module.exports = {
  devIndicators: {
    buildActivity: false 
  }
}

    You can also try wrapping the console.log in a check for the browser environment:

    if (typeof window !== 'undefined') {
  console.log('Hello World'); 
}

    This will prevent the console statement from executing on the server side during rendering.

    Let me know if any of those suggestions help or if you are still seeing the issue! The default Next.js behavior can be a bit confusing at first.

    Login or Signup to reply.
  2. 0

    That’s because, in the app directory (the latest way of setting up routes), by default, Next.js uses Server Components, where the JSX gets compiled to "pure HTML" and sent to the browser (with no additional JavaScript, that console.log in your case). This is for better performance, as you can read on the doc:

    Server Components allow developers to better leverage server infrastructure. For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead remain entirely on the server, leading to improved performance. They make writing a React application feel similar to PHP or Ruby on Rails, but with the power and flexibility of React for templating UI.

    To be able to execute JavaScript script on the browser, you should add "use client" at the top, to make it a Client Component:

    "use client"; // This is a client component 👈🏽

export default function Card() {
  console.log("Hello") // I will get this log on the browser, and also on the server while rendring

  return <></>;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search