Bump/nodejs v18

.circleci/config.yml

@@ -7,7 +7,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image:  cimg/node:16.18
+      - image: cimg/node:18.18.1
     working_directory: ~/repo
     steps:
       - checkout
@@ -24,13 +24,13 @@ jobs:
             - ~/.cache/yarn
           key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
       # run tests
-      - run: 
+      - run:
           name: Run Unit Tests
-          command: yarn test -- --silent --updateSnapshot  --no-watchman --maxWorkers=50% --testPathPattern="/Board|Communicator|App|Settings|Account|UI/"
+          command: yarn test --silent --updateSnapshot --runInBand --no-watchman --testPathPattern="/Board|Communicator|App|Settings|Account|UI/"
   image:
     docker:
       # specify the version you desire here
-      - image:  cimg/node:16.18
+      - image: cimg/node:18.18.1
     working_directory: ~/repo
     steps:
       - checkout
@@ -52,7 +52,7 @@ jobs:
           version: 19.03.13
           docker_layer_caching: false # (3)
       # build and push Docker image
-      - run: 
+      - run:
           name: Build Docker Image
           command: |
             TAG=0.1.$CIRCLE_BUILD_NUM

.nvmrc

@@ -1 +1 @@
-v16
+v18.18

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1 - the build process
-FROM node:16-alpine as build-deps
+FROM node:18.18.1 as build-deps
 WORKDIR /usr/src/app
 COPY package.json yarn.lock ./
 RUN yarn install

craco.config.js

@@ -0,0 +1,35 @@
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    entry: './src/index.js',
+    alias: {
+      'react/jsx-dev-runtime': path.resolve(
+        __dirname,
+        'node_modules/react/jsx-dev-runtime.js'
+      ),
+      'react/jsx-runtime': path.resolve(
+        __dirname,
+        'node_modules/react/jsx-runtime.js'
+      )
+    },
+    plugins: [new NodePolyfillPlugin({ excludeAliases: ['console'] })],
+    resolve: {
+      extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx']
+    },
+    configure: {
+      ignoreWarnings: [
+        function ignoreSourcemapsloaderWarnings(warning) {
+          return (
+            warning.module?.resource.includes('node_modules') &&
+            warning.details?.includes('source-map-loader')
+          );
+        }
+      ]
+    }
+  },
+  babel: {
+    plugins: ['babel-plugin-transform-import-meta']
+  }
+};

package.json

@@ -51,7 +51,7 @@
     "keycode": "^2.2.1",
     "lodash": "^4.17.21",
     "mathjs": "7.6.0",
-    "microsoft-cognitiveservices-speech-sdk": "^1.32.0",
+    "microsoft-cognitiveservices-speech-sdk": "^1.33.1",
     "mime-types": "^2.1.35",
     "moment": "2.29.4",
     "mongoose": "^6.12.3",
@@ -90,6 +90,9 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "babel-plugin-transform-import-meta": "^2.2.1",
+    "@craco/craco": "^7.1.0",
     "@types/mime-types": "^2.1.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
     "decompress-zip": "^0.3.1",
@@ -99,12 +102,14 @@
     "husky": "^1.1.4",
     "jest-mock-axios": "^3.2.0",
     "lint-staged": "^10.0.3",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "prettier": "1.15.3",
     "react-app-rewired": "^2.1.3",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "5.0.1",
     "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",
     "sw-precache": "^5.2.1",
