support for deno serverside rendering

kesavkolla commented 1 month ago

Is your feature request related to a problem?

No

Describe the solution you'd like

I want to use ui5 components from server side rendering of Deno and fresh framework. Currently when I try to start the project after installing the npm modules the server fail to start.

It is failing at 3rd party library zxing with the following error:

error: Uncaught (in promise) ReferenceError: window is not defined
    at Object.<anonymous> (file:///home/kesav/.cache/deno/npm/registry.npmjs.org/@zxing/library/0.17.1/umd/index.min.js:1:445)
    at Object.<anonymous> (file:///home/kesav/.cache/deno/npm/registry.npmjs.org/@zxing/library/0.17.1/umd/index.min.js:3:4)
    at Module._compile (node:module:736:34)
    at Object.Module._extensions..js (node:module:757:11)
    at Module.load (node:module:655:32)
    at Function.Module._load (node:module:523:13)
    at Module.require (node:module:674:19)
    at require (node:module:801:16)
    at file:///home/kesav/.cache/deno/npm/registry.npmjs.org/@zxing/library/0.17.1/umd/index.min.js:3:13
Watcher Process failed. Restarting on file change...

Is there anyway to exclude the components that are not needed so that we don't get these kind of failures.

Describe alternatives you've considered

No response

Additional Context

deno version: 1.46.3 fresh framework version: 2.0.0-alpha.20 react framework: preact

Organization

No response

Declaration

[ ] I’m not disclosing any internal or sensitive information.

kesavkolla commented 1 month ago

When I tried import this from esm.sh I get the following error:

error: Uncaught (in promise) TypeError: Import 'https://esm.sh/v135/@ui5/webcomponents-base@2.2.0/denonext/dist/ssr-dom.js' failed: 500 Internal Server Error
    at https://esm.sh/v135/@ui5/webcomponents-base@2.2.0/denonext/dist/UI5Element.js:2:7
      const mod = await options.loadRoute(routePath);
                  ^
    at async https://jsr.io/@fresh/core/2.0.0-alpha.20/src/plugins/fs_routes/mod.ts:125:19
    at async Promise.all (index 2)
    at async fsRoutes (https://jsr.io/@fresh/core/2.0.0-alpha.20/src/plugins/fs_routes/mod.ts:123:48)

MarcusNotheis commented 1 month ago

Hi @kesavkolla, thanks for reaching out - I think at the end of the day the error comes down to this upstream dependency issue in UI5 Web Components: https://github.com/SAP/ui5-webcomponents/issues/9771 As soon as this is fixed and released, we should be already pretty close to supporting SSR in Deno :)

ui5-webcomponents-react-bot commented 1 month ago

:tada: This issue has been resolved in version v2.2.0 :tada:

The release is available on v2.2.0

Your semantic-release bot :package::rocket:

kesavkolla commented 2 weeks ago

@MarcusNotheis

I tried with deno 2.0 still getting the error:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useEffect')
    at useEffect (file:///home/kesav/.cache/deno/npm/registry.npmjs.org/react/18.3.1/cjs/react.development.js:1634:21)
    at Object.ThemeProvider (file:///home/kesav/.cache/deno/npm/registry.npmjs.org/@ui5/webcomponents-react/2.2.0/dist/components/ThemeProvider/index.js:45:3)
    at U (file:///home/kesav/.cache/deno/npm/registry.npmjs.org/preact-render-to-string/6.5.11/dist/index.mjs:1:5646)
    at U (file:///home/kesav/.cache/deno/npm/registry.npmjs.org/preact-render-to-string/6.5.11/dist/index.mjs:1:5316)
    at U (file:///home/kesav/.cache/deno/npm/registry.npmjs.org/preact-render-to-string/6.5.11/dist/index.mjs:1:4872)

kesavkolla commented 2 weeks ago

I have setup Deno to resolve react and react-dom properly. Now the above error is gone.

Now different error. It says HTMLElement is not defined. Some how code thinks Deno as client. It doesn't recognize as NodeJS.

error: Uncaught (in promise) ReferenceError: HTMLElement is not defined
    at https://esm.sh/v135/@ui5/webcomponents-base@2.3.0/X-ZS9yZWFjdCxyZWFjdC1kb20/denonext/dist/UI5Element.js:2:3633

SAP / ui5-webcomponents-react