Enable a babel plugin in the sharing and mountable projects for a new…

… syntax that has been introduced to the upstream codebase
whitphx · Feb 7, 2023 · 9fe1fa6 · 9fe1fa6
1 parent 12242a9
commit 9fe1fa6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git 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
@@ -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,16 +24,16 @@ 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
       webpackConfig.module.rules.push({
         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;
-    }
-  }
-}
+    },
+  },
+};