VScode can't resolve import

[gkorland]

I can't figure out why I'm getting an error on the simple import, getting the following error (nextjs 14):

'reagraph' should be listed in the project's dependencies. Run 'npm i -S reagraph' to add iteslint[import/no-extraneous-dependencies](https://github.com/import-js/eslint-plugin-import/blob/v2.29.1/docs/rules/no-extraneous-dependencies.md)

I don't see any issues:

import { GraphCanvas, GraphCanvasRef, darkTheme } from "reagraph";

  "dependencies": {
    "reagraph": "^4.15.7",
  }

Perhaps it's related a strange new build issue that is somehow related:
running npm run build

 Generating static pages (0/9)  [=   ]ReferenceError: navigator is not defined
    at 9444 (/home/guy/workspace/FalkorDB-browser/.next/server/app/graph/page.js:433:84474)
    at t (/home/guy/workspace/FalkorDB-browser/.next/server/webpack-runtime.js:1:128)
    at F (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94693)
    at /home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97108
    at W._fromJSON (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97546)
    at JSON.parse (<anonymous>)
    at N (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94414)
    at t (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:100799)
[DEPRECATED] `context` will be removed in a future version. Instead use `import { createStore, useStore } from 'zustand'`. See: https://github.com/pmndrs/zustand/discussions/1180.
ReferenceError: document is not defined
    at new CO (/home/guy/workspace/FalkorDB-browser/.next/server/app/graph/page.js:433:86614)
    at 9444 (/home/guy/workspace/FalkorDB-browser/.next/server/app/graph/page.js:433:128677)
    at t (/home/guy/workspace/FalkorDB-browser/.next/server/webpack-runtime.js:1:128)
    at F (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94693)
    at /home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97108
    at W._fromJSON (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97546)
    at JSON.parse (<anonymous>)
    at N (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94414)
    at t (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:100799)

Error occurred prerendering page "/graph". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at new CO (/home/guy/workspace/FalkorDB-browser/.next/server/app/graph/page.js:433:86614)
    at 9444 (/home/guy/workspace/FalkorDB-browser/.next/server/app/graph/page.js:433:128677)
    at t (/home/guy/workspace/FalkorDB-browser/.next/server/webpack-runtime.js:1:128)
    at F (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94693)
    at /home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97108
    at W._fromJSON (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97546)
    at JSON.parse (<anonymous>)
    at N (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94414)
    at t (/home/guy/workspace/FalkorDB-browser/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:100799)
    ```

[amcdnl]

@gkorland - If you could provide a demo repo that would be helpful, however, it seems related to NextJS which I haven't tested much. I went through and added a few fixes that I think Next needs - can you retest on latest and let me know if that works?

[gkorland]

Thanks! I'll try it.
You can find the relevant branch here: https://github.com/FalkorDB/falkordb-browser/tree/reagraph

[gkorland]

Pulled the last update and it didn't seem to solve the issue

[amcdnl]

What about trying this - https://nextjs.org/docs/app/building-your-application/rendering/client-components

[gkorland]

the page.tsx is marked as 'use client'

[gkorland]

It's really easy to recreate.

git clone https://github.com/FalkorDB/falkordb-browser.git
cd falkordb-browser
git checkout reagraph
npm install
npm run build

[amcdnl]

Thats my next step :D

[amcdnl]

OK - I think the issue is mousetrap. Its what handles all the keyboard shortcuts under the hood. Seems like it hasn't been updated in a long time and likely doesn't support next. We will probably need to refactor https://github.com/reaviz/reakeys to use it. I don't have time to do this today but if you wanna take a stab at it happy to review. Few alternatives I found:

• https://github.com/webNeat/ctrl-keys
• https://github.com/RobertWHurst/Keystrokes
• https://github.com/jamiebuilds/tinykeys
• https://github.com/jaywcjlove/hotkeys-js

[amcdnl]

Reference: reaviz/reakeys#29

[amcdnl]

Maybe this will help: #172 (comment)

[iAMkVIN-S]

I don't mean to step in here, but I just found this discussion! I originally opened issue #172

I'd love to help as much as I can with the issue. I've created a small repo for testing purposes.

Make sure to:
node: '>=18.17.0'
npm i
npm run dev

You'll notice the simple graph renders. However, if you install the latest version of NextJS, you will get a ReferenceError: window is not defined

In summary:
Works with "next": "^13.5.1", ✅
Does not work with "next": "^14.1.0", ❌

Tested on "reagraph": "^4.15.9"

[gkorland]

@amcdnl still getting the same error