build(deps): remove babel-plugin-transform-es2015-modules-commonjs #7114

eatyourgreens · 2024-05-31T10:59:50Z

Remove babel-plugin-transform-es2015-modules-commonjs, which is 6 years out-of-date and no longer supported. It generates security warnings in the console, because of outdated dependencies on babel-traverse (also 6 years out-of-date and not supported in Babel 7.)

use Babel to transpile .coffee and .cjsx files from CJS to ESM.
explicitly set the Babel source type to ESM, which has been the default for a while now. All of PFE’s JS and JSX files use ESM.
fix broken module.exports in a couple of places.
fix broken propTypes in Pages Editor components.
npm audit fix.
fixes Installs warn about critical vulnerabilities #7115.
fixes Pages Editor: Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component? #7116.
fixes some missing React keys in the app router.

You can test this locally a couple of ways:

npm start: development React build with hot module reloading and React debugging errors in the console.
npm run serve-static: build the production bundle with Webpack, and serve it on http://localhost:3735 or http://local.zooniverse.org:3735. This method reproduces a production deploy, but without the nginx reverse proxy.

npm audit and npm ci should show 0 problems, with the changes here.

Screenshot of the install log, from a build, showing 0 vulnerabilities.

Required Manual Testing

Does the non-logged in home page render correctly?
Does the logged in home page render correctly?
Does the projects page render correctly?
Can you load project home pages?
Can you load the classification page?
Can you submit a classification?
Does talk load correctly?
Can you post a talk comment?

Review Checklist

Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
Does it work on mobile?
Can you npm ci and app works as expected?
If the component is in coffeescript, is it converted to ES6? Is it free of eslint errors? Is the conversion its own commit?
Are the tests passing locally and on GitHub Actions?

Optional

Have you replaced any ChangeListener or PromiseRenderer components with code that updates component state?
If changes are made to the classifier, does the dev classifier still work?
Have you resized and compressed any image you've added?
Have you added in flow type annotations?
Have you followed the Springer guidelines for commit messages?

coveralls · 2024-05-31T11:03:12Z

coverage: 56.954% (+0.3%) from 56.684%
when pulling 9ceeeb3 on eatyourgreens:remove-babel-cjs-plugin
into 8ad3b19 on zooniverse:master.

eatyourgreens · 2024-05-31T13:47:16Z

package.json

@@ -125,7 +124,7 @@
    "start": "export NODE_ENV=development; check-engines && check-dependencies && webpack-dashboard -p 3736 -- webpack-dev-server --config ./webpack.dev.js",
    "_build": "export HEAD_COMMIT=$(git rev-parse --short HEAD); check-engines && check-dependencies && rimraf dist; webpack --config ./webpack.build.js --progress --color",
    "build-production": "export NODE_ENV=production; npm run _build",
-    "serve-static": "export NODE_ENV=staging; check-engines && check-dependencies && npm run _build && node ./static-server.js",
+    "serve-static": "npm ci; export NODE_ENV=production; check-engines && check-dependencies  && npm run _build && node ./static-server.js",


Noting here that staging is an invalid value for NODE_ENV in modern Webpack builds. See https://webpack.js.org/configuration/mode/.

eatyourgreens · 2024-05-31T17:39:16Z

babel.config.js

@@ -1,6 +1,7 @@
 module.exports = function (api) {
  api.cache(true);
  return {
+    sourceType: 'module',


See https://babeljs.io/docs/options#sourcetype. ESM is the default for Babel 7.

eatyourgreens · 2024-05-31T21:59:16Z

app/MonorepoRoutes.jsx

      <Route path=':locale'>
-        {SLUGS.map(slug => <MonorepoRoute path={slug} />)}
+        {SLUGS.map(slug => <MonorepoRoute key={slug} path={slug} />)}


Not really related to the other changes here, but the missing key warnings made real React errors harder to spot while I was chasing down a couple of bugs in this PR. So this makes the console a little bit less noisy.

#7116 also got in the way of debugging React errors on this branch, so I might fix that here too.

Remove `babel-plugin-transform-es2015-modules-commonjs`, which is 6 years out-of-date and no longer supported. It generates security warnings in the console, because of outdated dependencies on `babel-traverse` (also 6 years out-of-date and unsupported.) - transpile `.coffee` and `.cjsx` files from CJS to ESM with Babel. - fix broken `module.exports` in a couple of places. - `npm audit fix`.

eatyourgreens force-pushed the remove-babel-cjs-plugin branch from 48f2cba to 1f23f09 Compare May 31, 2024 13:44

eatyourgreens commented May 31, 2024

View reviewed changes

eatyourgreens mentioned this pull request May 31, 2024

Installs warn about critical vulnerabilities #7115

Open

eatyourgreens commented May 31, 2024

View reviewed changes

eatyourgreens force-pushed the remove-babel-cjs-plugin branch from b30e4d8 to af569f2 Compare May 31, 2024 21:36

eatyourgreens mentioned this pull request May 31, 2024

Pages Editor: Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component? #7116

Open

eatyourgreens commented May 31, 2024

View reviewed changes

eatyourgreens force-pushed the remove-babel-cjs-plugin branch 2 times, most recently from 69e5fef to 7d711bd Compare June 1, 2024 18:16

eatyourgreens force-pushed the remove-babel-cjs-plugin branch from 7d711bd to 6df9cd8 Compare June 8, 2024 01:43

eatyourgreens force-pushed the remove-babel-cjs-plugin branch 3 times, most recently from 6e99494 to 354fd0f Compare June 22, 2024 08:30

eatyourgreens force-pushed the remove-babel-cjs-plugin branch from 354fd0f to 7691256 Compare July 17, 2024 12:29

eatyourgreens added 4 commits November 19, 2024 18:34

Allow for a local production test on local.zooniverse.org

9518fec

add missing component keys

92a40ed

fix(pages editor): broken prop types in EditStepDialog and NewTaskDialog

d78d8cf

eatyourgreens force-pushed the remove-babel-cjs-plugin branch from 7691256 to d78d8cf Compare November 19, 2024 18:34

npm audit fix

9ceeeb3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build(deps): remove babel-plugin-transform-es2015-modules-commonjs #7114

build(deps): remove babel-plugin-transform-es2015-modules-commonjs #7114

eatyourgreens commented May 31, 2024 •

edited

Loading

coveralls commented May 31, 2024 •

edited

Loading

eatyourgreens May 31, 2024

eatyourgreens May 31, 2024 •

edited

Loading

eatyourgreens May 31, 2024

eatyourgreens May 31, 2024 •

edited

Loading

build(deps): remove babel-plugin-transform-es2015-modules-commonjs #7114

Are you sure you want to change the base?

build(deps): remove babel-plugin-transform-es2015-modules-commonjs #7114

Conversation

eatyourgreens commented May 31, 2024 • edited Loading

Required Manual Testing

Review Checklist

Optional

coveralls commented May 31, 2024 • edited Loading

eatyourgreens May 31, 2024

Choose a reason for hiding this comment

eatyourgreens May 31, 2024 • edited Loading

Choose a reason for hiding this comment

eatyourgreens May 31, 2024

Choose a reason for hiding this comment

eatyourgreens May 31, 2024 • edited Loading

Choose a reason for hiding this comment

eatyourgreens commented May 31, 2024 •

edited

Loading

coveralls commented May 31, 2024 •

edited

Loading

eatyourgreens May 31, 2024 •

edited

Loading

eatyourgreens May 31, 2024 •

edited

Loading