use craco

This lets us modify some config without ejecting create-react-app.

This allows us to target esnext which works around a number of issues
with multi-targeted packages like blueprintsjs and react-i18n.

craco.config.js

@@ -0,0 +1,11 @@
+// https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration
+
+module.exports = {
+    webpack: {
+        configure: {
+            resolve: {
+                mainFields: ['esnext', 'browser', 'module', 'main'],
+            },
+        },
+    },
+};

package.json

@@ -4,6 +4,7 @@
     "private": true,
     "dependencies": {
         "@blueprintjs/core": "^3.36.0",
+        "@craco/craco": "^6.0.0",
         "@pybricks/firmware": "4.3.0",
         "@pybricks/mpy-cross-v5": "^1.1.0",
         "@shopify/react-i18n": "^5.0.0",
@@ -43,10 +44,10 @@
     },
     "scripts": {
         "prepare": "mkdirp public/static/js && ncp node_modules/@pybricks/mpy-cross-v5/build/mpy-cross.wasm src/sagas/mpy-cross.emcwasm",
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test --env=./test/env.js",
-        "coverage": "react-scripts test --env=./test/env.js --coverage --watchAll=false",
+        "start": "craco start",
+        "build": "craco build",
+        "test": "craco test --env=./test/env.js",
+        "coverage": "craco test --env=./test/env.js --coverage --watchAll=false",
         "coverage:html": "yarn coverage --coverageReporters html",
         "eject": "react-scripts eject",
         "lint": "tsc --noEmit && eslint \"*/**/*.{js,ts,tsx}\" --quiet --fix"

src/components/ActionButton.tsx

@@ -1,9 +1,15 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import { Button, Hotkey, Hotkeys, Intent, Position, Tooltip } from '@blueprintjs/core';
-// importing this way due to https://github.com/palantir/blueprint/issues/3604
-import { HotkeysTarget } from '@blueprintjs/core/lib/esnext/components/hotkeys/hotkeysTarget';
+import {
+    Button,
+    Hotkey,
+    Hotkeys,
+    HotkeysTarget,
+    Intent,
+    Position,
+    Tooltip,
+} from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { TooltipId } from './button-i18n';

src/components/Editor.tsx

@@ -1,9 +1,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import { Menu, MenuDivider, MenuItem, ResizeSensor } from '@blueprintjs/core';
-// importing this way due to https://github.com/palantir/blueprint/issues/3891
-import { ContextMenuTarget } from '@blueprintjs/core/lib/esnext/components/context-menu/contextMenuTarget';
+import {
+    ContextMenuTarget,
+    Menu,
+    MenuDivider,
+    MenuItem,
+    ResizeSensor,
+} from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import { Ace, config } from 'ace-builds';
 import React from 'react';

src/components/Terminal.tsx

@@ -1,9 +1,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import { Menu, MenuDivider, MenuItem, ResizeSensor } from '@blueprintjs/core';
-// importing this way due to https://github.com/palantir/blueprint/issues/3891
-import { ContextMenuTarget } from '@blueprintjs/core/lib/esnext/components/context-menu/contextMenuTarget';
+import {
+    ContextMenuTarget,
+    Menu,
+    MenuDivider,
+    MenuItem,
+    ResizeSensor,
+} from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { connect } from 'react-redux';

yarn.lock

@@ -1163,6 +1163,16 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@craco/craco@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-6.0.0.tgz#f4e66e82f5bc77671dc0a5e839c3269e2414fe0f"
+  integrity sha512-NSgcGqTlQ+XTBJ/AhE0ngdfab5xIyx/06yrRPkvDH02V90ejrL6bSM54k3+h3OjGE/SO7nmF1MqfFwemPo8kVw==
+  dependencies:
+    cross-spawn "^7.0.0"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    webpack-merge "^4.2.2"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -12475,6 +12485,13 @@ webpack-manifest-plugin@2.2.0:
     object.entries "^1.1.0"
     tapable "^1.0.0"
 
+webpack-merge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
+  integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==
+  dependencies:
+    lodash "^4.17.15"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"