search

pmndrs / xr

🤳 VR/AR for react-three-fiber
https://pmndrs.github.io/xr/docs/
Other
2.2k stars 157 forks source link

next.js build is not working with the current version of xr (ReferenceError: HTMLElement is not defined) #352

Closed AlexanderZeilmann closed 1 month ago

AlexanderZeilmann commented 2 months ago

The next js build step is not working with the current version of xr.

Steps to reproduce

Create a new next js app

npx create-next-app@latest nextjs-blog

confirm all questions with the default settings. Run

npm run build

to confirm that next js is working.

Install npm install three @react-three/fiber @react-three/xr@latest

Modify the page.tsx file such that it looks like this (I just removed the default HTML and added the xr example from the readme):

 "use client";

import { Canvas } from "@react-three/fiber";
import { XR, createXRStore } from "@react-three/xr";
const store = createXRStore();
import { useState } from "react";

export default function Home() {
  const [red, setRed] = useState(false);

  return (
    <div>
      <button onClick={() => store.enterAR()}>Enter AR</button>
      <Canvas>
        <XR store={store}>
          <mesh
            pointerEventsType={{ deny: "grab" }}
            onClick={() => setRed(!red)}
            position={[0, 1, -1]}
          >
            <boxGeometry />
            <meshBasicMaterial color={red ? "red" : "blue"} />
          </mesh>
        </XR>
      </Canvas>
    </div>
  );
}

Running npm run build fails with the following error

❯ npm run build

> nextjs-blog@0.1.0 build
> next build

  ▲ Next.js 14.2.11

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/5)  [=   ]ReferenceError: HTMLElement is not defined
    at /Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:34709
    at 183 (/Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:41655)
    at Object.t [as require] (/Users/bug_reports/xr_next/nextjs-blog/.next/server/webpack-runtime.js:1:127)
    at require (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18224)
    at i (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:88294)
    at /Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98817
    at /Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98904
    at t (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:99107) {
  digest: '2038095390'
}

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

ReferenceError: HTMLElement is not defined
    at /Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:34709
    at 183 (/Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:41655)
    at Object.t [as require] (/Users/bug_reports/xr_next/nextjs-blog/.next/server/webpack-runtime.js:1:127)
    at require (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18224)
    at i (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:88294)
    at /Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98817
    at /Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98904
    at t (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:99107)
 ✓ Generating static pages (5/5)

> Export encountered errors on following paths:
        /page: /

Additional Observation

Removing all xr code (but leaving the fiber code) fixes the error.

bbohlender commented 1 month ago

@AlexanderZeilmann thanks for the bug report. It should be fixed in version 6.2.10 now

AlexanderZeilmann commented 1 month ago

Thank you @bbohlender! Yes, the bug is fixed! However, the nextjs build process is not yet completing successfully.

With the same setup as above I get the error

./src/app/page.tsx:22:32
Type error: Type '{ color: string; }' is not assignable to type 'ExtendedColors<Overwrite<Partial<{}>, NodeProps<{}, {}>>>'.
  Property 'color' does not exist on type 'ExtendedColors<Overwrite<Partial<{}>, NodeProps<{}, {}>>>'.

  20 |           >
  21 |             <boxGeometry />
> 22 |             <meshBasicMaterial color={red ? "red" : "blue"} />
     |                                ^
  23 |           </mesh>
  24 |         </XR>
  25 |       </Canvas>

Removing the color attribute, results in yet another error:

  npm run build

> nextjs-blog@0.1.0 build
> next build

  ▲ Next.js 14.2.13

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/5)  [=   ]ReferenceError: navigator is not defined
    at /Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:38630
    at /Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:38746
    at 4737 (/Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:41745)
    at Object.t [as require] (/Users/bug_reports/xr_next/nextjs-blog/.next/server/webpack-runtime.js:1:127)
    at require (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18228)
    at i (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:88294)
    at /Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98817
    at /Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98904
    at t (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:99107) {
  digest: '201334988'
}

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

ReferenceError: navigator is not defined
    at /Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:38630
    at /Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:38746
    at 4737 (/Users/bug_reports/xr_next/nextjs-blog/.next/server/app/page.js:352:41745)
    at Object.t [as require] (/Users/bug_reports/xr_next/nextjs-blog/.next/server/webpack-runtime.js:1:127)
    at require (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18228)
    at i (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:88294)
    at /Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98817
    at /Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:98904
    at t (/Users/bug_reports/xr_next/nextjs-blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:99107)
 ✓ Generating static pages (5/5)

> Export encountered errors on following paths:
        /page: /
bbohlender commented 1 month ago

@AlexanderZeilmann

the error regarding the color is unrelated to react-three/xr and most likely related to your typescript version.

The navigator error should be fixed now :)

albertpurnama commented 1 month ago

@bbohlender I'm actually experiencing the same issue with the color prop

Type error: Type '{ color: string; }' is not assignable to type 'ExtendedColors<Overwrite<Partial<{}>, NodeProps<{}, {}>>>'. Property 'color' does not exist on type 'ExtendedColors<Overwrite<Partial<{}>, NodeProps<{}, {}>>>'.

When you say the TS version error, can you elaborate on that?

Thanks!

Edit: I'm using TS v5