Error when using the `Crossword` component with `Remix` and `vite`

[trungbui2000]

Describe the bug
I am using Remix with vite and I am encountering an error with using the Crossword component. Let me know if this is more of a feature request or that I am missing something but it seems that the @guardian/react-crossword library is written in ES module which in the context of my server does not support ES module. As a result, there is the error as shown below

Internal Server Error
Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at SSRCompatModuleRunner.directRequest (file:///Users/trung.bui/Desktop/other/BuScore/node_modules/vite/dist/node/module-runner.js:1220:24)
(Error overlay failed to load)

To Reproduce
Steps to reproduce the behavior:

1. Install a remix project with npx create-remix@latest
2. Create a page and attach the following code

import { CrosswordProps, Crossword } from '@guardian/react-crossword';

const data: CrosswordProps['data'] = {
  entries: [
    {
      id: '1-across',
      number: 1,
      humanNumber: '1',
      clue: 'Sandy shore',
      direction: 'across',
      length: 5,
      group: ['1-across'],
      position: { x: 0, y: 0 },
      separatorLocations: {},
      solution: 'BEACH',
    },
  ],
  solutionAvailable: true,
  dateSolutionAvailable: 1542326400000,
  dimensions: {
    cols: 5,
    rows: 5,
  },
  crosswordType: 'quick',
  id: 'crosswords/example/1',
  number: 1,
  name: 'Example crossword No 1',
  date: 1740149419743,
};

export default function Component() {
  return <Crossword data={data} />;
}

Expected behavior
With Remix SSR, we should still be able to render the crossword component

Screenshots
Screenshot of the error on the browser with the code above.

Environment (please complete the following information):

• Platform: MacOS
• Node manager nvm - Node v22

[trungbui2000]

A workaround for people using SSR would be to import the library on the client side. I was able to get this to work with something like

export default function Component() {
  const [Crossword, setCrossword] = useState<React.ComponentType<CrosswordProps> | null>(null);

  useEffect(() => {
    // Dynamically import the Crossword component on the client since
    // node server does not allow ESM imports
    import('@guardian/react-crossword').then((module) => {
      setCrossword(() => module.Crossword);
    });
  }, []);

  if (!Crossword) {
    return null;
  }

  return (
     <Crossword data={data} />
  );
}