alephjs/aleph.js

antd: SSR TypeError: Cannot read properties of null (reading 'useContext')

ahuigo opened this issue · 4 comments

I want to use alephjs with antd, but I'm getting some errors that I couldn't solve with Google.

Version

aleph 1.0.0-beta.1

Reproduced code

// routes/index.tsx
import { Button } from "https://esm.sh/antd?bundle"
export default function Index() {
  return (
     <Button>test</Button> 
  );
}

Error

Download http://localhost:3000/routes/index.tsx?ssr&v=l6tfyysf
ERROR SSR TypeError: Cannot read properties of null (reading 'useContext')
    at Module.n.useContext (https://esm.sh/v91/react@18.2.0/deno/react.js:2:6128)
    at ice (https://esm.sh/v91/antd@4.22.4/deno/antd.bundle.js:102:5879)
    at Zn (https://esm.sh/v87/react-dom@18.2.0/deno/server.js:12:11816)
    at St (https://esm.sh/v87/react-dom@18.2.0/deno/server.js:12:14166)
    at V (https://esm.sh/v87/react-dom@18.2.0/deno/server.js:12:14924)
    at xt (https://esm.sh/v87/react-dom@18.2.0/deno/server.js:12:15890)
    at St (https://esm.sh/v87/react-dom@18.2.0/deno/server.js:12:12960)
    at V (https://esm.sh/v87/react-dom@18.2.0/deno/server.js:12:14924)
    at St (https://esm.sh/v87/react-dom@18.2.0/deno/server.js:12:12782)
    at V (https://esm.sh/v87/react-dom@18.2.0/deno/server.js:12:14924)

There are some compatible problem with antd.

If I have time, I plan to migrate the antd's base component to deno platform:
https://github.com/react-component

ije commented

this is a cache problem, try deno run -r -A server.ts

this is a cache problem, try deno run -r -A server.ts

Other problems arise.

It seems that esm.sh has conversion error which break the generation of window.__ROUTE_MODULES
https://esm.sh/v91/antd@4.22.5/es2022/antd.development.bundle.js

Unexpected token '/' (at antd.development.bundle.js:formatted:39871:30)
import * as React299 from "/"/-/esm.sh/v91/react@18.2.0/es2022/react.development.js"var FormItemInput = function FormItemInput2(props) {

image

This problem may be caused by server/transformer.ts.

When I debug my code and step into transformer.ts via deno run -A --inspect --inspect-brk.

Another error was thrown in this code:
https://github.com/alephjs/aleph-compiler/blob/main/dist/compiler.js#L221

return await WebAssembly.instantiateStreaming(module, imports);
// 'TypeError: WebAssembly.compile(): Argument 0 must be a buffer source'

image

I'm having a bit of a problem about debugging: denoland/vscode_deno#708