Add support for remote docker volumes

[willmcvay]

Hi, so had a quick play with this and works brilliantly when running in a directory on my machine, nice work 👌🏻

One issue I hit when working with a docker compose setup where my node_modules are mounted in a volume;

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/<<myusername>>/.vscode/extensions/wallabyjs.console-ninja-0.0.18/out/buildHook/index.js' imported from /app/node_modules/webpack/lib/index.js
     at new NodeError (node:internal/errors:393:5)
     at finalizeResolution (node:internal/modules/esm/resolve:260:11)
     at moduleResolve (node:internal/modules/esm/resolve:879:10)
     at defaultResolve (node:internal/modules/esm/resolve:1087:11)
     at nextResolve (node:internal/modules/esm/loader:161:28)
     at ESMLoader.resolve (node:internal/modules/esm/loader:831:30)
     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:413:18)
     at ESMLoader.import (node:internal/modules/esm/loader:514:22)
     at importModuleDynamically (node:internal/modules/cjs/loader:1151:29)
     at importModuleDynamicallyWrapper (node:internal/vm/module:438:21) {
   code: 'ERR_MODULE_NOT_FOUND'
 }
 
 Node.js v19.2.0

I can see the issue - the working directory for the volume in Docker is set at /app where the extension is looking at the root directory of my machine for the extension. This causes Webpack / Vite to crash so had to disable the extension for this project.

Totally understand this might be a complex one to fix and will continue to use for other non-Dockerised projects, but thought would flag it!

[smcenlly]

Thanks so much for reporting your issue.

We will take a look at the issue over the next day or so and hopefully have a fix for you before long. Are you able to share your ‘package.json’ so we can understand your dependency versions?

[willmcvay]

@smcenlly No worries, so it's a yarn (3.2.4) workspaces mono-repo, with a bunch of microservices and a web app all running in dev using a docker compose file. As such, there are multiple package.json files and dependency trees (probably not worth sharing all of them!), however, all reliably throw the same error at compile time. This is the dependency tree for the vite web app - all pretty standard stuff;

  "dependencies": {
    "@linaria/core": "^4.2.2",
    "@linaria/react": "^4.3.0",
    "@tanstack/react-query": "^4.19.1",
    "axios": "^1.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3",
    "typescript": "^4.9.3"
  },
  "devDependencies": {
    "@linaria/babel-preset": "^4.3.0",
    "@linaria/vite": "^4.2.4",
    "@tanstack/react-query-devtools": "^4.19.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/user-event": "^13.2.1",
    "@types/eslint": "^8",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/prettier": "^2",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/testing-library__jest-dom": "^5.14.5",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "@vitejs/plugin-react": "^2.2.0",
    "eslint": "^8.27.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1",
    "jest-fetch-mock": "^3.0.3",
    "prettier": "^2.7.1",
    "ts-jest": "^29.0.3",
    "vite": "^3.2.5",
    "vite-plugin-checker": "^0.5.1",
    "vite-plugin-environment": "^1.1.3",
    "vite-plugin-svgr": "^2.2.2",
    "vite-tsconfig-paths": "^3.5.2"
  }

And the same error in Vite

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/<<myusername>>/.vscode/extensions/wallabyjs.console-ninja-0.0.18/out/buildHook/index.js' imported from /app/packages/frontend/node_modules/vite/bin/vite.js
    at new NodeError (node:internal/errors:393:5)
    at finalizeResolution (node:internal/modules/esm/resolve:260:11)
    at moduleResolve (node:internal/modules/esm/resolve:879:10)
    at defaultResolve (node:internal/modules/esm/resolve:1087:11)
    at nextResolve (node:internal/modules/esm/loader:161:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:831:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:413:18)
    at ESMLoader.import (node:internal/modules/esm/loader:514:22)
    at importModuleDynamically (node:internal/modules/esm/translators:110:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:36:14) {
  code: 'ERR_MODULE_NOT_FOUND'
}

We have a very similar stack in another mono-repo and works fine, it's the docker volume that causes the problem I am pretty sure.

[smcenlly]

@willmcvay - are you able to provide us with steps to set up a simialr environment (or else a sample repo)?

We're not quite sure how you're developing locally and also have the remote docker volume running and are keen to support your scenario if we can.

[phyllisstein]

I created a reproduction case for this issue at https://github.com/phyllisstein/console-ninja-docker. The TL;DR is: Console Ninja's instrumentation script refers to an absolute path that exists on the host machine, but does not exist in the container.

There's a longer explanation of why Docker is such a headache in the readme. The explanation is itself a headache. Containers!

Console Ninja no longer crashes Dockerized apps. I imagine those try...catch statements in the instrumentation script are new. But I can produce the error @willmcvay described if I add console.error to the catch blocks:

yarn run v1.22.19
$ node scripts/start.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/daniel/.vscode/extensions/wallabyjs.console-ninja-0.0.54/out/buildHook/index.js' imported from /app/node_modules/webpack/lib/index.js
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:330:11)
    at moduleResolve (node:internal/modules/esm/resolve:907:10)
    at defaultResolve (node:internal/modules/esm/resolve:1115:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ESMLoader.import (node:internal/modules/esm/loader:525:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1104:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:438:21) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Given that the crash has been fixed, there's no longer a bug. But there's also no way to link Console Ninja to a containerized app.

[NikGovorov]

@willmcvay We've added partial support for dockerized apps to the latest version of Console Ninja. Please find more information here.