attempts to enable localization in webpack config, reverted screenshot.png

src/renderer/components/app.tsx

@@ -39,8 +39,8 @@ export class App extends React.Component {
   static rootElem = document.getElementById('app');
 
   static async init() {
-    await i18nStore.init();
-    await configStore.init();
+    // await i18nStore.init();
+    // await configStore.init();
     render(<App/>, App.rootElem);
   };
 

src/renderer/config.store.ts

@@ -42,7 +42,7 @@ export class ConfigStore {
   }
 
   get allowedResources() {
-    return this.config.allowedResources;
+    return this.config.allowedResources || [];
   }
 
   get isClusterAdmin() {

src/renderer/i18n.ts

@@ -22,10 +22,11 @@ export class LocalizationStore {
   readonly defaultLocale = "en"
   @observable activeLang = this.defaultLocale;
 
+  // todo: verify with package.json ling-ui "locales"
   public languages: ILanguage[] = orderBy<ILanguage>([
     { code: "en", title: "English", nativeTitle: "English" },
     { code: "ru", title: "Russian", nativeTitle: "Русский" },
-    // { code: "fi", title: "Finnish", nativeTitle: "Suomi" },
+    { code: "fi", title: "Finnish", nativeTitle: "Suomi" },
   ], "title");
 
   constructor() {
@@ -39,10 +40,7 @@ export class LocalizationStore {
   }
 
   async load(locale: string) {
-    const catalog = await import(
-      /* webpackMode: "lazy", webpackChunkName: "locale/[request]" */
-      `@lingui/loader!../locales/${locale}/messages.po`
-    );
+    const catalog = await import(`../locales/${locale}/messages.po`);
     return _i18n.load(locale, catalog);
   }
 

src/renderer/webpack.renderer.js

@@ -4,32 +4,46 @@ const path = require("path");
 module.exports = function (config, env) {
   const {rules} = config.module;
 
-  // patch-fix sass-loader
-  const sassLoaderName = "sass-loader";
-  const sassLoaderRule = rules.find(rule => {
-    if (Array.isArray(rule.use)) return rule.use.includes(sassLoaderName)
-    return rule.use === sassLoaderName;
+  // localization support
+  // https://lingui.js.org/guides/typescript.html
+  rules.push({
+    test: /\.po$/,
+    use: '@lingui/loader'
   });
-  if (sassLoaderRule) {
-    let index = sassLoaderRule.use.findIndex(loader => loader === sassLoaderName);
-    sassLoaderRule.use[index] = {
-      loader: sassLoaderName,
-      options: {
-        prependData: '@import "vars.scss";',
-        sassOptions: {
-          includePaths: [
-            path.resolve(__dirname, "components")
-          ]
-        }
+  patchLoader(".tsx", "ts-loader", loader => {
+    loader.options = Object.assign({}, loader.options, {
+      compilerOptions: {
+        jsx: "preserve",
+        target: "es2016",
       }
+    })
+    return ["babel-loader", loader]
+  });
+
+  // sass common vars file import
+  patchLoader(".scss", "sass-loader", loader => {
+    loader.options = Object.assign({}, loader.options, {
+      prependData: '@import "vars.scss";',
+      sassOptions: {
+        includePaths: [
+          path.resolve(__dirname, "components")
+        ]
+      }
+    })
+    return loader;
+  });
+
+  function patchLoader(fileType, loaderName, updater) {
+    let rule = rules.find(rule => fileType.match(rule.test));
+    if (rule) {
+      let loaders = [rule.use].flat();
+      let index = loaders.findIndex(loader => loader === loaderName || loader.loader === loaderName);
+      let loader = typeof loaders[index] === "string" ? {loader: loaders[index]} : loaders[index];
+      loaders[index] = updater(loader);
+      rule.use = loaders.flat();
+      console.info(`Patched renderer's webpack loader "${loaderName}"`);
     }
   }
 
-  // add inline svg icons support
-  rules.push({
-    test: /\.txt$/,
-    use: 'raw-loader'
-  });
-
   return config;
 }