ReferenceError: document is not defined

[kethakav]

I'm trying out the sample code in the README.md, in NextJS. I get this error

 ⨯ ReferenceError: document is not defined
    at <instance_members_initializer> (webpack-internal:///(rsc)/./node_modules/@diffusionstudio/core/dist/ds.js:2174:21)
    at new ce (webpack-internal:///(rsc)/./node_modules/@diffusionstudio/core/dist/ds.js:2192:5)
    at makeVideo (webpack-internal:///(rsc)/./utils/difftest.js:11:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async GET (webpack-internal:///(rsc)/./app/api/diff-test/route.ts:21:5)
    at async D:\Dev\diffusion-test\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:55038
    at async ek.execute (D:\Dev\diffusion-test\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:45808)
    at async ek.handle (D:\Dev\diffusion-test\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:56292)
    at async doRender (D:\Dev\diffusion-test\node_modules\next\dist\server\base-server.js:1357:42)
    at async cacheEntry.responseCache.get.routeKind (D:\Dev\diffusion-test\node_modules\next\dist\server\base-server.js:1579:28)
    at async DevServer.renderToResponseWithComponentsImpl (D:\Dev\diffusion-test\node_modules\next\dist\server\base-server.js:1487:28)
    at async DevServer.renderPageComponent (D:\Dev\diffusion-test\node_modules\next\dist\server\base-server.js:1911:24)
    at async DevServer.renderToResponseImpl (D:\Dev\diffusion-test\node_modules\next\dist\server\base-server.js:1949:32)
    at async DevServer.pipeImpl (D:\Dev\diffusion-test\node_modules\next\dist\server\base-server.js:916:25)
    at async NextNodeServer.handleCatchallRenderRequest (D:\Dev\diffusion-test\node_modules\next\dist\server\next-server.js:272:17)
    at async DevServer.handleRequestImpl (D:\Dev\diffusion-test\node_modules\next\dist\server\base-server.js:812:17)
    at async D:\Dev\diffusion-test\node_modules\next\dist\server\dev\next-dev-server.js:339:20
    at async Span.traceAsyncFn (D:\Dev\diffusion-test\node_modules\next\dist\trace\trace.js:154:20)
    at async DevServer.handleRequest (D:\Dev\diffusion-test\node_modules\next\dist\server\dev\next-dev-server.js:336:24)
    at async invokeRender (D:\Dev\diffusion-test\node_modules\next\dist\server\lib\router-server.js:173:21)
    at async handleRequest (D:\Dev\diffusion-test\node_modules\next\dist\server\lib\router-server.js:350:24)
    at async requestHandlerImpl (D:\Dev\diffusion-test\node_modules\next\dist\server\lib\router-server.js:374:13)
    at async Server.requestListener (D:\Dev\diffusion-test\node_modules\next\dist\server\lib\start-server.js:141:13)

Is there something I can do to fix this or is it something with the package?

[k9p5]

Whenever you access Diffusion Studio you need to make sure it runs client side by putting "use client" at the beginning of your file

[k9p5]

I have added a next-js template to the examples: https://github.com/diffusionstudio/examples/tree/main/next-js

[k9p5]

You can run the README.md snippet inside a useEffect hook.

[kethakav]

I'll check it out. After doing everything in front end seemed to fix the issue earlier. Thanks for getting back so fast.