search

tommasoturchi / react-three-mind

MindAR components for @react-three/fiber
37 stars 12 forks source link

index.js:625 Uncaught Error: Automatic publicPath is not supported in this browser #16

Open saurabhburadkar opened 1 year ago

saurabhburadkar commented 1 year ago

Screenshot 2023-06-20 at 10 58 29 AM

amcc commented 7 months ago

I have the same error - trying to use this in a nextJS environment

 node_modules/react-three-mind/dist/index.js (1:3305148) @ eval
 ⨯ Error: Automatic publicPath is not supported in this browser
    at __webpack_require__ (/Users/alistairmcclymont/Sites/amcc-work/jack warne/jack-ar-next/.next/server/webpack-runtime.js:33:43)
    at eval (./app/page.js:10:74)
    at (ssr)/./app/page.js (/Users/alistairmcclymont/Sites/amcc-work/jack warne/jack-ar-next/.next/server/app/page.js:217:1)
    at __webpack_require__ (/Users/alistairmcclymont/Sites/amcc-work/jack warne/jack-ar-next/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
null
muhirai commented 6 months ago

I faced this error with nextjs too, it seems to have to do with SSR I resolved it by using dynamic imports, replaced:

import { ARAnchor, ARView } from "react-three-mind";

with: 'use client' import dynamic from 'next/dynamic'; const ARView = dynamic(() => import('react-three-mind').then((mod) => mod.ARView), { ssr: false }); const ARAnchor = dynamic(() => import('react-three-mind').then((mod) => mod.ARAnchor), { ssr: false });

amcc commented 6 months ago

I meant to post that I solved this in exactly the same way. The error isn't next specific, I tried this in Gatsby and also got this error. It stems from node on the server testing to access browser only studio I believe.

For any Gatsby (or other compiled frameworks) use loadable component to achieve the same thing as the above answer