Issue when running on Next.js inside a Monorepo Setup (Lerna)

omerson-cruz commented 1 year ago

Hi Wallaby team,

When trying to console.log() in Next.js app, which under a Monorepo setup using Lerna. the console-ninja does not work and shows the below error on the trace log. I'm not sure if the issue is related to the error show below but if I'm not mistaken the Monorepo is still not supported by Console-ninja?

info extension stopping host
info extension client disconnected: 1006 
info extension host process output: port:[35337]
info host ------------ starting ------------
info extension 
ERR! extension error while searching files: {"message":"spawn /home/omersonc/.vscode-server/bin/6261075646f055b99068d3688932416f2346dd3b/node_modules.asar.unpacked/@vscode/ripgrep/bin/rg ENOENT","code":5}
info host client connected: extension { address: '::', family: 'IPv6', port: 35337 }
info host starting host: {"extensionFolder":"/home/omersonc/.vscode-server/extensions/wallabyjs.console-ninja-0.0.18","runtimeHookFile":"/home/omersonc/.vscode-server/extensions/wallabyjs.console-ninja-0.0.18/out/runtimeHook/tracer.js","globalErrorHandlerFile":"/home/omersonc/.vscode-server/extensions/wallabyjs.console-ninja-0.0.18/out/runtimeHook/errorHandler.js","filesToInstrument":["/home/omersonc/ws/entourage-web-local/apps/grapesjs/components/grapes/v3/GrapesStyleWrapper.js","/home/omersonc/ws/entourage-web-local/apps/grapesjs/components/grapes/v3/GrapesjsMain.js","/home/omersonc/ws/entourage-web-local/apps/grapesjs/components/grapes/WebBuilder-v2.js","/home/omersonc/ws/entourage-web-local/apps/grapesjs/pages/grapesjs/site-builder.js","/home/omersonc/ws/entourage-web-local/apps/next12-react-router-v6/pages/404.js","/home/omersonc/ws/entourage-web-local/apps/next12-react-router-v6/views/NotFound.js"],"debug":false,"config":{"dateTimeFormat":"hh:mm:ss.SSS","openLinksInEditor":true,"maxLogViewerEntries":15000,"autoClearLogViewerOnFileChanges":true,"outputMode":"In View","toolsToAutoPatch":["vite","jest","webpack","next.js","cypress","http-server","serve"]}}
info host starting tools discovery and integration
info host found yarn package manager usages in /home/omersonc/ws/entourage-web-local
info host updating yarn plugin in /home/omersonc/.yarnrc.yml
info host looking for tools to patch
info host worker Starting Host Worker...
info host found 24 tool file(s) to patch
info host patching /home/omersonc/ws/entourage-web-local/node_modules/webpack/lib/index.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/css-loader/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/html-webpack-plugin/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/style-loader/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/terser-webpack-plugin/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/webpack-dev-middleware/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@storybook/core-common/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@storybook/core-server/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@vuepress/core/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/jest/bin/jest.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/jest-runner/build/testWorker.js
info host patching /home/omersonc/ws/entourage-web-local/apps/grapes-official/node_modules/jest/bin/jest.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/grapesjs/node_modules/jest/bin/jest.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/jest-cli/node_modules/jest-runner/build/testWorker.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@jest/core/node_modules/jest-runner/build/testWorker.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/next/dist/compiled/webpack/bundle5.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
info host patching /home/omersonc/ws/entourage-web-local/apps/swr-context/node_modules/next/dist/compiled/webpack/bundle5.js
info host patching /home/omersonc/ws/entourage-web-local/apps/swr-context/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@entourage-web-local/swr-context/node_modules/next/dist/compiled/webpack/bundle5.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@entourage-web-local/swr-context/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
info host completed tools discovery and integration
info host starting host: {"extensionFolder":"/home/omersonc/.vscode-server/extensions/wallabyjs.console-ninja-0.0.18","runtimeHookFile":"/home/omersonc/.vscode-server/extensions/wallabyjs.console-ninja-0.0.18/out/runtimeHook/tracer.js","globalErrorHandlerFile":"/home/omersonc/.vscode-server/extensions/wallabyjs.console-ninja-0.0.18/out/runtimeHook/errorHandler.js","filesToInstrument":["/home/omersonc/ws/entourage-web-local/apps/grapesjs/components/grapes/v3/GrapesStyleWrapper.js","/home/omersonc/ws/entourage-web-local/apps/grapesjs/components/grapes/v3/GrapesjsMain.js","/home/omersonc/ws/entourage-web-local/apps/grapesjs/components/grapes/WebBuilder-v2.js","/home/omersonc/ws/entourage-web-local/apps/grapesjs/pages/grapesjs/site-builder.js","/home/omersonc/ws/entourage-web-local/apps/next12-react-router-v6/pages/404.js","/home/omersonc/ws/entourage-web-local/apps/next12-react-router-v6/views/NotFound.js"],"debug":false,"config":{"dateTimeFormat":"hh:mm:ss.SSS","openLinksInEditor":true,"maxLogViewerEntries":15000,"autoClearLogViewerOnFileChanges":true,"outputMode":"In View","toolsToAutoPatch":["vite","jest","webpack","next.js","cypress","http-server","serve"]}}
info host starting tools discovery and integration
info host found yarn package manager usages in /home/omersonc/ws/entourage-web-local
info host updating yarn plugin in /home/omersonc/.yarnrc.yml
info host looking for tools to patch
info host found 24 tool file(s) to patch
info host patching /home/omersonc/ws/entourage-web-local/node_modules/webpack/lib/index.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/css-loader/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/html-webpack-plugin/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/style-loader/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/terser-webpack-plugin/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/webpack-dev-middleware/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@storybook/core-common/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@storybook/core-server/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@storybook/manager-webpack4/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@vuepress/core/node_modules/webpack/lib/webpack.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/jest/bin/jest.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/jest-runner/build/testWorker.js
info host patching /home/omersonc/ws/entourage-web-local/apps/grapes-official/node_modules/jest/bin/jest.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/grapesjs/node_modules/jest/bin/jest.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/jest-cli/node_modules/jest-runner/build/testWorker.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@jest/core/node_modules/jest-runner/build/testWorker.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/next/dist/compiled/webpack/bundle5.js
info host patching /home/omersonc/ws/entourage-web-local/apps/swr-context/node_modules/next/dist/compiled/webpack/bundle5.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
info host patching /home/omersonc/ws/entourage-web-local/apps/swr-context/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@entourage-web-local/swr-context/node_modules/next/dist/compiled/webpack/bundle5.js
info host patching /home/omersonc/ws/entourage-web-local/node_modules/@entourage-web-local/swr-context/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
info host completed tools discovery and integration

