Error rendering .wrl file with Next.js

[franjorub]

Hi I'm trying to render a .wrl file in a Next.js app but I can't I always have this error with any file

Uncaught Unexpected token # in JSON at position 0

this is the code that I'm using

//ThreeCanvas
import * as React from "react";
import { useLoader } from "react-three-fiber";
import { VRMLoader } from "three/examples/jsm/loaders/VRMLoader";

function Asset({ url }) {
  const gltf = useLoader(VRMLoader, url);
  return <primitive object={gltf.scene} />;
}

export default function ThreeCanvasComponent() {
  return (
    <React.Suspense fallback={<div>loading</div>}>
      <Asset url="/DI20070_Tulip_v1.0_White.wrl" />
    </React.Suspense>
  );
}

// some component
import * as React from "react";
import dynamic from "next/dynamic";

const Render3DModel = dynamic(
  () => import("../../components/ThreeCanvasComponent"),
  {
    ssr: false,
  }
);

export default function App() {
  return <Render3DModel />;
}

[drcmda]

it looks correct, probably a file issue, wrong path - or the file isn't in your public folder, or next treats the public folder differently, like /public/ ... try to access the file from the url bar.

[franjorub]

it isn't related to the public folder because I tried following this example: https://jsfiddle.net/TheJim01/3nr7rakk/ and they render a wrl file from https://75thtrombone.com/links/stack-exchange/2016-09/example.wrl and I have the same problem pulling the file

index.js?59b3:1 Uncaught Unexpected token # in JSON at position 0

[franjorub]

I need to clarify that this happen only rendering files, the example that you have for render two cubes works perfectly

[drcmda]

the fiddle is not so interesting, there is no problem with the threejs loader thats all it demonstrates, so the issue is in your code or setup. if you do "/DI20070_Tulip_v1.0_White.wrl" then that file must be present in your public folder, it cannot be part of your src folder. i dont know how nextjs aliases public, each bundling environment can be different.

[franjorub]

hi @drcmda the file is present in the public folder

but anyway discarding an issue with the path I pull a file from a remote URL https://75thtrombone.com/links/stack-exchange/2016-09/example.wrl and I have the exact same problem:

index.js?59b3:1 Uncaught Unexpected token # in JSON at position 0

I'm thinking that this could be an issue with Next.js as such because in this vanilla example https://jsfiddle.net/TheJim01/3nr7rakk/ works perfectly.

the only issue that I found in Next.js with the library is for import it and the ssr and that you need disable it. but after that I can't figure out how to make work the file in a component :( or if I missing something else