ReferenceError: self is not defined NextJS app router

[BernardoOlisan]

Describe the bug Using ForceGraph3D in Nextjs app router I'm getting this error:

 ⨯ node_modules\aframe\dist\aframe-master.js (10:3) @ self
 ⨯ ReferenceError: self is not defined
    at __webpack_require__ (C:\Users\berna\OneDrive\Escritorio\Projects\Aha\fake_ui\.next\server\webpack-runtime.js:33:42)  
    at __webpack_require__ (C:\Users\berna\OneDrive\Escritorio\Projects\Aha\fake_ui\.next\server\webpack-runtime.js:33:42)  
    at __webpack_require__ (C:\Users\berna\OneDrive\Escritorio\Projects\Aha\fake_ui\.next\server\webpack-runtime.js:33:42)  
    at eval (./app/page.js:10:75)
    at (ssr)/./app/page.js (C:\Users\berna\OneDrive\Escritorio\Projects\Aha\fake_ui\.next\server\app\page.js:129:1)
    at __webpack_require__ (C:\Users\berna\OneDrive\Escritorio\Projects\Aha\fake_ui\.next\server\webpack-runtime.js:33:42)  
    at JSON.parse (<anonymous>)

Expected behavior Everything works perfect, but this error is making the website unable to deployed

Additional context I'm importing it like this: import { ForceGraph3D } from 'react-force-graph'; And I'm using "use client";

[vasturiano]

@BernardoOlisan if you do

import ForceGraph3D from 'react-force-graph-3d'

it bypasses the aframe import, which might fix your issue.

[BernardoOlisan]

Yes, I got the window is not defined error, but I solved it by dynamic import. Thanks :)

[mbledkowski]

I have got the same issue

[seheon99]

I have same issue and solved by dynamic import

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

// src/components/force-graph.tsx
"use client";

import React from "react";

import { ForceGraph2D } from "react-force-graph";

export default function ForceGraph() {
  return <ForceGraph2D />;
}

// src/app/page.tsx
import dynamic from "next/dynamic";

const ForceGraph = dynamic(
  () => import("../components/force-graph"),
  {
    ssr: false,
    loading: () => <p>Loading...</p>,
  }
);

export default async function Page() {
  return <ForceGraph />;
}