Issue with `CustomEvent` and SSR

[orangecoloured]

After installing 2.x I couldn't build the project. So I started going back in versions. I'm having this error while building ReferenceError: CustomEvent is not defined. Moving back to 1.4.1 and using CustomEvent in my code fixed the issue. I guess you need to import that type in the contactjs code?

[SE2Dev]

CustomEvent is a global that is provided by the browser. See here.

A ReferenceError would indicate to me that you're seeing this issue at runtime in an environment where it's not defined.

[orangecoloured]

Yeah, this obviously is happening while producing the bundled code. But the bundler doesn't throw the usage of CustomEvent in my project's code. So only the usage in the 3rd party lib code leads to this error.

While CustomEvent is provided by the browser, the lib code should either have checks for the environment type or be environment agnostic. The code is bundled in a non-browser environment, so probably some fallbacks or polyfills should be applied.

[SE2Dev]

Do you have a stack trace for which line failed? I see one location where I left a new CustomEvent() instead of new GestureEvent() so I'm curious if that's the issue, or it's the GestureEvent that's causing the issue.

[orangecoloured]

after chunk asset optimization
Unable to read file: <project-root>/src/src/gestures/Gesture.ts

ReferenceError: CustomEvent is not defined
method: qVkA

Stack:

{
    "fileName": "<project-root>/build/ssr-build/ssr-bundle.js",
    "lineNumber": 4,
    "functionName": "Module.qVkA",
    "typeName": "Module",
    "methodName": "qVkA",
    "columnNumber": 131082,
    "native": false
}
This is most likely caused by using DOM or Web APIs.
Pre-render runs in node and has no access to globals available in browsers.

Consider wrapping code producing error in: "if (typeof window !== "undefined") { ... }"

Alternatively use "preact build --no-prerender" to disable prerendering.

See https://github.com/preactjs/preact-cli#pre-rendering for further information.

[SE2Dev]

Ah yeh, it's an SSR issue. CustomEvent is not present in the SSR environment. You could try disabling SSR like it mentions in the error. I'm not really sure why it allows you to use CustomEvent directly in your code though.

[orangecoloured]

The whole point of using frameworks that provide you with SSR output is to have the web pages pre-rendered. So disabling it makes no sense in this case. :) I think preact injects global types on the bundling stage for the project's code. Probably it doesn't do it for all the 3rd party packages. So maybe these global browser types need to be introduce to the contactjs code? Otherwise it looks like it will fail to bundle in any SSR build.

[SE2Dev]

I added a polyfill for CustomEvent for non-browser environments in cccbbc60c4e3b787f37df575aed54dd786006622.

[orangecoloured]

@biodiv Could you create a new npm release so I can test the SSR?

[biodiv]

I just published v2.1.2 which contains https://github.com/biodiv/contactjs/commit/cccbbc60c4e3b787f37df575aed54dd786006622

[orangecoloured]

@SE2Dev Perfect! SSR build completes with no errors.