ArtemGovorov commented 1 year ago

Hey, there doesn't seem to be any suspicious in the shared part of the log. Looks like the tools has patched all found files, that include next.js files. However the log doesn't include any activity on the patched files (looks like your next.js app is not running). Have you started/restarted next.js CLI (via running npm run dev/next dev)?

omerson-cruz commented 1 year ago

Hi @ArtemGovorov, Thanks for your quick response. Yes I was already running the next.js app when I checked the Console-ninja logs. Also I tried restarting the Console-ninja but still cannot receive the logs .

And to give more information about the issue here's what my current setup and how I work on VS Code

Give are the following:

My VS Code is open on the root of my Monorepo.

My Monorepo Setup
using Lerna + Yarn workspace
my Next.js app is located inside this package directory "~/apps/tenant-ui"
some of my React component located in another package directory ("~/components/common") and being imported by that Next app (Some of console.log() I wanted to be placed in in this package)

omerson-cruz commented 1 year ago

Hello @ArtemGovorov ,

To give an update on my issue I was able to make it work by opening the Next.js app itself on a separate VS code instance or an separated workspace. As you can see on the SS below.

In the exmple above the Button From Components has console log that I wanted to see on Console-Ninja. And it works during the rendering process. (Even if the console log is coming from a different workspace in VS code)

But the console.log() on an even handler does not work and there is this websocket error that appearead

omerson-cruz commented 1 year ago

@ArtemGovorov I've updated to the latest version as of the moment which is v.0.0.24 and still having that logger websocket error when I console.log() on an event handler (again, this code file is from another monorepo package outside of the opened workspace)

ArtemGovorov commented 1 year ago

My VS Code is open on the root of my Monorepo.

This scenario should be supported: https://github.com/wallabyjs/console-ninja/issues/36#issuecomment-1345455464, however opening an individual package in VS Code is not supported at the moment.

We have fixed some monorepo scenarios in the next release (v0.0.29+), please try it and let us know how it goes.

omerson-cruz commented 1 year ago

@ArtemGovorov ,

I have updated to v.0.0.30 and Monorepo seems working now but with some issues. (My VS Code editor is opened on the root of my monorepo) I retested again with Next.js app in the monorepo with

Button component imported on the local package(on the next.js app package itself)
and alsoo imported another Button (this one from another package inside monorepo).

All console.log works during initial load or render. But there appeared a "logger websocket error" as seen on the screenshot below

omerson-cruz commented 1 year ago

Also another issue is that console log for event handlers like the onClick for the LocalButton and the Button from another monorepo package is not showing on the VS code editor. And the websocket error appeared after clicking the Buttons

omerson-cruz commented 1 year ago

Hi @ArtemGovorov , I just tested this issue on the latest Console Ninja v.0.0.43 and it's now working. Thank you guys for your hardwork 💯 💯 💯

I think you can close this ticket now. :)

ArtemGovorov commented 1 year ago

Awesome, thanks for the update!

omerson-cruz commented 1 year ago

Thanks for the quick fix too :)

wallabyjs / console-ninja

Issue when running on Next.js inside a Monorepo Setup (Lerna) #12