refactor: ensure any given file is all CJS or all ESM

.babelrc

@@ -10,11 +10,7 @@
         [
             "@babel/preset-env",
             {
-                "bugfixes": true,
-
-                // This papers over the fact that our current code is inconsistent
-                // For example, we sometimes use `import` with a file that exports with `module.exports`
-                "modules": "commonjs"
+                "bugfixes": true
             }
         ],
         "@babel/preset-react"

src/components/dropdown-banner/email-confirmation/banner.jsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/jsx-no-bind */
-import React, {useState} from 'react';
-import PropTypes from 'prop-types';
-import DropdownBanner from '../banner.jsx';
+const React = require('react');
+const {useState} = React;
+const PropTypes = require('prop-types');
+const DropdownBanner = require('../banner.jsx');
 const FormattedMessage = require('react-intl').FormattedMessage;
 
 const EmailConfirmationModal = require('../../../components/modal/email-confirmation/modal.jsx');

src/components/errorboundary/errorboundary.jsx

@@ -2,7 +2,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const CrashMessageComponent = require('../crashmessage/crashmessage.jsx');
-import log from '../../lib/log.js';
+const log = require('../../lib/log.js');
 
 class ErrorBoundary extends React.Component {
     constructor (props) {

src/components/formik-forms/formik-checkbox.jsx

@@ -1,7 +1,7 @@
 const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const React = require('react');
-import {Field} from 'formik';
+const {Field} = require('formik');
 
 require('./formik-checkbox.scss');
 require('./formik-forms.scss');

src/components/formik-forms/formik-input.jsx

@@ -1,7 +1,7 @@
 const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const React = require('react');
-import {Field} from 'formik';
+const {Field} = require('formik');
 
 const ValidationMessage = require('../forms/validation-message.jsx');
 

src/components/formik-forms/formik-radio-button.jsx

@@ -1,7 +1,7 @@
 const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const React = require('react');
-import {Field} from 'formik';
+const {Field} = require('formik');
 
 const FormikInput = require('./formik-input.jsx');
 

src/components/formik-forms/formik-select.jsx

@@ -1,6 +1,6 @@
 const PropTypes = require('prop-types');
 const React = require('react');
-import {Field} from 'formik';
+const {Field} = require('formik');
 
 const ValidationMessage = require('../forms/validation-message.jsx');
 

src/components/join-flow/birthdate-step.jsx

@@ -2,7 +2,7 @@ const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
-import {Formik} from 'formik';
+const {Formik} = require('formik');
 const {injectIntl} = require('react-intl');
 const FormattedMessage = require('react-intl').FormattedMessage;
 

src/components/join-flow/country-step.jsx

@@ -2,7 +2,7 @@ const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
-import {Formik} from 'formik';
+const {Formik} = require('formik');
 const {injectIntl} = require('react-intl');
 
 const countryData = require('../../lib/country-data');

src/components/join-flow/email-step.jsx

@@ -2,7 +2,7 @@ const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
-import {Formik} from 'formik';
+const {Formik} = require('formik');
 const {injectIntl} = require('react-intl');
 const FormattedMessage = require('react-intl').FormattedMessage;
 

src/components/join-flow/gender-step.jsx

@@ -2,7 +2,7 @@ const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
-import {Formik} from 'formik';
+const {Formik} = require('formik');
 const {injectIntl} = require('react-intl');
 const FormattedMessage = require('react-intl').FormattedMessage;
 

src/components/join-flow/username-step.jsx

@@ -2,7 +2,7 @@ const bindAll = require('lodash.bindall');
 const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
-import {Formik} from 'formik';
+const {Formik} = require('formik');
 const {injectIntl} = require('react-intl');
 
 const intlShape = require('../../lib/intl-shape');

src/components/join-flow/welcome-step.jsx

@@ -1,7 +1,7 @@
 const bindAll = require('lodash.bindall');
 const React = require('react');
 const PropTypes = require('prop-types');
-import {Formik} from 'formik';
+const {Formik} = require('formik');
 const FormattedMessage = require('react-intl').FormattedMessage;
 const {injectIntl} = require('react-intl');
 

src/components/modal/email-confirmation/modal.jsx

@@ -1,9 +1,10 @@
-import React, {useState} from 'react';
+const React = require('react');
+const {useState} = React;
 const connect = require('react-redux').connect;
-import PropTypes from 'prop-types';
-import {FormattedMessage} from 'react-intl';
+const PropTypes = require('prop-types');
+const {FormattedMessage} = require('react-intl');
 
-import Modal from '../base/modal.jsx';
+const Modal = require('../base/modal.jsx');
 require('./modal.scss');
 
 const EmailConfirmationModal = ({

src/components/modal/mute/feedback-form.jsx

@@ -2,7 +2,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 const classNames = require('classnames');
 
-import {Formik} from 'formik';
+const {Formik} = require('formik');
 const FormikInput = require('../../../components/formik-forms/formik-input.jsx');
 const bindAll = require('lodash.bindall');
 

src/components/world-map/world-map.jsx

@@ -6,7 +6,7 @@ Plotly.register([
 ]);
 
 // create plotly bundle that only has choropleth plots
-import createPlotlyComponent from 'react-plotly.js/factory';
+const createPlotlyComponent = require('react-plotly.js/factory').default;
 const Plot = createPlotlyComponent(Plotly);
 
 const React = require('react');

src/init.js

@@ -1,5 +1,5 @@
 import 'regenerator-runtime/runtime'; // Needed for async/await
-const jar = require('./lib/jar');
+import jar from './lib/jar';
 
 /**
  * -----------------------------------------------------------------------------

src/lib/render.jsx

@@ -8,7 +8,7 @@ const {getLocale, scratchLocaleToIntlLocale} = require('./locales.js');
 const permissionsActions = require('../redux/permissions.js');
 const sessionActions = require('../redux/session.js');
 const configureStore = require('./configure-store.js');
-import intlPolyfill from '../lib/intl-polyfill';
+const intlPolyfill = require('../lib/intl-polyfill.js').default;
 
 require('../main.scss');
 

src/views/annual-report/2020/annual-report.jsx

@@ -1,34 +1,33 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const React = require('react');
-const MediaQuery = require('react-responsive').default;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
+import bindAll from 'lodash.bindall';
+import classNames from 'classnames';
+import React from 'react';
+import MediaQuery from 'react-responsive';
+import {FormattedMessage, injectIntl} from 'react-intl';
 
-const intlShape = require('../../../lib/intl-shape');
-const render = require('../../../lib/render.jsx');
-const frameless = require('../../../lib/frameless');
+import intlShape from '../../../lib/intl-shape';
+import render from '../../../lib/render.jsx';
+import frameless from '../../../lib/frameless';
 
-const Avatar = require('../../../components/avatar/avatar.jsx');
-const Page = require('../../../components/page/www/page.jsx');
-const Grid = require('../../../components/grid/grid.jsx');
-const Button = require('../../../components/forms/button.jsx');
-const FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const Comment = require('../../../components/comment/comment.jsx');
-const CountryBlurb = require('./country-blurb/country-blurb.jsx');
-const TextAndMediaSnippet = require('../../../components/text-and-media-snippet/text-and-media-snippet.jsx');
-const TimelineCard = require('../../../components/timeline-card/timeline-card.jsx');
-const WorldMap = require('../../../components/world-map/world-map.jsx');
-const CountryUsage = require('./country-usage.json');
-const IndiaProjects = require('./india-projects.json');
-const PeopleGrid = require('../../../components/people-grid/people-grid.jsx');
-const People = require('./people.json');
-const VideoPreview = require('../../../components/video-preview/video-preview.jsx');
-const Supporters = require('./supporters.json');
+import Avatar from '../../../components/avatar/avatar.jsx';
+import Page from '../../../components/page/www/page.jsx';
+import Grid from '../../../components/grid/grid.jsx';
+import Button from '../../../components/forms/button.jsx';
+import FlexRow from '../../../components/flex-row/flex-row.jsx';
+import Comment from '../../../components/comment/comment.jsx';
+import CountryBlurb from './country-blurb/country-blurb.jsx';
+import TextAndMediaSnippet from '../../../components/text-and-media-snippet/text-and-media-snippet.jsx';
+import TimelineCard from '../../../components/timeline-card/timeline-card.jsx';
+import WorldMap from '../../../components/world-map/world-map.jsx';
+import CountryUsage from './country-usage.json';
+import IndiaProjects from './india-projects.json';
+import PeopleGrid from '../../../components/people-grid/people-grid.jsx';
+import People from './people.json';
+import VideoPreview from '../../../components/video-preview/video-preview.jsx';
+import Supporters from './supporters.json';
 import {TwitterTweetEmbed} from 'react-twitter-embed';
 
 
-require('./annual-report.scss');
+import './annual-report.scss';
 
 // Founder’s Message / Mission / Reach / Themes / Director’s Message / Supporters / Team / Donate
 

src/views/annual-report/2021/annual-report.jsx

@@ -1,31 +1,30 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const React = require('react');
-const MediaQuery = require('react-responsive').default;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
+import bindAll from 'lodash.bindall';
+import classNames from 'classnames';
+import React from 'react';
+import MediaQuery from 'react-responsive';
+import {FormattedMessage, injectIntl} from 'react-intl';
 
-const intlShape = require('../../../lib/intl-shape');
-const render = require('../../../lib/render.jsx');
-const frameless = require('../../../lib/frameless');
+import intlShape from '../../../lib/intl-shape';
+import render from '../../../lib/render.jsx';
+import frameless from '../../../lib/frameless';
 
-const Avatar = require('../../../components/avatar/avatar.jsx');
-const Page = require('../../../components/page/www/page.jsx');
-const Button = require('../../../components/forms/button.jsx');
-const FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const TextAndMediaSnippet = require('../../../components/text-and-media-snippet/text-and-media-snippet.jsx');
-const TimelineCard = require('../../../components/timeline-card/timeline-card.jsx');
-const PeopleGrid = require('../../../components/people-grid/people-grid.jsx');
-const People = require('./people.json');
-const Tag = require('../../../components/tag/tag.jsx');
-const VideoPreview = require('../../../components/video-preview/video-preview.jsx');
-const VideoPreviewYouTube = require('./video-preview-youtube/video-preview-youtube.jsx');
-const Supporters = require('./supporters.json');
+import Avatar from '../../../components/avatar/avatar.jsx';
+import Page from '../../../components/page/www/page.jsx';
+import Button from '../../../components/forms/button.jsx';
+import FlexRow from '../../../components/flex-row/flex-row.jsx';
+import TextAndMediaSnippet from '../../../components/text-and-media-snippet/text-and-media-snippet.jsx';
+import TimelineCard from '../../../components/timeline-card/timeline-card.jsx';
+import PeopleGrid from '../../../components/people-grid/people-grid.jsx';
+import People from './people.json';
+import Tag from '../../../components/tag/tag.jsx';
+import VideoPreview from '../../../components/video-preview/video-preview.jsx';
+import VideoPreviewYouTube from './video-preview-youtube/video-preview-youtube.jsx';
+import Supporters from './supporters.json';
 import {TwitterTweetEmbed} from 'react-twitter-embed';
-const Organizations = require('./orgs.json');
+import Organizations from './orgs.json';
 
 
-require('./annual-report.scss');
+import './annual-report.scss';
 
 // Director’s Message / Mission / Reach / Themes / Founder's Message / Supporters / Team / Donate
 

src/views/become-a-scratcher/become-a-scratcher.jsx

@@ -15,7 +15,7 @@ import Modal from '../../components/modal/base/modal.jsx';
 import NotAvailable from '../../components/not-available/not-available.jsx';
 import WarningBanner from '../../components/title-banner/warning-banner.jsx';
 
-require('./become-a-scratcher.scss');
+import './become-a-scratcher.scss';
 
 const communityGuidelines = [
     {

src/views/download/scratch-link/download.jsx

@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {FormattedMessage, injectIntl} from 'react-intl';
 
 import Page from '../../../components/page/www/page.jsx';
-const intlShape = require('../../../lib/intl-shape');
+import intlShape from '../../../lib/intl-shape';
 import render from '../../../lib/render.jsx';
 
 import FlexRow from '../../../components/flex-row/flex-row.jsx';

src/views/preview/project-view.jsx

@@ -27,7 +27,7 @@ const NotAvailable = require('../../components/not-available/not-available.jsx')
 const Meta = require('./meta.jsx');
 
 const sessionActions = require('../../redux/session.js');
-import {selectProjectCommentsGloballyEnabled, selectIsTotallyNormal} from '../../redux/session';
+const {selectProjectCommentsGloballyEnabled, selectIsTotallyNormal} = require('../../redux/session');
 const navigationActions = require('../../redux/navigation.js');
 const previewActions = require('../../redux/preview.js');
 const projectCommentActions = require('../../redux/project-comment-actions.js');

src/views/preview/subactions.jsx

@@ -12,8 +12,8 @@ const {connect} = require('react-redux');
 const {useState} = require('react');
 const projectShape = require('./projectshape.jsx').projectShape;
 
-import {selectIsMuted} from '../../redux/session.js';
-import StudioMuteEditMessage from '../studio/studio-mute-edit-message.jsx';
+const {selectIsMuted} = require('../../redux/session.js');
+const StudioMuteEditMessage = require('../studio/studio-mute-edit-message.jsx').default;
 
 require('./subactions.scss');
 

src/views/search/search.jsx

@@ -1,29 +1,28 @@
-const bindAll = require('lodash.bindall');
-const connect = require('react-redux').connect;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const PropTypes = require('prop-types');
-const React = require('react');
+import bindAll from 'lodash.bindall';
+import {connect} from 'react-redux';
+import {FormattedMessage, injectIntl} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const api = require('../../lib/api');
-const intlShape = require('../../lib/intl-shape');
-const {getLocale} = require('../../lib/locales.js');
-const Button = require('../../components/forms/button.jsx');
-const Form = require('../../components/forms/form.jsx');
-const Grid = require('../../components/grid/grid.jsx');
-const navigationActions = require('../../redux/navigation.js');
-const Select = require('../../components/forms/select.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
-const Tabs = require('../../components/tabs/tabs.jsx');
+import api from '../../lib/api';
+import intlShape from '../../lib/intl-shape';
+import {getLocale} from '../../lib/locales.js';
+import Button from '../../components/forms/button.jsx';
+import Form from '../../components/forms/form.jsx';
+import Grid from '../../components/grid/grid.jsx';
+import navigationActions from '../../redux/navigation.js';
+import Select from '../../components/forms/select.jsx';
+import TitleBanner from '../../components/title-banner/title-banner.jsx';
+import Tabs from '../../components/tabs/tabs.jsx';
 
 import {selectIsTotallyNormal} from '../../redux/session';
 
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+import Page from '../../components/page/www/page.jsx';
+import render from '../../lib/render.jsx';
 
 const ACCEPTABLE_MODES = ['trending', 'popular'];
 
-require('./search.scss');
+import './search.scss';
 
 class Search extends React.Component {
     constructor (props) {

src/views/studentregistration/studentregistration.jsx

@@ -1,21 +1,21 @@
-const bindAll = require('lodash.bindall');
-const defaults = require('lodash.defaultsdeep');
-const PropTypes = require('prop-types');
-const React = require('react');
-const injectIntl = require('react-intl').injectIntl;
+import bindAll from 'lodash.bindall';
+import defaultsDeep from 'lodash.defaultsdeep';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {injectIntl} from 'react-intl';
 
-const api = require('../../lib/api');
-const intlShape = require('../../lib/intl-shape');
-const route = require('../../lib/route');
+import api from '../../lib/api';
+import intlShape from '../../lib/intl-shape';
+import route from '../../lib/route';
 
-const Deck = require('../../components/deck/deck.jsx');
-const Progression = require('../../components/progression/progression.jsx');
-const Steps = require('../../components/registration/steps.jsx');
+import Deck from '../../components/deck/deck.jsx';
+import Progression from '../../components/progression/progression.jsx';
+import Steps from '../../components/registration/steps.jsx';
 import StudentRegistrationMeta from './student-registration-meta.jsx';
 
-const render = require('../../lib/render.jsx');
+import render from '../../lib/render.jsx';
 
-require('./studentregistration.scss');
+import './studentregistration.scss';
 
 class StudentRegistration extends React.Component {
     constructor (props) {
@@ -59,7 +59,7 @@ class StudentRegistration extends React.Component {
         this.setState({
             waiting: true
         });
-        formData = defaults({}, formData || {}, this.state.formData);
+        formData = defaultsDeep({}, formData || {}, this.state.formData);
         api({
             host: '',
             uri: '/classes/register_new_student/',
@@ -97,7 +97,7 @@ class StudentRegistration extends React.Component {
         formData = formData || {};
         this.setState({
             step: this.state.step + 1,
-            formData: defaults({}, formData, this.state.formData)
+            formData: defaultsDeep({}, formData, this.state.formData)
         });
     }
     handleGoToClass () {

src/views/studio/modals/transfer-host-confirmation.jsx

@@ -1,8 +1,7 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {FormattedMessage} from 'react-intl';
-const {injectIntl} = require('react-intl');
+import {FormattedMessage, injectIntl} from 'react-intl';
 
 import intlShape from '../../../lib/intl-shape.js';
 import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx';

src/views/studio/studio-redux.js

@@ -6,10 +6,10 @@ import {
     userProjects
 } from './lib/redux-modules';
 
-const {getInitialState, studioReducer} = require('../../redux/studio');
-const {studioReportReducer} = require('../../redux/studio-report');
-const {commentsReducer} = require('../../redux/comments');
-const {studioMutationsReducer} = require('../../redux/studio-mutations');
+import {getInitialState, studioReducer} from '../../redux/studio';
+import {studioReportReducer} from '../../redux/studio-report';
+import {commentsReducer} from '../../redux/comments';
+import {studioMutationsReducer} from '../../redux/studio-mutations';
 
 
 const reducers = {

src/views/terms/terms.jsx

@@ -1,9 +1,9 @@
-const React = require('react');
+import React from 'react';
 
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+import Page from '../../components/page/www/page.jsx';
+import render from '../../lib/render.jsx';
 
-const InformationPage = require('../../components/informationpage/informationpage.jsx');
+import InformationPage from '../../components/informationpage/informationpage.jsx';
 
 const Terms = () => (
     <InformationPage title={'Scratch Terms of Use'}>