[NextJS] TypeError: keys is not a function

[traitran44]

Describe the bug

Unable to integrate into NextJS, Error, TypeError: keys is not a function at file:///home/user/project/nextjs/ui/node_modules/reakeys/dist/index.js:4:31 at ModuleJob.run (node:internal/modules/esm/module_job:194:25) {

following is my package.json

{
  "name": "platform-ui",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "lint": "next lint",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "serve": "npm run build && firebase emulators:start --only hosting",
    "shell": "npm run build && firebase functions:shell",
    "deploy": "firebase deploy --only hosting",
    "logs": "firebase functions:log"
  },
  "overrides": {
    "react-json-view": {
      "react": "$react",
      "react-dom": "$react-dom"
    }
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@fontsource/roboto": "^5.0.8",
    "@fontsource/source-sans-pro": "^5.0.8",
    "@loadable/component": "^5.16.3",
    "@mui/icons-material": "5.15.13",
    "@mui/material": "5.15.13",
    "@mui/x-data-grid": "6.19.11",
    "@mui/x-data-grid-premium": "6.19.11",
    "@mui/x-date-pickers": "6.19.9",
    "@tanstack/query-core": "^5.17.7",
    "@textea/json-viewer": "^3.4.0",
    "@types/webgl2": "^0.0.11",
    "ag-grid-community": "^31.1.1",
    "ag-grid-enterprise": "^31.1.1",
    "ag-grid-react": "^31.1.1",
    "axios": "^1.5.1",
    "axios-cache-interceptor": "^1.5.1",
    "bignumber.js": "^9.1.2",
    "chart.js": "^4.4.0",
    "crypto-js": "^4.2.0",
    "dirty-json": "^0.9.2",
    "ethers": "^6.8.0",
    "firebase": "^10.5.0",
    "graphology-layout": "^0.6.1",
    "graphology-traversal": "^0.3.1",
    "html2canvas": "^1.4.1",
    "jsonrepair": "^3.6.0",
    "lightweight-charts": "^4.1.3",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "mustache": "^4.2.0",
    "next": "^14.2.3",
    "obliterator": "^2.0.4",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-hotkeys-hook": "^4.4.1",
    "react-json-view": "^1.21.3",
    "react-simple-typewriter": "^5.0.1",
    "reactflow": "^11.11.0",
    "reagraph": "^4.17.4",
    "recharts": "^2.12.2",
    "rxjs": "^7.8.1",
    "scichart": "^3.3.577",
    "scichart-example-dependencies": "^0.1.7",
    "scichart-react": "^0.1.8",
    "uuid": "^9.0.1",
    "versions": "^12.0.1",
    "viem": "^1.21.4",
    "ws": "^8.14.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "copy-webpack-plugin": "^12.0.2",
    "eslint": "^8",
    "eslint-config-next": "^14.2.3",
    "typescript": "^5",
    "worker-loader": "^3.0.8"
  }
}

tsconfig

{
  "compilerOptions": {
    "types": [],
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "strictNullChecks": false
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
  ],
  "exclude": [
    "node_modules"
  ],
}

Steps to Reproduce the Bug or Issue

1. Build NextJS project version ^14.2.3
2. npm install reagraph and using my package.json
3. npm run dev to serve in dev environment

Expected behavior

There should not be any error with NextJS

Screenshots or Videos

No response

Platform

• Reagraph Version: ^4.17.4
• OS: macOS
• Browser: Chrome
• NodeJS version: 18.17.1

Your Example Website or App

No response

Additional context

No response

[jaroslaw-weber]

same issue... also nextjs

[joris-zwering]

Any update?

[SerhiiTsybulskyi]

I've tried to reproduce it but it works for me. Here is Sandbox If you still have the issue please prepare an example to reproduce it

[mkhawam]

Im having the same issue on webpack. The keys function is not being initialized. It might be because of the ctrl-keys package.

index.umd.cjs:6 
 Uncaught TypeError: keys is not a function
    at index.umd.cjs:6:1
    at index.umd.cjs:2:63
    at ./node_modules/reakeys/dist/index.umd.cjs (index.umd.cjs:3:2)
    at __webpack_require__ (bootstrap:19:1)
    at index.umd.cjs:14:760
    at ./node_modules/reagraph/dist/index.umd.cjs (index.umd.cjs:15:2)
    at __webpack_require__ (bootstrap:19:1)
    at ./client/components/NetworkMap.tsx (NetworkMap.tsx:39:20)
    at __webpack_require__ (bootstrap:19:1)
    at ./client/pages/Map.tsx (Map.tsx:7:38)