Fix more React warnings

We can't do react-scripts v5 because Webpack v5 is creating issues. Going just to v4 for now.

TODO:
- [ ] Easy: fix warnings
- [ ] Maybe update React to latest v16 to see if fast refresh works or even v17. See https://github.com/4ian/GDevelop/pull/2316

newIDE/app/package.json

@@ -11,7 +11,7 @@
     "@storybook/react": "6.3.12",
     "axios-mock-adapter": "^1.19.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-loader": "8.0.6",
+    "babel-loader": "8.1.0",
     "flow-bin": "0.131.0",
     "flow-coverage-report": "^0.4.0",
     "folder-hash": "^3.0.0",
@@ -19,7 +19,8 @@
     "iso-639-1": "^2.0.3",
     "minimist": "1.2.5",
     "prettier": "1.15.3",
-    "react-scripts": "3.4.0",
+    "react-error-overlay": "^6.0.9",
+    "react-scripts": "4.0.3",
     "recursive-copy": "^2.0.10",
     "recursive-readdir": "^2.2.2",
     "shelljs": "0.8.4",
@@ -27,7 +28,7 @@
     "style-dictionary": "^2.10.2",
     "typescript": "^4.1.3",
     "unzipper": "^0.9.11",
-    "webpack": "4.41.5",
+    "webpack": "4.44.2",
     "workbox-build": "^4.3.1"
   },
   "dependencies": {
@@ -59,13 +60,13 @@
     "prop-types": "^15.5.10",
     "randomcolor": "^0.5.3",
     "raven-js": "^3.19.1",
-    "react": "16.8.6",
+    "react": "16.14.0",
     "react-color": "2.13.8",
     "react-dnd": "7.7.0",
     "react-dnd-html5-backend": "7.7.0",
     "react-dnd-multi-backend": "3.2.2",
     "react-dnd-touch-backend": "0.8.3",
-    "react-dom": "16.8.6",
+    "react-dom": "16.14.0",
     "react-error-boundary": "^1.2.0",
     "react-json-view": "^1.16.1",
     "react-markdown": "^4.0.6",
@@ -75,7 +76,7 @@
     "react-share": "^4.4.0",
     "react-sortable-hoc": "1.5.0",
     "react-sortable-tree": "2.6.2",
-    "react-test-renderer": "16.8.6",
+    "react-test-renderer": "16.14.0",
     "react-virtualized": "9.21.1",
     "semver": "7.0.0",
     "slugs": "0.1.3",

newIDE/app/package.json.README.md

@@ -1,27 +1,40 @@
 # About GDevelop IDE dependencies (package.json)
 
-GDevelop relies on some dependencies that can have special requirements:
+GDevelop relies on some dependencies that can have special requirements.
 
-- **TypeScript** here is only used to check the types in the `scripts/` files. The IDE uses Flow for static typing. TypeScript is used in the game engine too (see GDJS and Extensions folders).
+## Note on TypeScript
 
-- **Storybook** is depending on webpack and babel.
+**TypeScript** here is only used to check the types in the `scripts/` files. The IDE uses Flow for static typing. TypeScript is used in the game engine too (see GDJS and Extensions folders).
 
-  - It's important to have the same webpack version as the one provided by `react-scripts`, hence why `webpack` is specified in the `devDependencies`.
-  - `babel-loader` is specified to be the exact version required by `react-scripts` (because `react-scripts` wants the exact version and will complain if forced to use the `babel-loader` of Storybook).
+## Storybook
+
+**Storybook** is depending on webpack and babel.
+
+- It's important to have the same webpack version as the one provided by `react-scripts`, hence why `webpack` is specified in the `devDependencies`.
+- `babel-loader` is specified to be the exact version required by `react-scripts` (because `react-scripts` wants the exact version and will complain if forced to use the `babel-loader` of Storybook).
   - **Try removing these extra `devDependencies`** if you upgrade Storybook or Create React App.
 
+## Create React App
+
+We need `"react-error-overlay": "6.0.9"` because of https://github.com/facebook/create-react-app/issues/11773.
+Can be removed if upgrading create-react-app to v5.
+
+## LinguiJS
+
 - `"babel-core": "^7.0.0-bridge.0"` is needed for js-lingui `lingui extract` command (who runs Babel on source files).
 
-- **`react-dnd`** is used by `react-mosaic-component` and `react-sortable-tree` (but not `react-sortable-hoc`). Both must be using **the same versions** of `react-dnd` and `react-dnd-html5-backend`. Otherwise, you get blanks/not rendered components.
+## Drag'n'drop handling
+
+**`react-dnd`** is used by `react-mosaic-component` and `react-sortable-tree` (but not `react-sortable-hoc`). Both must be using **the same versions** of `react-dnd` and `react-dnd-html5-backend`. Otherwise, you get blanks/not rendered components.
 
 > You can check if there is only one version of a package by doing `npm ls` or `yarn why`:
 >
 > - `yarn why react-dnd`
 > - `npm ls webpack`
 
-- Latest versions of `react-sortable-hoc` seems to be breaking the lists. The exact version in which this occurs was not determined.
+Latest versions of `react-sortable-hoc` seems to be breaking the lists. The exact version in which this occurs was not determined.
 
-A few fixes have been applied:
+## Various fixes
 
 - `react-mosaic-component` is a custom version where `react-dnd` was simply upgraded to version `7.7.0`
 - `@lingui/react` is a version where Flow definitions have been fixed.

newIDE/app/src/BehaviorsEditor/BehaviorsEditorService.js

@@ -5,7 +5,7 @@ import Physics2Editor from './Editors/Physics2Editor';
 /**
  * A service returning editor components for each behavior type.
  */
-export default {
+const BehaviorsEditorService = {
   getEditor(behaviorType: string) {
     if (!this.components[behaviorType]) {
       return BehaviorPropertiesEditor; // Default properties editor
@@ -18,3 +18,5 @@ export default {
     },
   },
 };
+
+export default BehaviorsEditorService;

newIDE/app/src/CodeEditor/Theme/GitHub.js

@@ -242,6 +242,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'GitHub',
   themeName: 'github',

newIDE/app/src/CodeEditor/Theme/Monokai.js

@@ -139,6 +139,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'Monokai',
   themeName: 'monokai',

newIDE/app/src/CodeEditor/Theme/NordDark.js

@@ -231,6 +231,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'Nord-Dark',
   themeName: 'nord-dark',

newIDE/app/src/CodeEditor/Theme/OneDark.js

@@ -392,6 +392,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'One-Dark',
   themeName: 'one-dark',

newIDE/app/src/CodeEditor/Theme/SolarizedDark.js

@@ -132,6 +132,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'Solarized-Dark',
   themeName: 'solarized-dark',

newIDE/app/src/CodeEditor/Theme/SolarizedLight.js

@@ -131,6 +131,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'Solarized-Light',
   themeName: 'solarized-light',

newIDE/app/src/CodeEditor/Theme/Tomorrow.js

@@ -176,6 +176,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'Tomorrow',
   themeName: 'tomorrow',

newIDE/app/src/CodeEditor/Theme/TomorrowNight.js

@@ -180,6 +180,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'Tomorrow-Night',
   themeName: 'tomorrow-night',

newIDE/app/src/CodeEditor/Theme/VibrantInk.js

@@ -201,6 +201,7 @@ const themeData = {
   },
 };
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   name: 'Vibrant Ink',
   themeName: 'vibrant-ink',

newIDE/app/src/Debugger/Inspectors/RawContentInspector.js

@@ -15,7 +15,7 @@ type Props = {|
  * A very simple inspector that display the raw information given by the gameData
  * object.
  */
-export default ({ gameData, onEdit }: Props) => (
+const RawContentInspector = ({ gameData, onEdit }: Props) => (
   <React.Fragment>
     <EmptyMessage>
       <Trans>
@@ -35,3 +35,5 @@ export default ({ gameData, onEdit }: Props) => (
     />
   </React.Fragment>
 );
+
+export default RawContentInspector;

newIDE/app/src/Debugger/Inspectors/RuntimeObjectInspector.js

@@ -47,7 +47,7 @@ const handleEdit = (edit, { onCall, onEdit }: Props) => {
   return true;
 };
 
-export default (props: Props) => (
+const RuntimeObjectInspector = (props: Props) => (
   <React.Fragment>
     <Text>
       <Trans>General:</Trans>
@@ -79,3 +79,5 @@ export default (props: Props) => (
     />
   </React.Fragment>
 );
+
+export default RuntimeObjectInspector;

newIDE/app/src/Debugger/Inspectors/VariablesContainerInspector.js

@@ -162,7 +162,7 @@ type Props = {|
   onEdit: EditFunction,
 |};
 
-export default (props: Props) => (
+const VariablesContainerInspector = (props: Props) => (
   <ReactJsonView
     collapsed={false}
     name={false}
@@ -176,3 +176,5 @@ export default (props: Props) => (
     validationMessage="Invalid value"
   />
 );
+
+export default VariablesContainerInspector;

newIDE/app/src/EventsFunctionsExtensionEditor/ChooseEventsFunctionsExtensionEditor.js

@@ -16,7 +16,7 @@ type Props = {|
   onEditExtensionOptions: () => void,
 |};
 
-export default (props: Props) => {
+const ChooseEventsFunctionsExtensionEditor = (props: Props) => {
   const eventsFunctionsCount = props.eventsFunctionsExtension.getEventsFunctionsCount();
   const eventsBasedBehaviorsCount = props.eventsFunctionsExtension
     .getEventsBasedBehaviors()
@@ -57,3 +57,5 @@ export default (props: Props) => {
     </I18n>
   );
 };
+
+export default ChooseEventsFunctionsExtensionEditor;

newIDE/app/src/EventsSheet/EventsTree/EventsRenderingService.js

@@ -9,7 +9,7 @@ import WhileEvent from './Renderers/WhileEvent';
 import LinkEvent from './Renderers/LinkEvent';
 import JsCodeEvent from './Renderers/JsCodeEvent';
 
-export default {
+const EventsRenderingService = {
   components: {
     unknownEvent: UnknownEvent,
     'BuiltinCommonInstructions::Standard': StandardEvent,
@@ -40,3 +40,5 @@ export default {
     this.components[eventType] = renderFunction;
   },
 };
+
+export default EventsRenderingService;

newIDE/app/src/EventsSheet/EventsTree/InstructionsList.js

@@ -147,6 +147,8 @@ export default function InstructionsList({
     );
   });
 
+  // Note: might be worth fixing this warning:
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const instructionsListContext = {
     instrsList,
     isCondition: areConditions,
@@ -158,6 +160,7 @@ export default function InstructionsList({
   ) : (
     <Trans>Add action</Trans>
   );
+
   const longTouchForContextMenuProps = useLongTouch(
     React.useCallback(
       event => {

newIDE/app/src/EventsSheet/EventsTree/InvalidParameterValue.js

@@ -7,9 +7,11 @@ type Props = {| children: React.Node, isEmpty?: boolean |};
 /**
  * Displayed when a parameter is invalid
  */
-export default ({ children, isEmpty }: Props) =>
+const InvalidParameterValue = ({ children, isEmpty }: Props) =>
   isEmpty ? (
     <span className={instructionInvalidParameter}>&lt; {children} &gt;</span>
   ) : (
     <span className={instructionInvalidParameter}>{children}</span>
   );
+
+export default InvalidParameterValue;

newIDE/app/src/EventsSheet/EventsTree/MissingParameterValue.js

@@ -5,4 +5,8 @@ import { instructionMissingParameter } from './ClassNames';
 /**
  * Displayed when a parameter is missing (i.e: empty and not optional)
  */
-export default () => <span className={instructionMissingParameter} />;
+const MissingParameterValue = () => (
+  <span className={instructionMissingParameter} />
+);
+
+export default MissingParameterValue;

newIDE/app/src/EventsSheet/InlineParameterEditor.js

@@ -52,7 +52,8 @@ export default class InlineParameterEditor extends React.Component<
 
   _field: ?any;
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     if (
       (newProps.open && !this.props.open) ||
       newProps.instruction !== this.props.instruction

newIDE/app/src/EventsSheet/InstructionEditor/InstructionOrExpressionSelector/index.js

@@ -85,6 +85,7 @@ export default class InstructionOrExpressionSelector<
   componentDidMount() {
     if (
       this.props.focusOnMount &&
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       useShouldAutofocusSearchbar() &&
       this._searchBar
     ) {

newIDE/app/src/EventsSheet/InstructionEditor/InstructionOrObjectSelector.js

@@ -161,6 +161,7 @@ export default class InstructionOrObjectSelector extends React.PureComponent<
   componentDidMount() {
     if (
       this.props.focusOnMount &&
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       useShouldAutofocusSearchbar() &&
       this._searchBar.current
     ) {

newIDE/app/src/EventsSheet/ParameterFields/GenericExpressionField/BackgroundHighlighting.js

@@ -28,7 +28,7 @@ const highlightedText = {
   borderBottom: '3px solid rgba(244, 67, 54, 0.7)',
 };
 
-export default ({ value, style, highlights }: Props) => {
+const BackgroundHighlighting = ({ value, style, highlights }: Props) => {
   const sortedHighlights = highlights
     .slice()
     .sort((highlight1, highlight2) => highlight1.begin - highlight2.begin);
@@ -63,3 +63,5 @@ export default ({ value, style, highlights }: Props) => {
 
   return <div style={{ ...defaultStyle, ...style }}>{elements}</div>;
 };
+
+export default BackgroundHighlighting;

newIDE/app/src/EventsSheet/ParameterRenderingService.js

@@ -153,7 +153,7 @@ const userFriendlyTypeName: { [string]: MessageDescriptor } = {
   externalLayoutName: t`Name of the external layout`,
 };
 
-export default {
+const ParameterRenderingService = {
   components,
   getParameterComponent: (rawType: string) => {
     const fieldType = gd.ParameterMetadata.isObject(rawType)
@@ -181,3 +181,5 @@ export default {
     return userFriendlyTypeName[fieldType] || null;
   },
 };
+
+export default ParameterRenderingService;

newIDE/app/src/EventsSheet/SearchPanel.js

@@ -112,7 +112,10 @@ const SearchPanel = (
     ]
   );
 
+  // Note: might be worth fixing these warnings:
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(focusSearchField, [currentTab]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(markSearchResultsDirty, [currentTab]);
 
   const launchSearch = () => {

newIDE/app/src/EventsSheet/index.js

@@ -1337,6 +1337,7 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
     } = this.props;
     if (!project) return null;
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const screenType = useScreenType();
 
     return (

newIDE/app/src/Export/Builds/BuildProgressAndActions.js

@@ -80,7 +80,7 @@ type Props = {|
  * Show an estimate of the progress of a build or the button
  * to download the artifacts.
  */
-export default ({
+const BuildProgressAndActions = ({
   build,
   game,
   onGameUpdated,
@@ -261,3 +261,5 @@ export default ({
     </I18n>
   );
 };
+
+export default BuildProgressAndActions;

newIDE/app/src/Export/Builds/BuildStepsProgress.js

@@ -45,7 +45,7 @@ type Props = {|
  * Can be used in an exporter to show the overall progress of a build
  * (including local archiving/upload steps and remote build progress)
  */
-export default ({
+const BuildStepsProgress = ({
   exportStep,
   build,
   stepMaxProgress,
@@ -199,3 +199,5 @@ export default ({
     </Stepper>
   );
 };
+
+export default BuildStepsProgress;

newIDE/app/src/Export/Builds/BuildsList.js

@@ -22,7 +22,7 @@ type Props = {|
   onGameUpdated?: Game => void,
 |};
 
-export default ({
+const BuildsList = ({
   builds,
   authenticatedUser,
   error,
@@ -81,3 +81,5 @@ export default ({
     </Column>
   );
 };
+
+export default BuildsList;

newIDE/app/src/Export/ExportDialog/ExportHomeSeparator.js

@@ -4,7 +4,7 @@ import { Column } from '../../UI/Grid';
 import { useResponsiveWindowWidth } from '../../UI/Reponsive/ResponsiveWindowMeasurer';
 import GDevelopThemeContext from '../../UI/Theme/ThemeContext';
 
-export default () => {
+const ExportHomeSeparator = () => {
   const windowWidth = useResponsiveWindowWidth();
   const theme = React.useContext(GDevelopThemeContext);
   return (
@@ -22,3 +22,5 @@ export default () => {
     )
   );
 };
+
+export default ExportHomeSeparator;

newIDE/app/src/Export/LocalExporters/LocalFileSystem.js

@@ -11,7 +11,7 @@ const gd /* TODO: add flow in this file */ = global.gd;
  * (so that in exported games, paths are slashs, which is
  * supported everywhere).
  */
-export default {
+const LocalFileSystem = {
   mkDir: function(path) {
     try {
       fs.mkdirsSync(path);
@@ -158,3 +158,5 @@ export default {
     return filename;
   },
 };
+
+export default LocalFileSystem;

newIDE/app/src/HelpFinder/index.js

@@ -26,7 +26,8 @@ export default class HelpFinder extends React.PureComponent<Props, State> {
     searchText: '',
   };
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     if (newProps.open && !this.props.open) {
       sendHelpFinderOpened();
     }

newIDE/app/src/InstancesEditor/InstancesList/index.js

@@ -75,11 +75,13 @@ export default class InstancesList extends Component<Props, State> {
   });
 
   componentDidMount() {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     if (useShouldAutofocusSearchbar() && this._searchBar.current)
       this._searchBar.current.focus();
   }
 
-  componentWillMount() {
+  // This should be updated, see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.
+  UNSAFE_componentWillMount() {
     // Functor used to display an instance row
     this.instanceRowRenderer = new gd.InitialInstanceJSFunctor();
     this.instanceRowRenderer.invoke = instancePtr => {

newIDE/app/src/InstancesEditor/index.js

@@ -418,7 +418,8 @@ export default class InstancesEditor extends Component<Props> {
     this.pixiRenderer.destroy();
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (
       nextProps.width !== this.props.width ||
       nextProps.height !== this.props.height

newIDE/app/src/LayersList/BackgroundColorRow.js

@@ -12,7 +12,7 @@ type Props = {|
   onBackgroundColorChanged: () => void,
 |};
 
-export default ({ layout, onBackgroundColorChanged }: Props) => (
+const BackgroundColorRow = ({ layout, onBackgroundColorChanged }: Props) => (
   <I18n>
     {({ i18n }) => (
       <TreeTableRow>
@@ -46,3 +46,5 @@ export default ({ layout, onBackgroundColorChanged }: Props) => (
     )}
   </I18n>
 );
+
+export default BackgroundColorRow;

newIDE/app/src/LayersList/EnumerateLayers.js

@@ -1,9 +1,11 @@
 import { mapFor } from '../Utils/MapFor';
 
-export default layersContainer =>
+const enumerateLayers = layersContainer =>
   mapFor(0, layersContainer.getLayersCount(), i => {
     return {
       value: layersContainer.getLayerAt(i).getName(),
       label: layersContainer.getLayerAt(i).getName() || 'Base layer',
     };
   });
+
+export default enumerateLayers;

newIDE/app/src/LayersList/LayerRemoveDialog.js

@@ -16,7 +16,8 @@ export default class VariablesEditorDialog extends Component {
     };
   }
 
-  componentWillReceiveProps(newProps) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (!this.props.open && newProps.open) {
       this.setState({
         selectedLayer: '',

newIDE/app/src/LayersList/LayerRow.js

@@ -33,7 +33,7 @@ type Props = {|
   width: number,
 |};
 
-export default ({
+const LayerRow = ({
   layerName,
   nameError,
   onBlur,
@@ -148,3 +148,5 @@ export default ({
     )}
   </I18n>
 );
+
+export default LayerRow;

newIDE/app/src/MainFrame/Changelog/ChangelogDialogContainer.js

@@ -3,11 +3,13 @@ import * as React from 'react';
 import ChangelogDialog from './ChangelogDialog';
 import PreferencesContext from '../Preferences/PreferencesContext';
 
-type ContainerProps = {|
+type InnerContainerProps = {|
   defaultOpen: boolean,
 |};
 
-const ChangelogDialogContainer = ({ defaultOpen }: ContainerProps) => {
+const ChangelogDialogInnerContainer = ({
+  defaultOpen,
+}: InnerContainerProps) => {
   const [open, setOpen] = React.useState(defaultOpen);
 
   return <ChangelogDialog open={open} onClose={() => setOpen(false)} />;
@@ -17,12 +19,14 @@ const ChangelogDialogContainer = ({ defaultOpen }: ContainerProps) => {
  * The container showing the ChangelogDialog only if a a new version
  * of GDevelop is detected.
  */
-export default (props: {||}) => (
+const ChangelogDialogContainer = (props: {||}) => (
   <PreferencesContext.Consumer>
     {({ values, verifyIfIsNewVersion }) => (
-      <ChangelogDialogContainer
+      <ChangelogDialogInnerContainer
         defaultOpen={verifyIfIsNewVersion() && values.autoDisplayChangelog}
       />
     )}
   </PreferencesContext.Consumer>
 );
+
+export default ChangelogDialogContainer;

newIDE/app/src/MainFrame/EditorContainers/DebuggerEditorContainer.js

@@ -46,7 +46,8 @@ export class DebuggerEditorContainer extends React.Component<
     // No updates to be done.
   }
 
-  componentWillReceiveProps() {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps() {
     this._checkHasSubscription();
   }
 

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/index.js

@@ -178,11 +178,14 @@ const CollisionMasksEditor = (props: Props) => {
     setSpriteHeight(spriteHeight);
   };
 
+  // Note: might be worth fixing these warnings:
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(updateCollisionMasks, [
     sameCollisionMasksForAnimations,
     sameCollisionMasksForSprites,
   ]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(updateSameCollisionMasksToggles, [animationIndex]);
 
   // Keep panes vertical for small screens, side-by-side for large screens

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/styles.js

@@ -1,4 +1,4 @@
-export default {
+const styles = {
   coordinateColumn: {
     width: 96,
   },
@@ -6,3 +6,5 @@ export default {
     width: 48,
   },
 };
+
+export default styles;

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/DirectionTools.js

@@ -56,7 +56,8 @@ export default class DirectionTools extends Component<Props, State> {
     previewOpen: false,
   };
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     this.setState({
       timeBetweenFrames: formatTime(
         this.props.direction.getTimeBetweenFrames()

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/PointsEditor/index.js

@@ -155,8 +155,11 @@ const PointsEditor = (props: Props) => {
     setSamePointsForSprites(enable);
   };
 
+  // Note: might be worth fixing these warnings:
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(updateSamePointsToggles, [animationIndex]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(updatePoints, [
     samePointsForAnimations,
     samePointsForSprites,

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/PointsEditor/styles.js

@@ -1,5 +1,5 @@
 // @flow
-export default {
+const styles = {
   nameColumn: { width: '40%' },
   coordinateColumn: {
     width: 60,
@@ -9,3 +9,5 @@ export default {
     height: 32,
   },
 };
+
+export default styles;

newIDE/app/src/ObjectEditor/ObjectEditorDialog.js

@@ -288,11 +288,13 @@ export default class ObjectEditorDialog extends Component<Props, State> {
     objectName: '',
   };
 
-  componentWillMount() {
+  // This should be updated, see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.
+  UNSAFE_componentWillMount() {
     this._loadFrom(this.props.object);
   }
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     if (
       (!this.props.open && newProps.open) ||
       (newProps.open && this.props.object !== newProps.object)

newIDE/app/src/ObjectEditor/ObjectsEditorService.js

@@ -11,7 +11,7 @@ const gd /* TODO: add flow in this file */ = global.gd;
 /**
  * A service returning editor components for each object type.
  */
-export default {
+const ObjectsEditorService = {
   getEditorConfiguration(objectType: string) {
     if (!this.editorConfigurations[objectType]) {
       console.warn(
@@ -110,3 +110,5 @@ export default {
     },
   },
 };
+
+export default ObjectsEditorService;

newIDE/app/src/ObjectsRendering/ObjectsRenderingService.js

@@ -31,7 +31,7 @@ const requirableModules = {};
  * A service containing functions that are called to render instances
  * of objects in a PIXI.Container.
  */
-export default {
+const ObjectsRenderingService = {
   renderers: {
     unknownObjectType: RenderedUnknownInstance,
     Sprite: RenderedSpriteInstance,
@@ -205,3 +205,5 @@ export default {
   PIXI, // Expose PIXI so that it can be used by renderers
   RenderedInstance, // Expose the base class for renderers so that it can be used by renderers
 };
+
+export default ObjectsRenderingService;

newIDE/app/src/PlatformSpecificAssetsEditor/PlatformSpecificAssetsDialog.js

@@ -88,7 +88,8 @@ export default class PlatformSpecificAssetsDialog extends React.Component<
     };
   }
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     if (
       (!this.props.open && newProps.open) ||
       (newProps.open && this.props.project !== newProps.project)

newIDE/app/src/Profile/ContributionsDetails.js

@@ -161,7 +161,7 @@ type Props = {|
   userId: string,
 |};
 
-export default ({ userId }: Props) => {
+const ContributionDetails = ({ userId }: Props) => {
   const [
     extensions,
     setExtensions,
@@ -252,3 +252,5 @@ export default ({ userId }: Props) => {
     </>
   );
 };
+
+export default ContributionDetails;

newIDE/app/src/Profile/CreateProfile.js

@@ -15,7 +15,7 @@ type Props = {
   justifyContent?: 'center',
 };
 
-export default ({
+const CreateProfile = ({
   message,
   onLogin,
   onCreateAccount,
@@ -47,3 +47,5 @@ export default ({
     </Line>
   </Column>
 );
+
+export default CreateProfile;

newIDE/app/src/Profile/LimitDisplayer.js

@@ -14,7 +14,11 @@ type Props = {|
   onChangeSubscription: Function,
 |};
 
-export default ({ subscription, limit, onChangeSubscription }: Props) => {
+const LimitDisplayer = ({
+  subscription,
+  limit,
+  onChangeSubscription,
+}: Props) => {
   if (!limit) return <PlaceholderLoader />;
   const hasSubscription = subscription && !!subscription.planId;
   const noSubscription = subscription && !subscription.planId;
@@ -63,3 +67,5 @@ export default ({ subscription, limit, onChangeSubscription }: Props) => {
     </Column>
   );
 };
+
+export default LimitDisplayer;

newIDE/app/src/Profile/PublicProfileProvider.js

@@ -11,7 +11,7 @@ type Props = {|
   children: React.Node,
 |};
 
-export default ({ children }: Props) => {
+const PublicProfileProvider = ({ children }: Props) => {
   const [
     visitedPublicProfileUserId,
     setVisitedPublicProfileUserId,
@@ -52,3 +52,5 @@ export default ({ children }: Props) => {
     </React.Fragment>
   );
 };
+
+export default PublicProfileProvider;

newIDE/app/src/Profile/SubscriptionDetails.js

@@ -12,7 +12,7 @@ type Props = {
   onChangeSubscription: Function,
 };
 
-export default ({ subscription, onChangeSubscription }: Props) =>
+const SubscriptionDetails = ({ subscription, onChangeSubscription }: Props) =>
   subscription ? (
     <Column>
       <Line alignItems="center">
@@ -62,3 +62,5 @@ export default ({ subscription, onChangeSubscription }: Props) =>
   ) : (
     <PlaceholderLoader />
   );
+
+export default SubscriptionDetails;

newIDE/app/src/Profile/SubscriptionDialog.js

@@ -71,7 +71,8 @@ export default class SubscriptionDialog extends React.Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     if (!this.props.open && newProps.open) {
       sendSubscriptionDialogShown();
     }

newIDE/app/src/ProjectManager/index.js

@@ -178,6 +178,7 @@ export default class ProjectManager extends React.Component<Props, State> {
   componentDidUpdate(prevProps: Props) {
     // Typical usage (don't forget to compare props):
     if (!this.props.freezeUpdate && prevProps.freezeUpdate) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       if (useShouldAutofocusSearchbar() && this._searchBar)
         this._searchBar.focus();
     }

newIDE/app/src/ProjectsStorage/GoogleDriveStorageProvider/GoogleDriveFileOrFolderPicker.js

@@ -27,7 +27,7 @@ const styles = {
   },
 };
 
-export default (props: Props) => {
+const GoogleDriveFileOrFolderPicker = (props: Props) => {
   return (
     <div
       style={{
@@ -52,3 +52,5 @@ export default (props: Props) => {
     </div>
   );
 };
+
+export default GoogleDriveFileOrFolderPicker;

newIDE/app/src/ProjectsStorage/GoogleDriveStorageProvider/GoogleDriveSaveAsDialog.js

@@ -27,7 +27,7 @@ type Props = {|
  * A "Save as" dialog for Google Drive, allowing to pick a file to overwrite or a folder
  * and a new filename where to save the game.
  */
-export default (props: Props) => {
+const GoogleDriveSaveAsDialog = (props: Props) => {
   const [selectedFileOrFolder, setSelectedFileOrFolder] = React.useState(
     (null: ?GoogleDriveFileOrFolder)
   );
@@ -155,3 +155,5 @@ export default (props: Props) => {
     </Dialog>
   );
 };
+
+export default GoogleDriveSaveAsDialog;

newIDE/app/src/ProjectsStorage/SaveToStorageProviderDialog.js

@@ -13,7 +13,11 @@ type Props = {|
   onClose: () => void,
 |};
 
-export default ({ onClose, storageProviders, onChooseProvider }: Props) => {
+const SaveToStorageProviderDialog = ({
+  onClose,
+  storageProviders,
+  onChooseProvider,
+}: Props) => {
   return (
     <I18n>
       {({ i18n }) => (
@@ -55,3 +59,5 @@ export default ({ onClose, storageProviders, onChooseProvider }: Props) => {
     </I18n>
   );
 };
+
+export default SaveToStorageProviderDialog;

newIDE/app/src/PropertiesEditor/PropertiesMapToSchema.js

@@ -11,7 +11,7 @@ import { type Field } from '.';
  * @param {*} getProperties The function called to read again the properties
  * @param {*} onUpdateProperty The function called to update a property of an object
  */
-export default (
+const propertiesMapToSchema = (
   properties: gdMapStringPropertyDescriptor,
   getProperties: (instance: Instance) => any,
   onUpdateProperty: (
@@ -241,3 +241,5 @@ export default (
     children: fieldsByGroups.get(groupName) || [],
   }));
 };
+
+export default propertiesMapToSchema;

newIDE/app/src/ResourcesList/ResourcePreview/GenericIconPreview.js

@@ -29,9 +29,11 @@ type Props = {|
 /**
  * Display a generic container to display an icon.
  */
-export default ({ renderIcon }: Props) => (
+const GenericIconPreview = ({ renderIcon }: Props) => (
   <div style={styles.previewContainer}>
     <CheckeredBackground />
     <div style={styles.iconContainer}>{renderIcon({ style: styles.icon })}</div>
   </div>
 );
+
+export default GenericIconPreview;

newIDE/app/src/ResourcesList/ResourcePreview/index.js

@@ -27,7 +27,8 @@ type State = {|
 export default class ResourcePreview extends React.PureComponent<Props, State> {
   state = this._loadFrom(this.props);
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     if (
       newProps.resourceName !== this.props.resourceName ||
       newProps.project !== this.props.project ||

newIDE/app/src/ResourcesList/ResourceSelector.js

@@ -70,7 +70,8 @@ export default class ResourceSelector extends React.Component<Props, State> {
     if (this._autoComplete) this._autoComplete.focus(selectAll);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (nextProps.initialResourceName !== this.props.initialResourceName) {
       this.setState({
         resourceName: nextProps.initialResourceName || '',

newIDE/app/src/ResourcesList/ResourceThumbnail/index.js

@@ -29,7 +29,8 @@ export default class ResourceThumbnail extends React.Component<Props, State> {
     this.state = this._loadFrom(props);
   }
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     if (
       newProps.resourceName !== this.props.resourceName ||
       newProps.project !== this.props.project

newIDE/app/src/SceneEditor/ScenePropertiesDialog.js

@@ -56,7 +56,8 @@ export default class ScenePropertiesDialog extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(newProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     if (
       (!this.props.open && newProps.open) ||
       (newProps.open && this.props.layout !== newProps.layout)

newIDE/app/src/SceneEditor/SceneVariablesDialog.js

@@ -14,7 +14,7 @@ type Props = {|
   hotReloadPreviewButtonProps: HotReloadPreviewButtonProps,
 |};
 
-export default (props: Props) => {
+const SceneVariablesDialog = (props: Props) => {
   return (
     <VariablesEditorDialog
       open={props.open}
@@ -38,3 +38,5 @@ export default (props: Props) => {
     />
   );
 };
+
+export default SceneVariablesDialog;

newIDE/app/src/SceneEditor/index.js

@@ -257,7 +257,8 @@ export default class SceneEditor extends React.Component<Props, State> {
     );
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  // To be updated, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops.
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (
       this.props.layout !== nextProps.layout ||
       this.props.initialInstances !== nextProps.initialInstances ||

newIDE/app/src/UI/Checkbox.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
+import MUICheckbox from '@material-ui/core/Checkbox';
 import { makeStyles } from '@material-ui/core/styles';
 
 // Reduce checkbox size to avoid overlapping with other checkboxes.
@@ -33,11 +33,11 @@ type Props = {|
 /**
  * A text field based on Material-UI text field.
  */
-export default (props: Props) => {
+const Checkbox = (props: Props) => {
   const { onCheck } = props;
   const classes = useStyles();
   const checkbox = (
-    <Checkbox
+    <MUICheckbox
       className={classes.root}
       disabled={props.disabled}
       checked={props.checked}
@@ -60,3 +60,5 @@ export default (props: Props) => {
     checkbox
   );
 };
+
+export default Checkbox;

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Action.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props} viewBox="0 0 23.109 23.124">
     <g id="Action" transform="translate(-92.011 -101.74)" fillRule="nonzero">

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Activate.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props} viewBox="0 -6 24 24">
     <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Condition.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props} viewBox="0 0 23.109 23.124">
     <g id="Action" fill="#283983">

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Create.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props} viewBox="0 -3 24 24">
     <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Deactivate.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props} viewBox="0 -6 24 24">
     <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Destroy.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props} viewBox="0 -3 24 24">
     <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Expression.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props} viewBox="0 0 23.109 23.124">
     <g id="Expression">

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Function.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props}>
     <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

newIDE/app/src/UI/CustomSvgIcons/Behaviors/Step.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SvgIcon from '@material-ui/core/SvgIcon';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default props => (
   <SvgIcon {...props} viewBox="0 -6 24 24">
     <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

newIDE/app/src/UI/Dialog/index.js

@@ -96,7 +96,7 @@ type DialogContentStyle = {
  * A enhanced material-ui Dialog that can have optional secondary actions
  * and no margins if required.
  */
-export default (props: Props) => {
+const Dialog = (props: Props) => {
   const {
     onApply,
     secondaryActions,
@@ -207,3 +207,5 @@ export default (props: Props) => {
     </DialogMaterialUI>
   );
 };
+
+export default Dialog;

newIDE/app/src/UI/DrawerTopBar.js

@@ -38,7 +38,7 @@ const styles = {
   },
 };
 
-export default (props: Props) => {
+const DrawerTopBar = (props: Props) => {
   return (
     <AppBar
       position="static"
@@ -71,3 +71,5 @@ export default (props: Props) => {
     </AppBar>
   );
 };
+
+export default DrawerTopBar;

newIDE/app/src/UI/HelpIcon/index.js

@@ -27,7 +27,7 @@ type PropsType = {|
 /**
  * The icon that can be used in any dialog to open a help page
  */
-export default (props: PropsType) => {
+const HelpIcon = (props: PropsType) => {
   const { helpPagePath } = props;
   if (!helpPagePath) return null;
 
@@ -42,3 +42,5 @@ export default (props: PropsType) => {
     </IconButton>
   );
 };
+
+export default HelpIcon;

newIDE/app/src/UI/InlineCheckbox.js

@@ -19,7 +19,7 @@ type Props = {|
  * A checkbox based on Material-UI Checkbox, but that can be displayed
  * without having it taking the full width of its container.
  */
-export default ({
+const InlineCheckbox = ({
   onCheck,
   disabled,
   checked,
@@ -53,3 +53,5 @@ export default ({
     checkbox
   );
 };
+
+export default InlineCheckbox;

newIDE/app/src/UI/LeftLoader.js

@@ -6,7 +6,7 @@ const styles = {
   progress: { marginRight: 8, verticalAlign: 'middle' },
 };
 
-export default ({
+const LeftLoader = ({
   children,
   isLoading,
 }: {
@@ -18,3 +18,5 @@ export default ({
     {children}
   </span>
 );
+
+export default LeftLoader;

newIDE/app/src/UI/LoaderModal.js

@@ -15,7 +15,7 @@ const styles = {
 
 const transitionDuration = { enter: 0, exit: 150 };
 
-export default props => {
+const LoaderModal = props => {
   return (
     <Dialog open={props.show} transitionDuration={transitionDuration}>
       <DialogContent style={styles.dialogContent}>
@@ -28,3 +28,5 @@ export default props => {
     </Dialog>
   );
 };
+
+export default LoaderModal;

newIDE/app/src/UI/PlaceholderLoader.js

@@ -11,8 +11,10 @@ const styles = {
   },
 };
 
-export default props => (
+const PlaceholderLoader = props => (
   <div style={{ ...styles.containerStyle, ...props.style }}>
     <CircularProgress size={40} />
   </div>
 );
+
+export default PlaceholderLoader;

newIDE/app/src/UI/PlaceholderMessage.js

@@ -6,7 +6,7 @@ type Props = {|
   children: React.Node,
 |};
 
-export default (props: Props) => {
+const PlaceholderMessage = (props: Props) => {
   return (
     <div
       style={{
@@ -33,3 +33,5 @@ export default (props: Props) => {
     </div>
   );
 };
+
+export default PlaceholderMessage;

newIDE/app/src/UI/RightLoader.js

@@ -6,7 +6,7 @@ const styles = {
   progress: { marginLeft: 8, verticalAlign: 'middle' },
 };
 
-export default ({
+const RightLoader = ({
   children,
   isLoading,
 }: {
@@ -18,3 +18,5 @@ export default ({
     {isLoading && <CircularProgress size={20} style={styles.progress} />}
   </span>
 );
+
+export default RightLoader;

newIDE/app/src/UI/Subheader.js

@@ -11,9 +11,11 @@ const style = {
 };
 
 // A Subheader to be displayed in a List.
-export default ({ children }: Props) =>
+const Subheader = ({ children }: Props) =>
   children ? (
     <Typography variant={'overline'} style={style}>
       {children}
     </Typography>
   ) : null;
+
+export default Subheader;

newIDE/app/src/UI/TagChips.js

@@ -30,14 +30,14 @@ type Props = {|
   onRemove?: string => void,
 |};
 
-export default ({ tags, onChange, onRemove }: Props) => {
-  if (!tags.length) return null;
-
+const TagChips = ({ tags, onChange, onRemove }: Props) => {
   const [focusedTag, setFocusedTag] = React.useState<?string>(null);
   const [removedTagIndex, setRemovedTagIndex] = React.useState<number | null>(
     null
   );
 
+  // Unsure about this warning, might be worth fixing/improving.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const tagRefs = [];
   React.useEffect(
     () => {
@@ -71,6 +71,8 @@ export default ({ tags, onChange, onRemove }: Props) => {
     else if (onRemove) onRemove(tag);
   };
 
+  if (!tags.length) return null;
+
   return (
     <div style={styles.chipContainer}>
       {tags.map(tag => {
@@ -92,3 +94,5 @@ export default ({ tags, onChange, onRemove }: Props) => {
     </div>
   );
 };
+
+export default TagChips;

newIDE/app/src/UI/ToolbarSeparator.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import GDevelopThemeContext from '../UI/Theme/ThemeContext';
 
-export default () => {
+const ToolbarSeparator = () => {
   const theme = React.useContext(GDevelopThemeContext);
   return (
     <span
@@ -17,3 +17,5 @@ export default () => {
     />
   );
 };
+
+export default ToolbarSeparator;

newIDE/app/src/Utils/Memoize.js

@@ -1,6 +1,8 @@
 // @flow
 
-export default function<Input, Output>(func: Input => Output): Input => Output {
+export default function memoize<Input, Output>(
+  func: Input => Output
+): Input => Output {
   const primitives = new Map<Input, Output>();
   // $FlowFixMe - WeakMap is only used when Input is an object.
   const objects = new WeakMap<Input, Output>();

newIDE/app/src/Utils/NewNameGenerator.js

@@ -1,6 +1,6 @@
 // @flow
 
-export default (
+const newNameGenerator = (
   name /*:string */,
   exists /*:(string) => boolean */,
   prefix /*: string */ = ''
@@ -14,3 +14,5 @@ export default (
 
   return potentialName;
 };
+
+export default newNameGenerator;

newIDE/app/src/Utils/UseDebounce.js

@@ -18,6 +18,7 @@ export const useDebounce = (cb: any, delay: number) => {
   useEffect(() => {
     inputsRef.current = { cb, delay };
   });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   return useCallback(
     debounce(
       (...args: any) => {