From 9fe1fa6c945bf5a3cf076a8c8c10da26ef05daaa Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Tue, 7 Feb 2023 12:09:20 +0900
Subject: [PATCH] Enable a babel plugin in the sharing and mountable projects
 for a new syntax that has been introduced to the upstream codebase

---
 packages/mountable/config/webpack.config.js |  3 ++-
 packages/sharing/craco.config.js            | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/mountable/config/webpack.config.js b/packages/mountable/config/webpack.config.js
index 7832e63da..3ee9e4ccc 100644
--- a/packages/mountable/config/webpack.config.js
+++ b/packages/mountable/config/webpack.config.js
@@ -407,7 +407,8 @@ module.exports = function (webpackEnv) {
                 ],
 
                 plugins: [
-                  "@emotion",  // This line has been added after ejection. The emotion babel plugin is necessary for the Streamlit frontend: https://github.com/streamlit/streamlit/blob/786da40420cd5b6d7682da42837c6ecf861e8464/frontend/craco.config.js#L44
+                  "@emotion",  // Stlite: This line has been added after ejection. The emotion babel plugin is necessary for the Streamlit frontend: https://github.com/streamlit/streamlit/blob/786da40420cd5b6d7682da42837c6ecf861e8464/frontend/craco.config.js#L44
+                  "@babel/plugin-proposal-logical-assignment-operators",  // Stlite: This specific plugin is needed to parse the upstream source code with the CRA default browserslist setting. See https://github.com/whitphx/stlite/issues/471
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
diff --git a/packages/sharing/craco.config.js b/packages/sharing/craco.config.js
index 6b95217f5..1a6ed7130 100644
--- a/packages/sharing/craco.config.js
+++ b/packages/sharing/craco.config.js
@@ -1,8 +1,11 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
   babel: {
-    plugins: ["@emotion"],
+    plugins: [
+      "@emotion",
+      "@babel/plugin-proposal-logical-assignment-operators", // Stlite: This specific plugin is needed to parse the upstream source code with the CRA default browserslist setting. See https://github.com/whitphx/stlite/issues/471
+    ],
     loaderOptions: {
       cacheDirectory: true,
     },
@@ -21,8 +24,8 @@ module.exports = {
       /* To resolve the alias streamlit/frontend uses */
       webpackConfig.resolve.alias = {
         ...webpackConfig.resolve.alias,
-        "src": path.resolve(__dirname, "../../streamlit/frontend/src")
-      }
+        src: path.resolve(__dirname, "../../streamlit/frontend/src"),
+      };
 
       /* To build Streamlit. These configs are copied from streamlit/frontend/craco.config.js */
       // Apache Arrow uses .mjs
@@ -30,7 +33,7 @@ module.exports = {
         include: /node_modules/,
         test: /\.mjs$/,
         type: "javascript/auto",
-      })
+      });
 
       /* For file-loader that resolves the wheels */
       // Since Webpack5, Asset Modules has been introduced to cover what file-loader had done.
@@ -52,6 +55,6 @@ module.exports = {
       // })
 
       return webpackConfig;
-    }
-  }
-}
+    },
+  },
+};