Open PyvesB opened 3 years ago
This issue is kind of still relevant but has changed substantially.
Now that we are off of Gatsby, all the detail above has changed, but having migrated to Docusaurus, we do still have some CommonJS frontend code (but a lot less). See https://github.com/badges/shields/pull/9014#discussion_r1142330196
The relevant upstream issues are now:
This is related to #6651, in particular https://github.com/badges/shields/pull/6651#discussion_r666389443.
Problem
Gatsby does not support ESM. See https://github.com/gatsbyjs/gatsby/issues/23705 and linked discussions for more information.
In particular, when running
npm start
midway through migrating the whole code to ESM, I was getting errors similar to the following:npm run build
was also producing different kinds of errors.Current workaround
The solution was to break the frontend down into a separate module with its own
frontend/package.json
. Unlike Shields' top-levelpackage.json
,frontend/package.json
does not contain the mention"type": "module"
, in other words it is still a CommonJS module.In addition to mandating the extra
frontend/package.json
, the solution has the following caveats:frontend/package.json
.gatsby
dependency must be specified in bothpackage.json
andfrontend/package.json
, Gatsby will otherwise complain that the frontend package is not a Gatsby project.start
andbuild
scripts frompackage.json
have an extracd frontend
step so that Gatsby is run fromfrontend/package.json
.gatsby-browser.js
,gatsby-config.js
andgatsby-node.js
have been moved to thefrontend
directory.supported-features.json
andservice-definitions.yml
files are now produced in thefrontend
directory. This is only a minor detail to make relative paths simpler.build
script, i.e. thepublic
folder, is moved up one level back into the project's root. Gatsby producespublic
in thefrontend
directory where it's run and that can't be changed (https://github.com/gatsbyjs/gatsby/discussions/1878), and Heroku expectspublic
to be in the project's root and that can't be changed ( https://github.com/heroku/heroku-buildpack-nodejs/issues/385). Additionally, our Cypress end-to-end setup will expectpublic
to be in the root as well.require-hacker
dependency and themocha-ignore-pngs.js
file were removed, as not compatible with ESM. These probably aren't needed anymore, as the ESM loader ignores PNGs anyway if my understanding is correct.import
statements inmake-badge-url.js
must be carefully tested, as they are used both by the ESM loader and Typescript loader, which have slightly different behaviours. For example,import { URL } from 'url'
won't work there.Future work
Once Gatsby becomes compatible with ESM, we would simply need to revert all aforementioned workarounds (apart from the
require-hacker
one), and potentially convertgatsby-browser.js
,gatsby-config.js
andgatsby-node.js
to ESM formats as well. Additionally, it is my understanding that we will need to addjs
file extensions to the existing relative imports in the frontend code.