[Bug]: No inline logs in vscode using Next.js

daryldixon1994 commented 1 year ago

What happened?

I was expecting to log in the vscode but nothing happened

Version

latest

Steps to reproduce (or sample repo)

I installed it in vcode and I tried to log sth in vcode but nothing happened

Log output

smcenlly commented 1 year ago

It sounds like perhaps your project is using a technology that we don't support out of the box?

Console Ninja currently supports the following tools:

Vite, including
- web applications that were generated by Vite CLI such the ones using React, Vue, Preact, Lit, Svelte, Vanilla, TypeScript or JavaScript;
- web applications configured to use Vite;
- web applications powered by app frameworks that are using Vite, such as Nuxt or SvelteKit.
Webpack, including
- Create React App generated applications;
- Angular CLI and Angular Nx generated applications;
- Gatsby.js;
- any web applications configured to use Webpack node module.
Next.js, including first class support for client and server side logs.
Remix, including first class support for client and server side logs (no errors).
Nuxt.
Astro, including first class support for client and server side logs (no server side errors).
Shopify Hydrogen.
Qwik.
Serverless Offline.
Jest test runner (no errors).
Cypress.io end-to-end test runner.
http-server, live-server and serve static HTTP servers.
Live Server VS Code extension (off by default, can be turned on in the Console Ninja extension VS Code settings).
Live Preview VS Code extension (off by default, can be turned on in the Console Ninja extension VS Code settings).

In addition to the technologies above, Console Ninja also supports node app.js-like workflows including Express, Hapi, Fastify and other similar frameworks. Custom node applications are also supported. To learn more, please refer to the Universal Node applications section of our readme.

If you haven't already read our Getting Started guide, it's a good place to start.

If you're still having problems, please provide a sample repo, and the exacts steps that you're taking to reproduce your issue.

daryldixon1994 commented 1 year ago

I am using next js

7sne commented 1 year ago

Same here, using next@13.3.4.

iraqianDev commented 1 year ago

same here using vuejs and live server both doesn't work

smcenlly commented 1 year ago

@daryldixon1994, @7sne - we have tried Next.js v13.3.4 and it is working for us. Can you please try following these exact steps:

npx create-next-app@13.3.4

When prompted, select the following settings:

