Fails on Node.js

[SiAdcock]

This fails in Node.js because it imports ESM versions of the @guardian/src-foundations submodules.

export { background, border, brand, brandAlt, brandAltBackground, brandAltBorder, brandAltLine, brandAltText, brandBackground, brandBorder, brandLine, brandText, brandYellow, culture, error, labs, lifestyle, line, neutral, news, opinion, sport, success, text };
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/simon_adcock/code/source-shakedown/node_modules/@guardian/atoms-rendering/dist/index.js:1:189)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)

Minimal repro on this branch. Clone, git checkout explainer-atom then run yarn && yarn ssr

If you want this project to run on Node.js (i.e. server-side rendering), you will need to import CommonJS versions of the @guardian/src-foundations submodules in the main (CommonJS) bundle. You can do this in two ways:

1. Always use the /cjs endpoint at the end of every @guardian/src-foundations/* import. This is probably not ideal
2. Use microbundle's --alias flag to replace calls to @guardian/src-foundations/* with @guardian/src-foundations/*/cjs for the cjs bundle only

{
  "scripts": {
    "build:cjs": "microbundle --jsx React.createElement --format cjs --alias @guardian/src-foundations/typography=@guardian/src-foundations/typography/cjs,@guardian/src-foundations/palette=@guardian/src-foundations/palette/cjs",
    "build:modern:" "microbundle --jsx React.createElement --format modern",
    "build": "yarn build:modern && yarn build:cjs"
  }