fix(api, client): update Gatsby, webpack & related things (#41452)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/Donation/DonateForm.js

@@ -24,7 +24,7 @@ import {
   donationUrls,
   modalDefaultDonation
 } from '../../../../config/donation-settings';
-import { stripePublicKey, deploymentEnv } from '../../../../config/env.json';
+import envData from '../../../../config/env.json';
 import { stripeScriptLoader } from '../../utils/scriptLoaders';
 import Spacer from '../helpers/Spacer';
 import PaypalButton from './PaypalButton';
@@ -44,6 +44,8 @@ import {
 
 import './Donation.css';
 
+const { stripePublicKey, deploymentEnv } = envData;
+
 const numToCommas = num =>
   num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
 

client/src/components/Donation/PaypalButton.js

@@ -7,13 +7,14 @@ import { createSelector } from 'reselect';
 import PayPalButtonScriptLoader from './PayPalButtonScriptLoader';
 import { withTranslation } from 'react-i18next';
 
-import { paypalClientId, deploymentEnv } from '../../../../config/env.json';
+import envData from '../../../../config/env.json';
 import {
   paypalConfigurator,
   paypalConfigTypes
 } from '../../../../config/donation-settings';
 import { signInLoadingSelector, userSelector } from '../../redux';
 
+const { paypalClientId, deploymentEnv } = envData;
 export class PaypalButton extends Component {
   constructor(props) {
     super(props);

client/src/components/Header/Header.test.js

@@ -6,7 +6,9 @@ import { UniversalNav } from './components/UniversalNav';
 import { NavLinks } from './components/NavLinks';
 import AuthOrProfile from './components/AuthOrProfile';
 
-import { apiLocation, clientLocale } from '../../../../config/env.json';
+import envData from '../../../../config/env.json';
+
+const { apiLocation, clientLocale } = envData;
 
 describe('<UniversalNav />', () => {
   const UniversalNavProps = {

client/src/components/Header/components/Login.js

@@ -6,10 +6,12 @@ import { Button } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import { isSignedInSelector } from '../../../redux';
-import { apiLocation, homeLocation } from '../../../../../config/env.json';
+import envData from '../../../../../config/env.json';
 
 import './login.css';
 
+const { apiLocation, homeLocation } = envData;
+
 const mapStateToProps = createSelector(isSignedInSelector, isSignedIn => ({
   isSignedIn
 }));

client/src/components/Header/components/NavLinks.js

@@ -12,14 +12,12 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { Link } from '../../helpers';
 import { updateUserFlag } from '../../../redux/settings';
-import {
-  clientLocale,
-  radioLocation,
-  apiLocation
-} from '../../../../../config/env.json';
+import envData from '../../../../../config/env.json';
 import createLanguageRedirect from '../../createLanguageRedirect';
 import createExternalRedirect from '../../createExternalRedirects';
 
+const { clientLocale, radioLocation, apiLocation } = envData;
+
 const {
   availableLangs,
   i18nextCodes,

client/src/components/Intro/components/IntroDescription.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Link, Spacer } from '../../helpers';
-import { forumLocation } from '../../../../../config/env.json';
+import envData from '../../../../../config/env.json';
 import { Trans, useTranslation } from 'react-i18next';
 
 import '../intro.css';
 
+const { forumLocation } = envData;
 function IntroDescription() {
   const { t } = useTranslation();
 

client/src/components/Map/index.js

@@ -8,7 +8,9 @@ import { Link, Spacer } from '../helpers';
 import LinkButton from '../../assets/icons/LinkButton';
 import './map.css';
 import { isAuditedCert } from '../../../../utils/is-audited';
-import { curriculumLocale } from '../../../../config/env.json';
+import envData from '../../../../config/env.json';
+
+const { curriculumLocale } = envData;
 
 const propTypes = {
   currentSuperBlock: PropTypes.string,

client/src/components/createExternalRedirects.js

@@ -1,4 +1,6 @@
-import { forumLocation } from '../../../config/env.json';
+import envData from '../../../config/env.json';
+
+const { forumLocation } = envData;
 
 const createExternalRedirect = (page, { clientLocale }) => {
   const isNotEnglish = clientLocale !== 'english';

client/src/components/helpers/CurrentChallengeLink.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { apiLocation } from '../../../../config/env.json';
+import envData from '../../../../config/env.json';
+
+const { apiLocation } = envData;
 
 const currentChallengeApi = '/challenges/current-challenge';
 

client/src/components/helpers/skeletonStyles.js

@@ -1,4 +1,4 @@
-export default `
+const styles = `
 
 .sprite-container {
   height: 100%;
@@ -71,3 +71,5 @@ export default `
   animation-direction: normal;
 }
 `;
+
+export default styles;

client/src/components/landing/Landing.test.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 
-import { IndexPage } from '../../pages';
+import IndexPage from '../../pages';
 import mockChallengeNodes from '../../__mocks__/challenge-nodes';
 
 describe('<Landing />', () => {

client/src/components/profile/Profile.js

@@ -11,7 +11,9 @@ import HeatMap from './components/HeatMap';
 import Certifications from './components/Certifications';
 import Portfolio from './components/Portfolio';
 import Timeline from './components/TimeLine';
-import { apiLocation } from '../../../../config/env.json';
+import envData from '../../../../config/env.json';
+
+const { apiLocation } = envData;
 
 const propTypes = {
   isSessionUser: PropTypes.bool,

client/src/components/profile/components/Camper.js

@@ -16,8 +16,9 @@ import Link from '../../helpers/Link';
 import './camper.css';
 
 import { langCodes } from '../../../../../config/i18n/all-langs';
-import { clientLocale } from '../../../../../config/env.json';
+import envData from '../../../../../config/env.json';
 
+const { clientLocale } = envData;
 const localeCode = langCodes[clientLocale];
 
 const propTypes = {

client/src/components/profile/components/HeatMap.js

@@ -16,7 +16,9 @@ import '@freecodecamp/react-calendar-heatmap/dist/styles.css';
 import './heatmap.css';
 
 import { langCodes } from '../../../../../config/i18n/all-langs';
-import { clientLocale } from '../../../../../config/env.json';
+import envData from '../../../../../config/env.json';
+
+const { clientLocale } = envData;
 
 const localeCode = langCodes[clientLocale];
 

client/src/components/profile/components/TimeLine.js

@@ -25,7 +25,9 @@ import { maybeUrlRE } from '../../../utils';
 import CertificationIcon from '../../../assets/icons/CertificationIcon';
 
 import { langCodes } from '../../../../../config/i18n/all-langs';
-import { clientLocale } from '../../../../../config/env.json';
+import envData from '../../../../../config/env.json';
+
+const { clientLocale } = envData;
 
 const localeCode = langCodes[clientLocale];
 

client/src/components/search/WithInstantSearch.js

@@ -15,10 +15,12 @@ import {
   toggleSearchDropdown,
   updateSearchQuery
 } from './redux';
-import { algoliaAppId, algoliaAPIKey } from '../../../../config/env.json';
+import envData from '../../../../config/env.json';
 
 import { createSelector } from 'reselect';
 
+const { algoliaAppId, algoliaAPIKey } = envData;
+
 const DEBOUNCE_TIME = 100;
 
 // If a key is missing, searches will fail, but the client will still render.