search

wallabyjs / console-ninja

Repository for Console Ninja questions and issues
https://console-ninja.com
Other
384 stars 21 forks source link

[Bug]: unable to use console-ninja with a dockerized app #192

Closed edxeth closed 1 year ago

edxeth commented 1 year ago

What happened?

console-ninja does not work with dockerized Next.js:

Console Ninja is waiting for next.js to start. Console Ninja has successfully integrated with next.js found in your project dependencies, but has not connected to a running instance of it yet.

I've managed to get it working on the host machine within WSL2 by forcing console-ninja to monitor a JS file, though, to isolate the issue. (perhaps console-ninja does not work with Docker and I'm not aware of it?)

I've attempted various approaches, yet none appear to be effective in resolving this particular issue. Some of the attempts I've made include:

  1. Adding vEthernet IPs, localhost, and 127.0.0.1 to console-ninja.allowedHosts in user settings JSON.
  2. Adding host.docker.internal:host-gateway to extra_hosts field in my docker-compose.yml

Environment:

Version

0.0.206

Steps to reproduce (or sample repo)

  1. Build a Docker image for Node.js 20.x
  2. Run the Docker container from image
  3. Fresh-install Next.js 13.4.x
  4. Create a new route and test the IDE extension

Log output

15:07:04.663 info extension stopping host
15:07:04.840 info extension host process output: port:[42321]
15:07:04.829 info host ------------ starting ------------
15:07:04.835 info host removing cache folder: 20ab5d7eb9f3290cf45791a89b7dd88d
15:07:04.840 info extension 
15:07:04.849 info host client connected: extension { address: '::', family: 'IPv6', port: 42321 }
15:07:04.924 info host starting host: {"extensionFolder":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.206","runtimeHookFile":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.206/out/runtimeHook/tracer.js","globalErrorHandlerFile":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.206/out/runtimeHook/errorHandler.js","filesToInstrument":[{"path":"/home/<my_username>/nextjs-test/src/app/page.tsx","reason":"open"},{"path":"/home/<my_username>/nextjs-test/src/app/test/page.tsx","reason":"search"},{"path":"/home/<my_username>/nextjs-test/src/app/page.tsx","reason":"search"},{"path":"/home/<my_username>/nextjs-test/src/.next/server/app/page.js","reason":"search"},{"path":"/home/<my_username>/nextjs-test/src/.next/static/chunks/main-app.js","reason":"search"}],"debug":false,"config":{"dateTimeFormat":"HH:mm:ss.SSS","showDateTime":true,"installBinToPath":true,"openLinksInEditor":true,"maxLogViewerEntries":15000,"fontSize":10,"outputMode":"Beside File","captureFunctions":false,"searchUrl":"https://www.google.com/search?q={query}","enableProFeatures":true,"toolsToAutoPatch":["vite","jest","webpack","next.js","cypress","http-server","serve","live-server","nuxt","remix","qwik","hydrogen","serverless","astro"],"showErrors":true,"showLogsOnlyFromOpenedFiles":false,"showLogsFromLogPointsOnly":false,"showLogsFromMultipleRunningToolsTogether":false},"allowedHosts":["localhost","127.0.0.1","example.cypress.io","<my_username>","172.30.0.1","172.19.16.1","172.30.15.98"],"host":"localhost"}
15:07:04.936 info host starting tools discovery and integration
15:07:04.940 info host looking for tools to patch
15:07:04.956 info host worker Starting Host Worker...
15:07:05.112 info host found 2 tool file(s) to patch
15:07:05.113 info host patching /home/<my_username>/nextjs-test/src/node_modules/next/dist/compiled/webpack/bundle5.js
15:07:05.114 info host patching /home/<my_username>/nextjs-test/src/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
15:07:05.181 info host completed tools discovery and integration
smcenlly commented 1 year ago

Thanks for raising the issue. Console Ninja does work with Docker. It appears your issue is related to the latest version of Next.js.

I'll update the issue title to correctly describe the problem and we'll provide an update when we understand what's going on.

smcenlly commented 1 year ago

I made a mistake earlier when I said the issue appears to be related to next.js. I was incorrectly using npm run start instead of npm run dev. If you are doing the same, this may explain why it's not working for you.

Console Ninja ignores production and production-like environments. For next.js, this means that Console Ninja won't run at all when you use npm run start or npm run build.

We would like you to try opening your project in your Docker container, and then run the Console Ninja: Pause command, followed by the Console Ninja: Start command. This will force Console Ninja to reapply the logic it uses to detect that your application has started. We think perhaps if you've first opened the project directly from your file system in Windows and then later opened it in Docker, then Console Ninja's startup logic may not be correctly defined.

edxeth commented 1 year ago

I made a mistake earlier when I said the issue appears to be related to next.js. I was incorrectly using npm run start instead of npm run dev. If you are doing the same, this may explain why it's not working for you.

Console Ninja ignores production and production-like environments. For next.js, this means that Console Ninja won't run at all when you use npm run start or npm run build.

We would like you to try opening your project in your Docker container, and then run the Console Ninja: Pause command, followed by the Console Ninja: Start command. This will force Console Ninja to reapply the logic it uses to detect that your application has started. We think perhaps if you've first opened the project directly from your file system in Windows and then later opened it in Docker, then Console Ninja's startup logic may not be correctly defined.

I've attempted using Next.js 13.3, 13.4.6, 13.4.8, and 13.4.19, but none of these versions appear to be working with console-ninja. For reference, I'm running only the yarn run dev command. Needless to say that I've also restarted Visual Studio Code, Docker, WSL2, and I've tried pausing, starting, and restarting console-ninja multiple times after running the container.

Dockerfile:

FROM node:lts-alpine3.18

WORKDIR /app

COPY package.json .

CMD ["yarn", "run", "dev"]

docker-compose.yml:

...

services:
  node:
    build:
      context: .
      dockerfile: "./bin/nodejs/Dockerfile"
    container_name: "nextjs-test-node"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    ports:
      - "3000:3000"
    volumes:
      - ./src:/app
    networks:
      - virtual-net

...

package.json:

{
  "name": "my-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@types/node": "^20.5.6",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.4.1",
    "autoprefixer": "^10.4.15",
    "daisyui": "^3.6.3",
    "eslint": "^8.48.0",
    "eslint-config-next": "13.3.4",
    "next": "13.3.4",
    "mongodb": "^5.8.1",
    "postcss": "^8.4.28",
    "prettier": "^3.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.2.2"
  }
}

