chore(build): enable support for ts declare fields

babel.config.js

@@ -2,16 +2,29 @@
 // @ts-nocheck
 module.exports = function (api) {
     const env = api.env();
-    api.cache(true);
+    const isProduction = api.env((envName) => envName.includes('production'));
+
+    api.cache.using(() => env);
+
+    const browserEnv = {
+        plugins: ['react-hot-loader/babel'],
+        presets: [
+            [
+                '@babel/preset-env',
+                {
+                    shippedProposals: true,
+                    ignoreBrowserslistConfig: false,
+                    modules: false,
+                    useBuiltIns: 'usage', // or "entry"
+                    corejs: 3,
+                    include: ['proposal-class-properties'],
+                },
+            ],
+        ],
+    };
 
     return {
         presets: [
-            [
-                '@babel/preset-typescript',
-                {
-                    allowDeclareFields: true,
-                },
-            ],
             '@babel/preset-react',
             [
                 '@babel/preset-env',
@@ -23,11 +36,24 @@ module.exports = function (api) {
                     modules: 'commonjs',
                 },
             ],
+            [
+                // NOTE: preset-typescript must go before proposal-class-properties
+                // in order to use allowDeclareFields option
+                // proposal-class-properties is enabled by preset-env for browser env
+                // preset-env for nodejs does not need it, because recent node versions support class fields
+                //
+                // but, due to some bugs (?), we must place preset-typescript here so that it loads as
+                // last default preset, before loading browser presets.
+                // Only this combination is working without errors
+                '@babel/preset-typescript',
+                {
+                    allowDeclareFields: true,
+                },
+            ],
         ],
         plugins: [
             '@babel/plugin-syntax-dynamic-import',
             '@babel/plugin-proposal-function-bind',
-            '@babel/plugin-proposal-class-properties',
             '@babel/plugin-proposal-optional-chaining',
             '@babel/plugin-transform-runtime',
             [
@@ -36,25 +62,14 @@ module.exports = function (api) {
                     removePrefix: 'packages.app',
                     messagesDir: './build/messages/',
                     useKey: true,
-                    removeDefaultMessage: env === 'production',
+                    removeDefaultMessage: isProduction,
                 },
             ],
         ],
         env: {
-            webpack: {
-                plugins: ['react-hot-loader/babel'],
-                presets: [
-                    [
-                        '@babel/preset-env',
-                        {
-                            ignoreBrowserslistConfig: false,
-                            modules: false,
-                            useBuiltIns: 'usage', // or "entry"
-                            corejs: 3,
-                        },
-                    ],
-                ],
-            },
+            browser: browserEnv,
+            'browser-development': browserEnv,
+            'browser-production': browserEnv,
         },
     };
 };

packages/app/components/auth/BaseAuthBody.tsx

