Webpack omitting @emotion/styled; Uncaught ReferenceError: _styled is not defined thrown at runtime

[vergenzt]

TL;DR: Webpack build seems to be omitting a specific node_module which is used, leading to Uncaught ReferenceError: [...] is not defined at runtime. 🤨 Any ideas?

Hey everybody. I'm struggling with some weird Webpack behavior and cannot figure out what to do. Anybody able/willing to help me figure it out?

1. I'm working with a slightly-modified fork of Superset. (Mostly just adds a handful of features and backports some bug fixes.)

   • a) I wasn't able to reproduce it when building directly from unmodified Superset source, which is why I'm not reporting as a bug.
   • b) However I did find somebody else in Superset Slack who experienced the same thing 3 months ago! (https://apache-superset.slack.com/archives/C015WAZL0KH/p1711679089536319)
     • i) They said in March 2024 that they've "been getting this runtime error lately", and that they "even get this runtime error when checked out to a previously stable commit", with an attached stack trace and other context that matches mine almost exactly. So I figured it'd be worth reaching out on Github. 🤷 Unfortunately they did not specify which "previously stable" commit(s) they encountered this error on.
     • ii) I tried reaching out to them but they weren't responsive on Superset Slack, and I don't have any other contact info.

2. For some reason, after upgrading the base version of my fork from Superset 2.1.0 to 3.1.2 (i.e. essentially git rebase 2.1.0 --onto 3.1.2 & resolve conflicts), I've started getting an error in console while the UI hangs with a loading spinner (see screenshot):

   index.tsx:53 Uncaught ReferenceError: _styled is not defined
       at 51995 (index.tsx:53:20)
       at d (bootstrap:19:32)
       at 25076 (8047.1e7dc72e1c3b0c4d79d5.entry.js:1:49300)
       at d (bootstrap:19:32)
       at startup:4:130
       at d.O (chunk loaded:23:12)
       at startup:6:43
       at spa.b62737415458cd317a3c.entry.js:375:21004
   

   • a) error message: index.tsx:53 Uncaught ReferenceError: _styled is not defined
   • b) the index.ts in question is linked to https://github.com/apache/superset/blob/3.1.2/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L53 (export const styled = emotionStyled;)
   • c) which refers to an import from https://github.com/apache/superset/blob/3.1.2/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L19 (import emotionStyled from '@emotion/styled';)

3. I also browsed through the source-mapped workspace in Chrome devtools, and found that node_modules/@emotion indeed does not contained a styled directory, even though it does contain other dependencies. (also see screenshot)

4. I've also attempted to into webpack compilation stats per https://webpack.js.org/api/stats/, but the JSON data I'm getting out of that seems to be missing critical details. 🤔

   • a) I believe Webpack CLI is at version 5.88.1:

     $ gron superset-frontend/package-lock.json | grep webpack.version
     json.dependencies.webpack.version = "5.88.1";
     json.dependencies["@storybook/addon-docs"].dependencies.webpack.version = "4.46.0";
     json.dependencies["@storybook/core-common"].dependencies.webpack.version = "4.46.0";
     

   • b) Specifically, none of the following keys seem to be present in the file I'm getting out of --profile --json=.../compilation-stats.json (see attached): assets, chunks, modules, entryPoints (maybe others)

Attachments:

• Screenshot 2024-06-20 at 3 22 50 PM.png
• compilation-stats.json

---

I'm a bit at a loss how to proceed. 😭

Anybody got ideas or tips how to debug this?

[alibertz]

+1. Facing this exact issue with almost identical context/circumstances

[vergenzt]

Any ideas or leads? 😕 Other than stepping through Webpack execution with a debugger to figure out what's going on (a pretty intense undertaking), I'm at a loss for what to try.

[alibertz]

nothing unfortunately. Starting to think trying to debug it in it's current state isn't worth it - going to try cloning a fresh Superset v3.0 instance and manually bring over the changes I made in my v2.x instance

[vergenzt]

Huzzah! I may have at least figured out a workaround! 🎉

Converting that particular file to use a re-export syntax (export ... from '...') instead of an import followed by export const ... seems to have worked around the issue for me. Webpack builds continue to succeed as before, and main dashboard UI now loads fully without throwing the error described above.

Diff:

diff --git a/superset-frontend/packages/superset-ui-core/src/style/index.tsx b/superset-frontend/packages/superset-ui-core/src/style/index.tsx
index ee0b6e10ac4199fbca8ff92fa83cc424ddc00715..39cdfa294fb390270d2104f7faed567a79d46803 100644
--- a/superset-frontend/packages/superset-ui-core/src/style/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/style/index.tsx
@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import emotionStyled from '@emotion/styled';
 import { useTheme as useThemeBasic } from '@emotion/react';
 import createCache from '@emotion/cache';
 
@@ -29,6 +28,7 @@ export {
   withTheme,
 } from '@emotion/react';
 export { default as createEmotionCache } from '@emotion/cache';
+export { default as styled } from '@emotion/styled';
 
 declare module '@emotion/react' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -50,8 +50,6 @@ export const emotionCache = createCache({
   key: 'superset',
 });
 
-export const styled = emotionStyled;
-
 const defaultTheme = {
   borderRadius: 4,
   colors: {

I'm so confused why this issue seems to have only appeared sporadically, but I'm just so relieved to have found something that seems to fix it for now.