✔ What is your project named? … my-next-app (or some other name)
✔ Would you like to use TypeScript with this project? … Yes (default)
✔ Would you like to use ESLint with this project? … Yes (default)
✔ Would you like to use Tailwind CSS with this project? … Yes (default)
✔ Would you like to use `src/` directory with this project? … No (default)
✔ Would you like to use experimental `app/` directory with this project? … No (default)
✔ What import alias would you like configured? … @/* (default)

cd my-next-app (or other name if you didn't use the same name)
code . (or open the folder in VS Code)
From VS Code terminal, npm run dev

Add console.log("Hello World"); to pages/_document.tsx:


import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {

console.log('Hello World'); return (

) }


7. Open your browser (defaults to `http://localhost:3000`) and you should see the `Hello World` text appearing in your editor. **Note: this is required to run your code so that Console Ninja can display the value to you.**

If it is still not working for you, please provide a sample repo, and the exacts steps that you are taking to reproduce your issue. If the steps we provided above do not work for you, can you please let us know your node.js version (we tried both node v18 and node v20).

@MuneerDev - could you please provide a sample repo, and the exacts steps that you are taking to reproduce your issue, as well as your node.js version?

iraqianDev commented 1 year ago

Mine finally worked i don't exactly sure what i did to fix it

smcenlly commented 1 year ago

Mine finally worked i don't exactly sure what i did to fix it

You need to open VS Code before running your dev script from the CLI. This may be why it's working for you now?

Rednas83 commented 1 year ago

Just tried with nuxt3.6.0 & node18.16.0 and also no inline logs when in development mode Tried: Restarting

Does it also work with Code Runner?

Dytoma commented 1 year ago

I am using next@13.4.4 with the app router and there's no inline logs when in dev mode.

smcenlly commented 1 year ago

@Dytoma:

I am using next@13.4.4 with the app router and there's no inline logs when in dev mode.

We tried the same steps we described above with next@13.4.4 and it's working for us. Please provide a sample repo, and the exacts steps that you are taking to reproduce your issue so we can help.

smcenlly commented 1 year ago

@Rednas83:

nuxt3.6.0 & node18.16.0

This is working for us. We did the following:

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
code .
npm run dev

Can you please provide a sample repo, and the exacts steps that you are taking to reproduce your issue so we can help.

Does it also work with Code Runner?

If you're running a custom command (e.g. npm run dev) using Code Runner, then Console Ninja should work for you. If you are just executing JavaScript/TypeScript code using Code Runner, then Console Ninja won't work by default. You should be able to use our universal node application support to report on JavaScript/TypeScript code run using Code Runner, but we have not explicitly tested it.

Rednas83 commented 1 year ago

I just installed the Console Ninja extension and started the development server. I can see the logs in the terminal and in the chrome dev tools but not as inline logs. Should I make special settings or should it run outside the box?

Also tried:

Restarting vs code
Disabling lens extension like version lens | Git Lens | Error Lens

Perhaps add some diagnostic logging to pinpoint the problem?

Code runner is not using a development server. It directly execute the language by passing a file or by passing selected code. So it actually runs something like below and return the result of the code in the console.

  "code-runner.executorMap": {  
    "python": "python",
    "typescript": "ts-node",
    "javascript": "node",
    //"javascript": "node -r esm $fullFileName"
    //"typescript": "node -r esm $fullFileName"
  },

daryldixon1994 commented 1 year ago

I am using next@13.4.4 with the app router and there's no inline logs when in dev mode.

It's probably not working with the app router, because in the steps mentionned above, @smcenlly you selected no for the app directory choice.

smcenlly commented 1 year ago

@daryldixon1994 - I have just tried with:

✔ Would you like to use `src/` directory with this project? … Yes (default)
✔ Would you like to use experimental `app/` directory with this project? … Yes (default)

And it's still working for us.

To be able to process this issue, we require a sample repo, and the exacts steps that you are taking to reproduce your issue.

Please also ensure that Console Ninja is not Paused in your VS Code status bar, as that will also stop it from working. If Console Ninja is paused, you will need to stop your dev script, unpause, and then start your dev script again.

smcenlly commented 1 year ago

@Rednas83 - it sounds like you are using a different tech stack to others in this thread. Can you please create a new issue with a sample repo, and the exacts steps that you are taking to reproduce the problem.

smcenlly commented 1 year ago

We've tried to reproduce the issue with the information provided, but without a reproducible sample or more specific steps, it's challenging to diagnose the problem further. The sample repo of it working for us can be found here: https://github.com/wallabyjs/console-ninja-158.

To keep our issue tracking organized and focused, I'm going to close this issue for now. However, this doesn't mean we're ignoring the problem.

If anyone is experiencing a similar issue, please open a new issue and provide a reproducible sample along with the exact steps to reproduce the problem. This will greatly help us in diagnosing and resolving the issue more effectively.

daryldixon1994 commented 1 year ago

Capture d’écran (119) still not working

daryldixon1994 commented 1 year ago

@daryldixon1994 - I have just tried with:
✔ Would you like to use `src/` directory with this project? … Yes (default)
✔ Would you like to use experimental `app/` directory with this project? … Yes (default)
And it's still working for us.

To be able to process this issue, we require a sample repo, and the exacts steps that you are taking to reproduce your issue.

Please also ensure that Console Ninja is not Paused in your VS Code status bar, as that will also stop it from working. If Console Ninja is paused, you will need to stop your dev script, unpause, and then start your dev script again.

How can I verify that Console ninja is not paused??

mburnell commented 1 year ago

There will be a "Ninja" entry on the right side of the status bar at the bottom of VS Code. If there is a "Paused" icon (two vertical bars) to the left of it, Console Ninja is paused. If there is a "Watch" icon there instead, it is ready and waiting for runtime events. You can hover over the Ninja entry for more details.

smcenlly commented 1 year ago

@daryldixon1994 - your screenshot shows Console Ninja is not paused.

Your screenshot also seems to show that you are not running your development tools (e.g. npm run dev), which is required for Console Ninja to operate.

Please carefully follow the step-by-step instructions we previously provided. I think it will work for you.

daryldixon1994 commented 1 year ago

Capture d’écran (120)

I am running the development tool but nothing happened 🤷🏼‍♂️

smcenlly commented 1 year ago

@daryldixon1994 - your screenshot shows that you did not follow the step-by-step instructions.

Please follow the instructions exactly:

npx create-next-app@13.3.4

When prompted, select the following settings:

✔ What is your project named? … my-next-app (or some other name)
✔ Would you like to use TypeScript with this project? … Yes (default)
✔ Would you like to use ESLint with this project? … Yes (default)
✔ Would you like to use Tailwind CSS with this project? … Yes (default)
✔ Would you like to use `src/` directory with this project? … No (default)
✔ Would you like to use experimental `app/` directory with this project? … No (default)
✔ What import alias would you like configured? … @/* (default)

cd my-next-app (or other name if you didn't use the same name)
code . (or open the folder in VS Code)
From VS Code terminal, npm run dev

Add console.log("Hello World"); to pages/_document.tsx:


import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {

console.log('Hello World'); return (

) }


7. Open your browser (defaults to `http://localhost:3000`) and you should see the `Hello World` text appearing in your editor. **Note: this is required to run your code so that Console Ninja can display the value to you.**

wallabyjs / console-ninja