@@ -15,7 +15,7 @@ class BaseAuthBody extends React.Component<
     RouteComponentProps<Record<string, any>>
 > {
     static contextType = Context;
-    /* TODO: use declare */ context: React.ContextType<typeof Context>;
+    declare context: React.ContextType<typeof Context>;
     prevErrors: AuthContext['auth']['error'];
 
     autoFocusField: string | null = '';

packages/app/components/profile/multiFactorAuth/MfaDisable.tsx

@@ -17,7 +17,7 @@ export default class MfaDisable extends React.Component<
     }
 > {
     static contextType = Context;
-    /* TODO: use declare */ context: React.ContextType<typeof Context>;
+    declare context: React.ContextType<typeof Context>;
 
     state = {
         showForm: false,

packages/app/components/profile/multiFactorAuth/MfaEnable.tsx

@@ -41,7 +41,7 @@ interface State {
 
 export default class MfaEnable extends React.PureComponent<Props, State> {
     static contextType = Context;
-    /* TODO: use declare */ context: React.ContextType<typeof Context>;
+    declare context: React.ContextType<typeof Context>;
 
     static defaultProps = {
         confirmationForm: new FormModel(),

packages/app/pages/profile/ChangeEmailPage.tsx

@@ -18,7 +18,7 @@ interface Props extends RouteComponentProps<RouteParams> {
 
 class ChangeEmailPage extends React.Component<Props> {
     static contextType = Context;
-    /* TODO: use declare */ context: React.ContextType<typeof Context>;
+    declare context: React.ContextType<typeof Context>;
 
     render() {
         const { step = 'step1', code } = this.props.match.params;

packages/app/pages/profile/ChangePasswordPage.tsx

@@ -14,7 +14,7 @@ interface Props {
 
 class ChangePasswordPage extends React.Component<Props> {
     static contextType = Context;
-    /* TODO: use declare */ context: React.ContextType<typeof Context>;
+    declare context: React.ContextType<typeof Context>;
 
     form = new FormModel();
 

packages/app/pages/profile/ChangeUsernamePage.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 class ChangeUsernamePage extends React.Component<Props> {
     static contextType = Context;
-    /* TODO: use declare */ context: React.ContextType<typeof Context>;
+    declare context: React.ContextType<typeof Context>;
 
     form = new FormModel();
 

packages/app/pages/profile/MultiFactorAuthPage.tsx

@@ -16,7 +16,7 @@ interface Props
 
 class MultiFactorAuthPage extends React.Component<Props> {
     static contextType = Context;
-    /* TODO: use declare */ context: React.ContextType<typeof Context>;
+    declare context: React.ContextType<typeof Context>;
 
     render() {
         const {

packages/scripts/build-dll.ts

@@ -2,7 +2,8 @@
 /* eslint-env node */
 /* eslint-disable no-console */
 
-import fs, { Stats } from 'fs';
+import type { Stats } from 'fs';
+import fs from 'fs';
 import webpack, { MultiCompiler } from 'webpack';
 import chalk from 'chalk';
 

tests-e2e/cypress/plugins/index.js

@@ -21,6 +21,7 @@ const wp = require('@cypress/webpack-preprocessor');
 
 // for some reason loader can not locate babel.config. So we load it manually
 const config = require('../../../babel.config');
+const babelEnvName = 'browser-development';
 
 module.exports = (on) => {
     const options = {
@@ -39,14 +40,31 @@ module.exports = (on) => {
                             {
                                 loader: 'babel-loader',
                                 options: {
-                                    envName: 'webpack',
+                                    envName: babelEnvName,
                                     cacheDirectory: true,
                                     // We don't have the webpack's API object, so just provide necessary methods
                                     ...config({
-                                        env() {
-                                            return 'development';
+                                        env(value) {
+                                            // see @babel/core/lib/config/helpers/config-api.js
+                                            switch (typeof value) {
+                                                case 'string':
+                                                    return value === babelEnvName;
+                                                case 'function':
+                                                    return value(babelEnvName);
+
+                                                case 'undefined':
+                                                    return babelEnvName;
+                                                default:
+                                                    if (Array.isArray(value)) {
+                                                        throw new Error('Unimplemented env() argument');
+                                                    }
+
+                                                    throw new Error('Invalid env() argument');
+                                            }
+                                        },
+                                        cache: {
+                                            using() {},
                                         },
-                                        cache() {},
                                     }),
                                 },
                             },

webpack.config.js

@@ -30,13 +30,14 @@ const isCI = !!process.env.CI;
 const isSilent = isCI || process.argv.some((arg) => /quiet/.test(arg));
 const isCspEnabled = false;
 const enableDll = !isProduction && !isStorybook;
+const webpackEnv = isProduction ? 'production' : 'development';
 
-process.env.NODE_ENV = isProduction ? 'production' : 'development';
+process.env.NODE_ENV = webpackEnv;
 
 const smp = new SpeedMeasurePlugin();
 
 const webpackConfig = {
-    mode: isProduction ? 'production' : 'development',
+    mode: webpackEnv,
 
     cache: true,
 
@@ -169,7 +170,7 @@ const webpackConfig = {
                     {
                         loader: 'babel-loader',
                         options: {
-                            envName: 'webpack',
+                            envName: `browser-${webpackEnv}`,
                             cacheDirectory: true,
                         },
                     },