No support for CommonJS package types

[gregory-j-baker]

Today I tried to integrate GCDS with my Remix application and ran into the following issue when Remix tried to render a component server-side:

/home/{...}/node_modules/@cdssnc/gcds-components-react/dist/index.js:4
import { createReactComponent } from './react-component-lib';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/gbaker/Projects/github/dts-stn/canadian-dental-care-plan/frontend/app/routes/gcds-test.tsx:1:28)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)

The problem is that my custom server must be compiled as CommonJS (for technical reasons), so when it tries to render a GCDS component, it fails.

Have you considered shipping a hybrid package that contains both .mjs and .cjs variants, so those of us stuck using CommonJS on the server can still use GCDS?

[gregory-j-baker]

FYI: we figured out how to import GCDS into a Remix CJS server, see remix.config.js.

tldr: serverDependenciesToBundle: ['@cdssnc/gcds-components', '@cdssnc/gcds-components-react']

However, I will keep this issue open because I still think that providing .cjs builds of your package is important, and will likely become even more important as frameworks migrate to react server components.

[gregory-j-baker]

One more comment that might be helpful.

• https://publint.dev/@cdssnc/[email protected]
• https://publint.dev/@cdssnc/[email protected]

[ethanWallace]

Thanks for raising this issue, we don't have much experience with Remix but will look into making integration into the framework easier.

[gregory-j-baker]

The problem I reported is not specific to Remix. It's integration with CommonJS builds. I haven't verified this blog post, but it does seem to sum up the problem and offer a potential solution: https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html.

[ethanWallace]

Thanks, we will definitely use that as a reference when we take a look at the CommonJs package

[daine]

Adding a comment here of a repository that uses remix: https://github.com/DTS-STN/canadian-dental-care-plan/tree/main/frontend

[gregory-j-baker]

Adding a comment here of a repository that uses remix: https://github.com/DTS-STN/canadian-dental-care-plan/tree/main/frontend

For what it's worth, our project no longer uses CommonJS, so this repo isn't really relevant to this specific issue (anymore). 🤣

If you do need a remix project that uses CommonJS, I can deploy a stackblitz project or even create a small do-nothing project in my personal github account.

[daine]

@gregory-j-baker we may not get to fixing this issue soon, but a small do-nothing project will be helpful and appreciated!

[andrewleith]

Just chatting a bit with @gregory-j-baker and in case someone else is trying to use GCDS with the latest remix, the configuration needed to get it to work is now in vite.config.js. Here is my full working config:

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
  ssr: {
    noExternal: ['@cdssnc/gcds-components', '@cdssnc/gcds-components-react'],
  }
});