search

GovAlta / ui-components

ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
Apache License 2.0
14 stars 24 forks source link

All: don't work in server side rendering in remix framework - React #2035

Closed zhrangui closed 6 hours ago

zhrangui commented 1 month ago

Info

Add any GoA ui component e.g. GoAButton in ssr page. It show error as following image. image

Acceptance Criteria

  1. This is a MAJOR VERSION change
  2. Web Components library is no longer included in the React library by default
  3. Documentation updated to indicate they need to include the web components library (here)
  4. React template is updated with this major version

Relevant console log output

Class extends value undefined is not a constructor or null
    at ce (file:///C:/Projects/remix/node_modules/@abgov/react-components/index.mjs:771:11)
    at file:///C:/Projects/remix/node_modules/@abgov/react-components/index.mjs:840:1
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26)
    at async nodeImport (file:///C:/Projects/remix/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53536:15)
    at async ssrImport (file:///C:/Projects/remix/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53392:16)
    at async eval (C:/Projects/remix/app/routes/test.tsx:4:31)
    at async instantiateModule (file:///C:/Projects/remix/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:53451:5

Additional context

react ui components have issue to be rendered in server side

AndreFilipeNavesDeBarros commented 4 weeks ago

It comes from a limitation on circular import/extends. And as an extra observation adding the <script> tags to import ionicons also breaks the hydration of the forms sending the app to client side mode