+    "ts-loader": "^9.5.0",
     "typescript": "^4.6.4"
   },
   "husky": {
@@ -120,7 +125,7 @@
   },
   "jest": {
     "transformIgnorePatterns": [
-      "node_modules/(?!idb)"
+      "node_modules/(?!idb|microsoft-cognitiveservices-speech-sdk)"
     ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js"
@@ -143,19 +148,19 @@
   },
   "scripts": {
     "analyze": "source-map-explorer build/static/js/**/*.js",
-    "start": "react-scripts start",
-    "build": "react-scripts build && sw-precache --config=sw-precache-config.js",
+    "start": "craco start",
+    "build": "craco build && sw-precache --config=sw-precache-config.js",
     "build-cordova-debug": "react-app-rewired build",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d build",
-    "test": "react-scripts test",
+    "test": "craco test",
     "decrypt:local": "./scripts/decrypt-private.sh local",
     "encrypt:local": "./scripts/encrypt-private.sh local",
     "decrypt:prod": "./scripts/decrypt-private.sh prod",
     "encrypt:prod": "./scripts/encrypt-private.sh prod",
     "translations:pull": "CBOARD_ENV=local node ./scripts/crowdin-fetch-latest.js",
     "translations:push": "CBOARD_ENV=local node ./scripts/crowdin-push-changes.js",
-    "eject": "react-scripts eject"
+    "eject": "craco eject"
   },
   "funding": {
     "type": "opencollective",

src/components/Board/Output/SymbolOutput/ClearButton/__snapshots__/ClearButton.test.js.snap

@@ -2,13 +2,13 @@
 
 exports[`ClearButton tests default renderer 1`] = `
 <Unknown>
-  <ForwardRef(WithStyles(ForwardRef(IconButton)))
+  <WithStyles(ForwardRef(IconButton))
     aria-label="Clear"
     className="Output__button__sm"
   >
-    <UNDEFINED
+    <Memo
       className="Output__icon__sm"
     />
-  </ForwardRef(WithStyles(ForwardRef(IconButton)))>
+  </WithStyles(ForwardRef(IconButton))>
 </Unknown>
 `;

src/components/Communicator/CommunicatorDialog/__snapshots__/CommunicatorDialogButtons.test.js.snap

@@ -11,7 +11,7 @@ exports[`CommunicatorDialogButtons tests default renderer 1`] = `
       id="communicator-dialog-buttons-search-button"
       label="cboard.components.CommunicatorDialog.search"
     >
-      <UNDEFINED />
+      <Memo />
     </IconButton>
   </div>
   <div
@@ -22,24 +22,24 @@ exports[`CommunicatorDialogButtons tests default renderer 1`] = `
       label="cboard.components.CommunicatorDialog.menu"
       onClick={[Function]}
     >
-      <UNDEFINED />
+      <Memo />
     </IconButton>
-    <ForwardRef(WithStyles(ForwardRef(Menu)))
+    <WithStyles(ForwardRef(Menu))
       anchorEl={null}
       id="communicator-dialog-buttons-menu"
       onClose={[Function]}
       open={false}
     >
-      <ForwardRef(WithStyles(ForwardRef(MenuItem)))>
-        <ForwardRef(Link)
+      <WithStyles(ForwardRef(MenuItem))>
+        <Link
           to="/settings/help"
         >
           <FormattedMessage
             values={Object {}}
           />
-        </ForwardRef(Link)>
-      </ForwardRef(WithStyles(ForwardRef(MenuItem)))>
-      <ForwardRef(WithStyles(ForwardRef(MenuItem)))>
+        </Link>
+      </WithStyles(ForwardRef(MenuItem))>
+      <WithStyles(ForwardRef(MenuItem))>
         <a
           href="https://www.cboard.io/terms-of-use/"
           rel="noopener noreferrer"
@@ -49,8 +49,8 @@ exports[`CommunicatorDialogButtons tests default renderer 1`] = `
             values={Object {}}
           />
         </a>
-      </ForwardRef(WithStyles(ForwardRef(MenuItem)))>
-    </ForwardRef(WithStyles(ForwardRef(Menu)))>
+      </WithStyles(ForwardRef(MenuItem))>
+    </WithStyles(ForwardRef(Menu))>
   </div>
 </div>
 `;

src/components/Communicator/CommunicatorToolbar/__snapshots__/CommunicatorToolbar.test.js.snap

@@ -4,57 +4,57 @@ exports[`Communicator tests default renderer 1`] = `
 <div
   className="CommunicatorToolbar"
 >
-  <ForwardRef(WithStyles(ForwardRef(Button)))
+  <WithStyles(ForwardRef(Button))
     className="Communicator__title"
     disabled={false}
     id="boards-button"
     onClick={[Function]}
   >
-    <UNDEFINED />
+    <Memo />
     <FormattedMessage
       defaultMessage="Boards"
       id="cboard.components.CommunicatorToolbar.boards"
       values={Object {}}
     />
-  </ForwardRef(WithStyles(ForwardRef(Button)))>
-  <ForwardRef(WithStyles(ForwardRef(Menu)))
+  </WithStyles(ForwardRef(Button))>
+  <WithStyles(ForwardRef(Menu))
     anchorEl={null}
     className="CommunicatorToolbar__menu"
     id="boards-menu"
     onClose={[Function]}
     open={false}
   >
-    <ForwardRef(WithStyles(ForwardRef(ListItem)))
+    <WithStyles(ForwardRef(ListItem))
       className="CommunicatorToolbar__menuitem"
       onClick={[Function]}
     >
-      <ForwardRef(WithStyles(ForwardRef(ListItemAvatar)))>
-        <ForwardRef(WithStyles(ForwardRef(Avatar)))>
-          <UNDEFINED />
-        </ForwardRef(WithStyles(ForwardRef(Avatar)))>
-      </ForwardRef(WithStyles(ForwardRef(ListItemAvatar)))>
-      <ForwardRef(WithStyles(ForwardRef(ListItemText)))
+      <WithStyles(ForwardRef(ListItemAvatar))>
+        <WithStyles(ForwardRef(Avatar))>
+          <Memo />
+        </WithStyles(ForwardRef(Avatar))>
+      </WithStyles(ForwardRef(ListItemAvatar))>
+      <WithStyles(ForwardRef(ListItemText))
         inset={true}
         primary="board-1-name-key"
         secondary="cboard.components.CommunicatorToolbar.tiles"
       />
-    </ForwardRef(WithStyles(ForwardRef(ListItem)))>
-    <ForwardRef(WithStyles(ForwardRef(ListItem)))
+    </WithStyles(ForwardRef(ListItem))>
+    <WithStyles(ForwardRef(ListItem))
       className="CommunicatorToolbar__menuitem"
       onClick={[Function]}
     >
-      <ForwardRef(WithStyles(ForwardRef(ListItemAvatar)))>
-        <ForwardRef(WithStyles(ForwardRef(Avatar)))>
-          <UNDEFINED />
-        </ForwardRef(WithStyles(ForwardRef(Avatar)))>
-      </ForwardRef(WithStyles(ForwardRef(ListItemAvatar)))>
-      <ForwardRef(WithStyles(ForwardRef(ListItemText)))
+      <WithStyles(ForwardRef(ListItemAvatar))>
+        <WithStyles(ForwardRef(Avatar))>
+          <Memo />
+        </WithStyles(ForwardRef(Avatar))>
+      </WithStyles(ForwardRef(ListItemAvatar))>
+      <WithStyles(ForwardRef(ListItemText))
         inset={true}
         primary="board-2-name"
         secondary="cboard.components.CommunicatorToolbar.tiles"
       />
-    </ForwardRef(WithStyles(ForwardRef(ListItem)))>
-  </ForwardRef(WithStyles(ForwardRef(Menu)))>
+    </WithStyles(ForwardRef(ListItem))>
+  </WithStyles(ForwardRef(Menu))>
   <WithWidth(WithMobileDialog)
     onClose={[Function]}
     onSubmit={[Function]}
@@ -67,7 +67,7 @@ exports[`Communicator tests default renderer 1`] = `
       />
     }
   >
-    <ForwardRef(WithStyles(ForwardRef(TextField)))
+    <WithStyles(ForwardRef(TextField))
       autoFocus={true}
       fullWidth={true}
       label={
@@ -87,16 +87,16 @@ exports[`Communicator tests default renderer 1`] = `
   <div
     className="CommunicatorToolbar__group CommunicatorToolbar__group--start"
   >
-    <ForwardRef(WithStyles(ForwardRef(Button)))
+    <WithStyles(ForwardRef(Button))
       className="edit__communicator"
       disabled={false}
       onClick={[Function]}
     >
-      <UNDEFINED
+      <Memo
         className="CommunicatorToolbar__group CommunicatorToolbar__group--start--button"
       />
       cboard.components.CommunicatorToolbar.editCommunicator
-    </ForwardRef(WithStyles(ForwardRef(Button)))>
+    </WithStyles(ForwardRef(Button))>
   </div>
   <div
     className="CommunicatorToolbar__group CommunicatorToolbar__group--end"

src/components/Notifications/__tests__/__snapshots__/Notifications.component.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Notifications tests default renderer 1`] = `
-<ForwardRef(WithStyles(ForwardRef(Snackbar)))
+<WithStyles(ForwardRef(Snackbar))
   ContentProps={
     Object {
       "aria-describedby": "message-id",