Code_IZ6bA157nc Code_efefcaytby

edxeth commented 1 year ago

Just tested on a friend's laptop with WSL2, Docker, and dockerized Next.js... Same problem.

NikGovorov commented 1 year ago

Thanks for reporting the issue. We've fixed it in 0.0.208.

edxeth commented 1 year ago

Thanks for reporting the issue. We've fixed it in 0.0.208.

I downloaded and installed the latest version (0.0.209) and I still keep experiencing the same issue. I wonder what I am doing wrong.

PS: I have the extension enabled on WSL: Ubuntu (remote) in Visual Studio Code.

NikGovorov commented 1 year ago

Could you please try to reproduce the issue in the repo?

edxeth commented 1 year ago

Could you please try to reproduce the issue in the repo?

Sadly it didn't work, console-ninja is "awaiting for next.js to start".

trace.log:

20:27:32.303 info extension stopping host
20:27:32.478 info extension host process output: port:[42397]
20:27:32.468 info host ------------ starting ------------
20:27:32.473 info host removing cache folder: 3682896c9e6f5ec66d2a581fa7d5b6e5
20:27:32.478 info extension 
20:27:32.487 info host client connected: extension { address: '::', family: 'IPv6', port: 42397 }
20:27:32.569 info host starting host: {"extensionFolder":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.209","runtimeHookFile":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.209/out/runtimeHook/tracer.js","globalErrorHandlerFile":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.209/out/runtimeHook/errorHandler.js","filesToInstrument":[{"path":"/home/<my-username>/test/src/app/page.tsx","autoLogPoints":[{"range":{"startLine":4,"endLine":4,"startColumn":11,"endColumn":11}}],"reason":"open"},{"path":"/home/<my-username>/test/src/.next/static/chunks/app/layout.js","reason":"search"},{"path":"/home/<my-username>/test/src/.next/static/chunks/app/page.js","reason":"search"},{"path":"/home/<my-username>/test/src/.next/server/app/favicon.ico/route.js","reason":"search"},{"path":"/home/<my-username>/test/src/.next/server/app/page.js","reason":"search"},{"path":"/home/<my-username>/test/src/.next/static/chunks/main-app.js","reason":"search"}],"debug":false,"config":{"dateTimeFormat":"HH:mm:ss.SSS","showDateTime":true,"installBinToPath":true,"openLinksInEditor":true,"maxLogViewerEntries":15000,"fontSize":10,"outputMode":"Beside File","captureFunctions":false,"searchUrl":"https://www.google.com/search?q={query}","enableProFeatures":true,"toolsToAutoPatch":["vite","jest","webpack","next.js","cypress","http-server","serve","live-server","nuxt","remix","qwik","hydrogen","serverless","astro"],"showErrors":true,"showLogsOnlyFromOpenedFiles":false,"showLogsFromLogPointsOnly":false,"showLogsFromMultipleRunningToolsTogether":false},"allowedHosts":["localhost","127.0.0.1","example.cypress.io","<my_username>","172.30.0.1","172.19.16.1","172.30.15.98"],"host":"localhost"}
20:27:32.581 info host starting tools discovery and integration
20:27:32.585 info host looking for tools to patch
20:27:32.595 info host worker Starting Host Worker...
20:27:32.732 info host found 2 tool file(s) to patch
20:27:32.734 info host patching /home/<my-username>/test/src/node_modules/next/dist/compiled/webpack/bundle5.js
20:27:32.734 info host patching /home/<my-username>/test/src/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
20:27:32.804 info host completed tools discovery and integration
NikGovorov commented 1 year ago

Could you please share the first 5 lines from /home/<my-username>/test/src/node_modules/next/dist/compiled/webpack/bundle5.js?

edxeth commented 1 year ago

Could you please share the first 5 lines from /home/<my-username>/test/src/node_modules/next/dist/compiled/webpack/bundle5.js?

Console-ninja version 0.0.212 has been installed.

bundle5.js:

/* build-hook-start *//*00001*/try { require('/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.212/out/buildHook/index.js').default({tool: 'next.js'}); } catch(cjsError) { try { import('file:///root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.212/out/buildHook/index.js').then(m => m.default.default({tool: 'next.js'})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */

Full code if necessary: https://gist.github.com/edxeth/c6ea7407a5cab7449f965990718b7692

NikGovorov commented 1 year ago

Are the logs(trace.log) you posted earlier and the content of bundle5.js coming from the repo running in the devcontainer.json?

NikGovorov commented 1 year ago

Would you mind sharing the similar screenshot of running the repo in the devcontainer.json? image

edxeth commented 1 year ago

I'm running a devcontainer now in order to reproduce the repo + console-ninja v0.0.214.

trace.log:

13:15:01.308 info extension stopping host
13:15:01.556 info extension host process output: port:[45415]
13:15:01.543 info host ------------ starting ------------
13:15:01.550 info host removing cache folder: e8e005da9262fed352648349a47b0dc1
13:15:01.557 info extension 
13:15:01.567 info host client connected: extension { address: '::', family: 'IPv6', port: 45415 }
13:15:01.629 info host starting host: {"extensionFolder":"/home/node/.vscode-server/extensions/wallabyjs.console-ninja-0.0.214","runtimeHookFile":"/home/node/.vscode-server/extensions/wallabyjs.console-ninja-0.0.214/out/runtimeHook/tracer.js","globalErrorHandlerFile":"/home/node/.vscode-server/extensions/wallabyjs.console-ninja-0.0.214/out/runtimeHook/errorHandler.js","filesToInstrument":[{"path":"/workspaces/test/src/app/page.tsx","autoLogPoints":[{"range":{"startLine":4,"endLine":4,"startColumn":29,"endColumn":29}}],"reason":"open"},{"path":"/workspaces/test/src/.next/static/chunks/app/layout.js","reason":"search"},{"path":"/workspaces/test/src/.next/static/chunks/app/page.js","reason":"search"},{"path":"/workspaces/test/src/.next/server/app/page.js","reason":"search"},{"path":"/workspaces/test/src/.next/static/chunks/main-app.js","reason":"search"}],"debug":false,"config":{"dateTimeFormat":"HH:mm:ss.SSS","showDateTime":true,"installBinToPath":true,"openLinksInEditor":true,"maxLogViewerEntries":15000,"fontSize":10,"outputMode":"Beside File","captureFunctions":false,"searchUrl":"https://www.google.com/search?q={query}","enableProFeatures":true,"toolsToAutoPatch":["vite","jest","webpack","next.js","cypress","http-server","serve","live-server","nuxt","remix","qwik","hydrogen","serverless","astro"],"showErrors":true,"showLogsOnlyFromOpenedFiles":false,"showLogsFromLogPointsOnly":false,"showLogsFromMultipleRunningToolsTogether":false},"allowedHosts":["localhost","127.0.0.1","example.cypress.io","2ac16acc717a","172.30.0.1","172.19.16.1","172.17.0.2"],"host":"localhost"}
13:15:01.645 info host starting tools discovery and integration
13:15:01.652 info host looking for tools to patch
13:15:01.739 info host worker Starting Host Worker...
13:15:01.872 info host found 2 tool file(s) to patch
13:15:01.873 info host patching /workspaces/test/src/node_modules/next/dist/compiled/webpack/bundle5.js
13:15:01.874 info host patching /workspaces/test/src/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
13:15:01.954 info host completed tools discovery and integration

bundle5.js:

/* build-hook-start *//*00001*/try { require('/home/node/.vscode-server/extensions/wallabyjs.console-ninja-0.0.214/out/buildHook/index.js').default({tool: 'next.js'}); } catch(cjsError) { try { import('file:///home/node/.vscode-server/extensions/wallabyjs.console-ninja-0.0.214/out/buildHook/index.js').then(m => m.default.default({tool: 'next.js'})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */

explorer_vvRpGkVni8

All I did was move the repo files into src dir, then I ran npm i, and finally npm run dev. I also paused, resumed, and restarted console-ninja.

edxeth commented 1 year ago

Suddenly, a new line just popped up in the trace.log:

13:34:13.463 ERR! host unable to set access and modified time for file /workspaces/test/src/app/page.tsx
NikGovorov commented 1 year ago

Thanks for providing the screenshot. Could you please try the following steps?

  1. Open the test repo(in the same way you did for the screenshot), check that Console Ninja is not paused;
  2. Stop npm run dev, if it's running;
  3. Change bundle5.js by adding boom; to the beginning of the file;
  4. Run npm run dev again and check if next.js fails with boom error.

Then

  1. Stop npm run dev(if required);
  2. Delete boom; from bundle5.js;
  3. Replace catch(cjsError) { with catch(cjsError) { console.log(cjsError); on the first line of bundle5.js
  4. Run npm run dev again and provide us with the error from the output.
edxeth commented 1 year ago

Console-ninja version 0.0.215 has been installed and it seems to be working in devcontainer.

Next.js fails running with boom.js:

root ➜ /workspaces/cn-192 (main) $ npm run dev

> cn-192@0.1.0 dev
> next dev

/workspaces/cn-192/node_modules/next/dist/compiled/webpack/bundle5.js:2
boom;/* build-hook-start *//*00001*/try { require('/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215/out/buildHook/index.js').default({tool: 'next.js'}); } catch(cjsError) { try { import('file:///root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215/out/buildHook/index.js').then(m => m.default.default({tool: 'next.js'})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */
^

ReferenceError: boom is not defined
    at Object.<anonymous> (/workspaces/cn-192/node_modules/next/dist/compiled/webpack/bundle5.js:2:1)
    at Module._compile (node:internal/modules/cjs/loader:1233:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:119:18)
    at exports.init (/workspaces/cn-192/node_modules/next/dist/compiled/webpack/webpack.js:24:28)
    at loadWebpackHook (/workspaces/cn-192/node_modules/next/dist/server/config-utils.js:18:5)
    at loadConfig (/workspaces/cn-192/node_modules/next/dist/server/config.js:551:46)

Node.js v20.5.0

With catch(cjsError) { console.log(cjsError); and without boom;:

08:33:58.288 info extension stopping host
08:33:58.539 info extension host process output: port:[41091]
08:33:58.516 info host ------------ starting ------------
08:33:58.533 info host removing cache folder: 62aec21f01a78ba30800aad7b702bc7a
08:33:58.539 info extension 
08:33:58.553 info host client connected: extension { address: '::', family: 'IPv6', port: 41091 }
08:33:58.571 info host starting host: {"extensionFolder":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215","runtimeHookFile":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215/out/runtimeHook/tracer.js","globalErrorHandlerFile":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215/out/runtimeHook/errorHandler.js","filesToInstrument":[{"path":"/workspaces/cn-192/app/page.tsx","reason":"search"},{"path":"/workspaces/cn-192/node_modules/next/dist/compiled/webpack/bundle5.js","reason":"open"}],"debug":false,"config":{"dateTimeFormat":"HH:mm:ss.SSS","showDateTime":true,"installBinToPath":true,"openLinksInEditor":true,"maxLogViewerEntries":15000,"fontSize":10,"outputMode":"Beside File","captureFunctions":false,"searchUrl":"https://www.google.com/search?q={query}","enableProFeatures":true,"toolsToAutoPatch":["vite","jest","webpack","next.js","cypress","http-server","serve","live-server","nuxt","remix","qwik","hydrogen","serverless","astro"],"showErrors":true,"showLogsOnlyFromOpenedFiles":false,"showLogsFromLogPointsOnly":false,"showLogsFromMultipleRunningToolsTogether":false},"allowedHosts":["localhost","127.0.0.1","example.cypress.io","149545a0c5e6","172.30.0.1","172.19.16.1","172.17.0.2"],"host":"localhost"}
08:33:58.589 info host starting tools discovery and integration
08:33:58.596 info host looking for tools to patch
08:33:58.726 info host worker Starting Host Worker...
08:33:58.795 info host found 2 tool file(s) to patch
08:33:58.797 info host patching /workspaces/cn-192/node_modules/next/dist/compiled/webpack/bundle5.js
08:33:58.798 info host patching /workspaces/cn-192/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
08:33:58.874 info host completed tools discovery and integration
08:36:17.030 info buildHook-1812 installing build hook for next.js at /workspaces/cn-192, node v20.5.0
08:36:17.037 info buildHook-1812 allowed tools: vite, jest, webpack, next.js, cypress, http-server, serve, live-server, nuxt, remix, qwik, hydrogen, serverless, astro, node
08:36:17.081 info host client connected: buildHook { address: '::', family: 'IPv6', port: 41091 }
08:36:17.037 info buildHook-1812 running tools: next.js
08:36:17.038 info buildHook-1812 installing fs interceptor
08:36:17.135 info buildHook-1812 allowed tools: vite, jest, webpack, next.js, cypress, http-server, serve, live-server, nuxt, remix, qwik, hydrogen, serverless, astro, node
08:36:17.136 info buildHook-1812 running tools: next.js
08:36:17.620 info buildHook-1829 installing build hook for next.js at /workspaces/cn-192, node v20.5.0
08:36:17.627 info buildHook-1829 allowed tools: vite, jest, webpack, next.js, cypress, http-server, serve, live-server, nuxt, remix, qwik, hydrogen, serverless, astro, node
08:36:17.671 info host client connected: buildHook { address: '::', family: 'IPv6', port: 41091 }
08:36:17.628 info buildHook-1829 running tools: next.js
08:36:17.629 info buildHook-1829 installing fs interceptor
08:36:17.893 info buildHook-1829 allowed tools: vite, jest, webpack, next.js, cypress, http-server, serve, live-server, nuxt, remix, qwik, hydrogen, serverless, astro, node
08:36:17.893 info buildHook-1829 running tools: next.js
08:36:20.135 info buildHook-1829 file processed (stat): 2 log points, error handler: false
08:36:28.344 info host client connected: runtimeHook { address: '::', family: 'IPv6', port: 41091 }

Code_WQNEg4JWyn

If I do the same with my dockerized Next.js project (docker-compose.yml + Dockerfile, so no devcontainer.json) then it catches the following error:

yarn run v1.22.19
$ next dev
Error: Cannot find module '/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215/out/buildHook/index.js'
Require stack:
- /app/node_modules/next/dist/compiled/webpack/bundle5.js
- /app/node_modules/next/dist/compiled/webpack/webpack.js
- /app/node_modules/next/dist/server/config-utils.js
- /app/node_modules/next/dist/server/config.js
- /app/node_modules/next/dist/cli/next-dev.js
- /app/node_modules/next/dist/lib/commands.js
- /app/node_modules/next/dist/bin/next
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/app/node_modules/next/dist/compiled/webpack/bundle5.js:2:38)
    at Module._compile (node:internal/modules/cjs/loader:1233:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/app/node_modules/next/dist/compiled/webpack/bundle5.js',
    '/app/node_modules/next/dist/compiled/webpack/webpack.js',
    '/app/node_modules/next/dist/server/config-utils.js',
    '/app/node_modules/next/dist/server/config.js',
    '/app/node_modules/next/dist/cli/next-dev.js',
    '/app/node_modules/next/dist/lib/commands.js',
    '/app/node_modules/next/dist/bin/next'
  ]
}
- info Loaded env from /app/.env
- warn You have enabled experimental feature (serverActions) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
- ready started server on [::]:3000, url: http://localhost:3000
Error: Cannot find module '/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215/out/buildHook/index.js'
Require stack:
- /app/node_modules/next/dist/compiled/webpack/bundle5.js
- /app/node_modules/next/dist/compiled/webpack/webpack.js
- /app/node_modules/next/dist/server/config-utils.js
- /app/node_modules/next/dist/server/config.js
- /app/node_modules/next/dist/server/lib/router-server.js
- /app/node_modules/next/dist/server/lib/start-server.js
- /app/node_modules/next/dist/compiled/jest-worker/processChild.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/app/node_modules/next/dist/compiled/webpack/bundle5.js:2:38)
    at Module._compile (node:internal/modules/cjs/loader:1233:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/app/node_modules/next/dist/compiled/webpack/bundle5.js',
    '/app/node_modules/next/dist/compiled/webpack/webpack.js',
    '/app/node_modules/next/dist/server/config-utils.js',
    '/app/node_modules/next/dist/server/config.js',
    '/app/node_modules/next/dist/server/lib/router-server.js',
    '/app/node_modules/next/dist/server/lib/start-server.js',
    '/app/node_modules/next/dist/compiled/jest-worker/processChild.js'
  ]
}
- event compiled client and server successfully in 225 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 139 ms (20 modules)
- info Loaded env from /app/.env
- info Loaded env from /app/.env
NikGovorov commented 1 year ago

Does the file exist stat /root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215/out/buildHook/index.js in your container?

edxeth commented 1 year ago

Does the file exist stat /root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215/out/buildHook/index.js in your container?

Nope, probably because I'm not running a devcontainer, the file isn't mounted in any volume. I believe VSCode's remote extension (or something..) handles that automatically when it spins off the devcontainer.. Well, I could mount it manually in my Docker project, but then I would have to change the host machine's path in the volume for every new version of console-ninja for persisting the data, I suppose.

Code_AWggqUMHDo

edxeth commented 1 year ago

I decided to give it a try, so I've created a volume that persists /root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.215 in the container, and the end result is the same:

Code_BeXbVGv8zh

The container logs are clean — no errors were caught. Therefore, console-ninja managed to find the files it requires within the container. What am I doing wrong here?

NikGovorov commented 1 year ago

Would you mind creating a sample repo with all the files required to run it in the same way you do it including dockerfile, compose file etc. and a clear set of instructions on how to do it? We do support Docker containers via VS Code Remote extension, but looking at your latest screenshot I don't understand how you run your app.

edxeth commented 1 year ago

Would you mind creating a sample repo with all the files required to run it in the same way you do it including dockerfile, compose file etc. and a clear set of instructions on how to do it? We do support Docker containers via VS Code Remote extension, but looking at your latest screenshot I don't understand how you run your app.

I'm using Docker Compose with a docker-compose.yml file and Dockerfile to run our Next.js application. We start the containers with docker-compose up command as described in: repo

NikGovorov commented 1 year ago

Thanks for providing the repo and the instructions on how to run it. We've released console-ninja.dockerizedApp setting in v0.0.216 which fixes Console Ninja and Docker networking issues. The setting instructs Console Ninja server to listen on 0.0.0.0 and Console Ninja clients to send to gateway.docker.internal when required.

However, you'll still have to add the volumes manually:

  1. Source Code Volume - the path in a container must be the same as your local path opened in VS Code (the path in WSL instance in your case);
  2. Console Ninja Volume - goes to root because the app runs under root in the container.
  3. VS Code Extensions Volume.

Please find the working fork of your repo here.

Having to set up extra volumes that match local paths manually is not ideal, so we may consider supporting the scenario out of the box in the future.

edxeth commented 1 year ago

Are you positive that console-ninja.dockerizedApp is available in the latest ext v0.0.216? That setting seems to be missing according to VSCode (I don't really know how this kind of stuff works though):

Code_KghoGhCuj3

However, I can actually see that and 0.0.0.0 (instead of ::) in the trace.log:

14:47:20.851 info extension stopping host
14:47:54.635 info extension stopping host
14:47:54.854 info extension host process output: port:[44265]
14:47:54.832 info host ------------ starting ------------
14:47:54.854 info extension 
14:47:54.872 info host client connected: extension { address: '0.0.0.0', family: 'IPv4', port: 44265 }
14:47:54.901 info host starting host: {"extensionFolder":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.216","runtimeHookFile":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.216/out/runtimeHook/tracer.js","globalErrorHandlerFile":"/root/.vscode-server/extensions/wallabyjs.console-ninja-0.0.216/out/runtimeHook/errorHandler.js","filesToInstrument":[{"path":"/home/<my-username>/cn_dockerized_nextjs_app/nextjs/app/page.tsx","autoLogPoints":[{"range":{"startLine":4,"endLine":4,"startColumn":30,"endColumn":30}}],"reason":"open"}],"debug":false,"config":{"dateTimeFormat":"HH:mm:ss.SSS","showDateTime":true,"installBinToPath":true,"openLinksInEditor":true,"maxLogViewerEntries":15000,"fontSize":10,"outputMode":"Beside File","captureFunctions":false,"searchUrl":"https://www.google.com/search?q={query}","enableProFeatures":true,"toolsToAutoPatch":["vite","jest","webpack","next.js","cypress","http-server","serve","live-server","nuxt","remix","qwik","hydrogen","serverless","astro"],"showErrors":true,"showLogsOnlyFromOpenedFiles":false,"showLogsFromLogPointsOnly":false,"showLogsFromMultipleRunningToolsTogether":false,"dockerizedApp":true},"allowedHosts":["localhost","127.0.0.1","example.cypress.io","<my-username>","172.30.0.1","172.19.16.1","172.30.15.98"],"host":"localhost"}
14:47:54.916 info host starting tools discovery and integration
14:47:54.922 info host looking for tools to patch
14:47:54.993 info host worker Starting Host Worker...
14:47:55.087 info host found 2 tool file(s) to patch
14:47:55.089 info host patching /home/<my-username>/cn_dockerized_nextjs_app/nextjs/node_modules/next/dist/compiled/webpack/bundle5.js
14:47:55.089 info host patching /home/<my-username>/cn_dockerized_nextjs_app/nextjs/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
14:47:55.167 info host completed tools discovery and integration

Unfortunately, the ext is still showing waiting for Next.js to start even though Next.js is running:

Code_1Eg2LlajEX

.env:

...

LOCAL_CONSOLE_NINJA_PATH=${HOME}/.console-ninja
LOCAL_VS_CODE_SERVER_EXT_PATH=${HOME}/.vscode-server/extensions

...

docker-compose.yml:

...

services:
  node:
    build:
      context: .
      args:
        LOCAL_PROJECT_ROOT_PATH: ${LOCAL_PROJECT_ROOT_PATH}
      dockerfile: "./Dockerfile"
    container_name: "nodejs-nextjs-test"
    tty: true
    ports:
      - "3000:3000"
    volumes:
      - ./:${LOCAL_PROJECT_ROOT_PATH}
      - ${LOCAL_CONSOLE_NINJA_PATH}:/root/.console-ninja
      - ${LOCAL_VS_CODE_SERVER_EXT_PATH}:${LOCAL_VS_CODE_SERVER_EXT_PATH}

...

Code_tWPxjX8UBp

Perhaps I'm doing something wrong, but I'm having difficulty identifying the issue... I really appreciate the time and effort you all are investing in this matter!

NikGovorov commented 1 year ago

Looks like you used my path in LOCAL_PROJECT_ROOT_PATH. If you clone the repo to ${HOME}/cn_dockerized_nextjs_app then you need to change LOCAL_PROJECT_ROOT_PATH accordingly.

Another thing that I noticed is that on your WSL .vscode-server is located in /root in contrast to my environment where it is ${HOME}/.vscode-server. You need to change LOCAL_VS_CODE_SERVER_EXT_PATH to /root/.vscode-server/extensions.

Here is the version of .cn.env that should work for you:

LOCAL_PROJECT_ROOT_PATH=${HOME}/cn_dockerized_nextjs_app 
LOCAL_CONSOLE_NINJA_PATH=${HOME}/.console-ninja
LOCAL_VS_CODE_SERVER_EXT_PATH=/root/.vscode-server/extensions
NikGovorov commented 1 year ago

Also, just in case please recreate nextjs/node_modules by deleting it and running yarn/npm install and delete nextjs/.next folder

edxeth commented 1 year ago

Looks like you used my path in LOCAL_PROJECT_ROOT_PATH. If you clone the repo to ${HOME}/cn_dockerized_nextjs_app then you need to change LOCAL_PROJECT_ROOT_PATH accordingly.

Another thing that I noticed is that on your WSL .vscode-server is located in /root in contrast to my environment where it is ${HOME}/.vscode-server. You need to change LOCAL_VS_CODE_SERVER_EXT_PATH to /root/.vscode-server/extensions.

Here is the version of .cn.env that should work for you:

LOCAL_PROJECT_ROOT_PATH=${HOME}/cn_dockerized_nextjs_app 
LOCAL_CONSOLE_NINJA_PATH=${HOME}/.console-ninja
LOCAL_VS_CODE_SERVER_EXT_PATH=/root/.vscode-server/extensions

I've used ${HOME} because I'm actually using root so no issues with that, as a matter of fact the volumes are persisting the target path as shown in the previous screenshot. Just to be sure I did try with the absolute path instead and it didn't help.

Also, just in case please recreate nextjs/node_modules by deleting it and running yarn/npm install and delete nextjs/.next folder

Yep, I already did. No luck though.

Today, I noticed two new lines in the trace.log file:

07:07:08.455 info buildHook-32 installing build hook for next.js at /app/nextjs, node v20.6.0
07:07:09.246 info buildHook-44 installing build hook for next.js at /app/nextjs, node v20.6.0

After restarting console-ninja, deleting .next, node_modules, and restarting the container several times I no longer get such logs... Despite that, the extension never really worked anyway.

edxeth commented 1 year ago

Somehow I just got the build hook logs again after a container restart:

07:45:53.692 info buildHook-32 installing build hook for next.js at /root/projects/playground/cn_dockerized_nextjs_app/nextjs, node v20.6.0
07:45:54.485 info buildHook-44 installing build hook for next.js at /root/projects/playground/cn_dockerized_nextjs_app/nextjs, node v20.6.0
NikGovorov commented 1 year ago

What is your local path for the project? image

NikGovorov commented 1 year ago

I think all you need to make it working is to change LOCAL_PROJECT_ROOT_PATH to /home/<my-username>/cn_dockerized_nextjs_app.

edxeth commented 1 year ago

Code_ZQxht7mril

I think all you need to make it working is to change LOCAL_PROJECT_ROOT_PATH to /home/<my-username>/cn_dockerized_nextjs_app.

I've tried but it doesn't help. ${HOME}, the absolute path you've given, or any other path would work as that's just the work dir on the container side.

NikGovorov commented 1 year ago

Would you mind checking that the project path in the container matches your local path?

image

edxeth commented 1 year ago

explorer_NYq3fjaAQu

NikGovorov commented 1 year ago

The paths are different on your screenshot. Your local path is /home/devkit/projects/cn_dockerized_nextjs_app, and the path in the container is /home/devkit/projects/playground/cn_dockerized_nextjs_app. Delete the playground part from LOCAL_PROJECT_ROOT_PATH

edxeth commented 1 year ago

LOCAL_CONSOLE_NINJA_PATH and LOCAL_VS_CODE_SERVER_EXT_PATH are also correctly persisting data in the volume as shown in: screenshot As a matter of fact, console-ninja seems to be able to locate the required files. (no errors were caught from the try-catch in bundl5.js)

edxeth commented 1 year ago

The paths are different on your screenshot. Your local path is /home/devkit/projects/cn_dockerized_nextjs_app, and the path in the container is /home/devkit/projects/playground/cn_dockerized_nextjs_app. Delete the playground part from LOCAL_PROJECT_ROOT_PATH

Damn... I didn't see that playground at all but I was also sure that the workdir could be anything, sorry for wasting your time pal! It's working!

Code_4kJ0mUL5zw

NikGovorov commented 1 year ago

Your local path can be anything, but the mapped path in the container must be the same.

edxeth commented 1 year ago

workdir can be anything, but the paths must be the same.

Yep, I've just tested it, and you're right! Thank you so much. I really appreciate the time and effort you put into this. You have no idea how happy I am to use console-ninja :)

MatthD commented 11 months ago

Hello!

I do not know if my question will re-open the issue or not but I am trying to use console ninja with docker container and have difficulties to understand if values should go to my local vscode project or not.

I try on the small fork project from this conversation.

I twork if I open a folder from inside the container via vscode command (attach from container), I am able to link all my extensions with vairable env as in the project but they have issue (git not found etc) ... Not sure about all of this.

So is it possible to have value shown from container to local project opened in vscode?