Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

'document is undefined' with SSR #23

Closed
cdebotton opened this issue May 20, 2020 · 5 comments
Closed

'document is undefined' with SSR #23

cdebotton opened this issue May 20, 2020 · 5 comments

Comments

@cdebotton
Copy link

When importing drei in an app that renders with SSR, an error is thrown as troika-3d-text has multiple references to the document object. This can be circumvented by loading components that require this using lazy or dynamic imports, but unfortunately, importing anything from drei will bring in troika-3d-text, so it is impossible to, for example, use the awesome <HTML /> component for a loading state for the modules we want to lazy load that contain these document references.

Here is the full error:

Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/me/www/cdb/node_modules/troika-3d-text/dist/textmesh-standalone.umd.js (4285:16)
<unknown>
file:///Users/me/www/cdb/node_modules/troika-3d-text/dist/textmesh-standalone.umd.js (2:66)
Object.<anonymous>
file:///Users/me/www/cdb/node_modules/troika-3d-text/dist/textmesh-standalone.umd.js (5:2)
Module._compile
internal/modules/cjs/loader.js (955:30)
Object.Module._extensions..js
internal/modules/cjs/loader.js (991:10)
Module.load
internal/modules/cjs/loader.js (811:32)
Function.Module._load
internal/modules/cjs/loader.js (723:14)
Module.require
internal/modules/cjs/loader.js (848:19)
require
internal/modules/cjs/helpers.js (74:18)
Object.troika-3d-text/dist/textmesh-standalone.umd
webpack:///external%20%22troika-3d-text/dist/textmesh-standalone.umd%22 (1:0)
__webpack_require__
webpack:///webpack/bootstrap (27:0)
Object../node_modules/drei/dist/index.cjs.js
node_modules/drei/dist/index.cjs.js (19:29)
__webpack_require__
webpack:///webpack/bootstrap (27:0)
Module../src/pages/index.tsx
file:///Users/me/www/cdb/.next/server/static/development/pages/index.js (55469:62)
__webpack_require__
webpack:///webpack/bootstrap (27:0)
Object.3
file:///Users/me/www/cdb/.next/server/static/development/pages/index.js (55642:18)
@drcmda
Copy link
Member

drcmda commented May 20, 2020

it should tree-shake. i've tried it, just using HTML and there is no mention of troika in the resulting bundle. are you in dev mode perhaps, or is there any other reason why it wouldn't shake off un-used dependencies?

@cdebotton
Copy link
Author

cdebotton commented May 20, 2020 •
edited

Thanks for the quick reply! Embarrassingly, I didn’t consider I was in dev mode, but I’m still wondering if there’s a preferred way to work with these tools while developing an application as any page that imports drei will throw an error.

This seems like something that should be resolved by the project setup.

This was referenced May 23, 2020
Closed
Closed
@drcmda
Copy link
Member

drcmda commented May 24, 2020

He fixed it, could you try loading this lib in ssr? protectwise/troika#46 we're not sure if that's all that we need to do

@cdebotton
Copy link
Author

@drcmda Thanks for the follow-up! The undefined document errors are gone, I am however seeing this is in my console when running the app:

Troika createWorkerModule: web workers not allowed in current environment; falling back to main thread execution. ReferenceError: Worker is not defined
    at supportsWorkers (/Users/me/www/cdb/node_modules/troika-worker-utils/dist/troika-worker-utils.umd.js:417:20)
    at defineWorkerModule (/Users/me/www/cdb/node_modules/troika-worker-utils/dist/troika-worker-utils.umd.js:472:10)
    at /Users/me/www/cdb/node_modules/troika-worker-utils/dist/troika-worker-utils.umd.js:606:30
    at /Users/me/www/cdb/node_modules/troika-worker-utils/dist/troika-worker-utils.umd.js:2:66
    at Object.<anonymous> (/Users/me/www/cdb/node_modules/troika-worker-utils/dist/troika-worker-utils.umd.js:5:2)

It doesn't prevent the app from rendering, which is great, but it does add noise to logs.

@drcmda
Copy link
Member

drcmda commented May 25, 2020

could you open a new ticket over there (troika)? there's nothing i can do here, other than messing with the build system, but would be great to keep the flatbundle for convenience.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cdebotton @drcmda