From 4e88605b163cf4ab12181557b4606cc3ea5739a6 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 20 May 2022 16:46:17 -0500
Subject: [PATCH] utils/customError: narrow type of name property

The name property is inherited from Error and has a type of string.
But our CustomError ensures that the name is restricted to the type
of T. This causes compiler errors, so we had to enable a babel plugin
to support it.
---
 config/jest/babelTransform.js | 6 +++++-
 config/webpack.config.js      | 3 +++
 src/utils/customError.ts      | 2 ++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/config/jest/babelTransform.js b/config/jest/babelTransform.js
index 833fc209..77f4860f 100644
--- a/config/jest/babelTransform.js
+++ b/config/jest/babelTransform.js
@@ -16,7 +16,11 @@ const hasJsxRuntime = (() => {
 })();
 
 module.exports = babelJest.createTransformer({
-  plugins: ['@shopify/react-i18n/babel'],
+  plugins: [
+    ['@babel/plugin-transform-typescript', {
+      allowDeclareFields: true
+    }], 
+    '@shopify/react-i18n/babel'],
   presets: [
     [
       require.resolve('babel-preset-react-app'),
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 8cd89639..71d96c9a 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -427,6 +427,9 @@ module.exports = function (webpackEnv) {
                 ],
                 
                 plugins: [
+                  [require.resolve('@babel/plugin-transform-typescript'), {
+                    allowDeclareFields: true
+                  }], 
                   require.resolve('@shopify/react-i18n/babel'),
                   isEnvDevelopment &&
                     shouldUseReactRefresh &&
diff --git a/src/utils/customError.ts b/src/utils/customError.ts
index e07515dd..7d30d3a0 100644
--- a/src/utils/customError.ts
+++ b/src/utils/customError.ts
@@ -2,6 +2,8 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 export class CustomError<T extends string> extends Error {
+    declare name: T;
+
     public constructor(name: T, message: string, cause?: Error) {
         super(message, { cause });
         this.name = name;