GCDS- POC header

[timarney]

Summary | Résumé

POC using GCDS Header

#4273

[timarney]

Won't compile

 GET /en/sla?_rsc=bcp9r 200 in 1743ms
TypeError: Cannot read properties of undefined (reading 'split')
    at Object.read (webpack-internal:///(ssr)/./node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js:92:30)
    at Object.lookup (webpack-internal:///(ssr)/./node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js:109:22)

 ○ Compiling /api/auth/[...nextauth] ...
 ⚠ ./node_modules/linkedom/commonjs/canvas.cjs
Module not found: Can't resolve 'canvas' in '/Users/timarney/projects/platform-forms-client/node_modules/linkedom/commonjs'

Import trace for requested module:
./node_modules/linkedom/commonjs/canvas.cjs
./node_modules/linkedom/esm/html/canvas-element.js
./node_modules/linkedom/esm/shared/html-classes.js
./node_modules/linkedom/esm/index.js
./node_modules/@cdssnc/gcds-components-react-ssr/dist/esm/lib/server.js
./app/layout.tsx
 GET /api/auth/session 200 in 2707ms
[08:26:06.824] WARN: NextAuth warning - Code: debug-enabled

Related to:

Server.js

var import_linkedom = require("linkedom");

[timarney]

@ethanWallace @daine

Any thoughts on how to get around the linkedom issue above?

I can see the same errors throwing on this example but in this case it does render the header.

https://codesandbox.io/p/devbox/hyzfcx

[ethanWallace]

@timarney You should be able to add this bit to your next.config.

  webpack: (config) => {
    // Fixes dependency issues with `canvas` and `perf_hooks` of linkedom
    config.resolve.fallback = { canvas: false, perf_hooks: false };

    return config;
  },

[timarney]

Thanks @ethanWallace ---

Hitting a further issue

 ⨯ uncaughtException: TypeError: Cannot read properties of undefined (reading 'split')
    at Object.read (webpack-internal:///(ssr)/./node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js:92:30)

[timarney]

Pushed a commit comment out the lang detect for now.

[github-actions]

🧪 Review environment

https://2w7jlrxaqnlhuxnjj3hfflcp5a0ibqwp.lambda-url.ca-central-1.on.aws/

[timarney]

With workarounds in place we're able to get a component rendering.

[timarney]

@ethanWallace have you folks looked at nonces yet?

https://stenciljs.com/docs/csp-nonce

Our CSP is very strict

[timarney]

Having done some initial investigation into feasibility we have 2 initial blockers

• Content security policy GCDS- POC header #4281 (comment)
• i18N - browser detect script issue GCDS- POC header #4281 (comment)

[ethanWallace]

@timarney We haven't explored how a team could use that nonce helper function yet.

[timarney]

Closing this PR as it was only for feasibility check per #4273

Thanks for the help @ethanWallace

[daine]

@timarney could you send a few info my way around your setup on nonces? We have CSP as well but haven't implemented the nonce method but it's something we can look at. I'd be curious to know the implementation details that you have around it.

Update: I created issues on our github repo linking back to this PR. If you have anything to add or share you can add it to those issues as well. Thanks for giving it a shot!

[timarney]

@daine for the nonce

It might be possible if the setNonce function was exposed we might be able to set it as we do have the ability to pass the generated nonce to components i.e. on the Form Ownership we pass the nonce to React Select / Emotion. There's further issues with the nonce on our end but noting that's how we've done it for other libs.

  const { session, ability } = await authCheckAndThrow().catch(() => ({
    session: null,
    ability: null,
  }));
...
  const nonce = await getNonce();


    return (
      <ManageForm
        nonce={nonce}

export const FormOwnership = ({
  nonce,

const cache: EmotionCache = createCache({
    key: "gc-forms",
    nonce: nonce || "xyz123",
  });