superset superset-frontend ReferenceError: module is not defined

Bug description

npm run dev-server

module is not defined ReferenceError: module is not defined at eval (webpack-internal:///./packages/superset-ui-core/node_modules/micromark-extension-gfm-autolink-literal/dev/lib/syntax.js:6:151) at eval (webpack-internal:///./packages/superset-ui-core/node_modules/micromark-extension-gfm-autolink-literal/dev/lib/syntax.js:6:161) at ./packages/superset-ui-core/node_modules/micromark-extension-gfm-autolink-literal/dev/lib/syntax.js (http://localhost:9000/static/assets/vendors-node_modules_ant-design_icons_es_components_Icon_js-node_modules_ant-design_icons_es_-ee1f88.05bed6d2.entry.js:29051:1) at webpack_require (http://localhost:9000/static/assets/spa.52592bdf.entry.js:1931:33) at fn (http://localhost:9000/static/assets/spa.52592bdf.entry.js:2264:21) at eval (webpack-internal:///./packages/superset-ui-core/node_modules/micromark-extension-gfm/index.js:6:98) at ./packages/superset-ui-core/node_modules/micromark-extension-gfm/index.js (http://localhost:9000/static/assets/vendors-node_modules_ant-design_icons_es_components_Icon_js-node_modules_ant-design_icons_es_-ee1f88.05bed6d2.entry.js:29183:1) at webpack_require (http://localhost:9000/static/assets/spa.52592bdf.entry.js:1931:33) at fn (http://localhost:9000/static/assets/spa.52592bdf.entry.js:2264:21) at eval (webpack-internal:///./packages/superset-ui-core/node_modules/remark-gfm/index.js:4:81)

How to reproduce the bug

npm install

npm run dev-server

Screenshots/recordings

2024517111348778

Superset version

3.1.3

Python version

3.9

Node version

18 or greater

Browser

Chrome

Additional context

No response

Checklist

[X] I have searched Superset docs and Slack and didn't find a solution to my problem.
[X] I have searched the GitHub issue tracker and didn't find a similar bug report.
[X] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

May 17 '24 03:05 tym3515

The error you're encountering with superset-frontend and the micromark-extension-gfm-autolink-literal package seems to be a module resolution issue. Here's a more focused approach to troubleshoot and potentially resolve this problem:

Node.js Version: Ensure your Node.js version (18 or greater) fully supports ES modules. The error could stem from incompatibilities or misconfigurations related to module handling.
Check Installation: Run npm install or yarn install to make sure all dependencies, including sub-dependencies like micromark-extension-gfm-autolink-literal, are correctly installed.
Babel Configuration: If you're using Babel, verify your configuration to ensure ES modules are correctly transpiled. Including plugins such as @babel/plugin-transform-modules-commonjs might be necessary.
Webpack Configuration: For projects using Webpack, adjust your configuration to properly resolve ES modules by setting resolve.mainFields to ['browser', 'module', 'main'].
Direct Dependency Installation: As a workaround, try installing micromark-extension-gfm-autolink-literal directly in your project (npm install micromark-extension-gfm-autolink-literal or yarn add micromark-extension-gfm-autolink-literal).
Research and Updates: Check the GitHub repositories for micromark-extension-gfm-autolink-literal, react-markdown, remark-gfm, or @superset-ui/core for any known issues or updates that might address this problem.

For further assistance, providing more details about your setup, including the exact Node.js version, Webpack configuration, and any additional console output, would be helpful.

Details

Sources

About Dosu This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

May 17 '24 03:05 dosubot[bot]

Hopefully the bot's right, that an npm install will fix it. You can delete the node modules folder and then npm install (or just npm ci) if you want to be extra sure.

May 17 '24 16:05 rusackas

I tried npm install, npm ci on superset-frontend directory but the error still persists. I experimented with clean installing superset-ui-core by deleting the node_modules and having npm ci still error shows. This goes for both 4.0.0 and 4.0.1 releases on superset.

May 21 '24 03:05 harrychristianx

I've the same problem with no resolution, anyone found a fix ?

Jun 04 '24 08:06 LuvKaranwal21

I've the same problem with no resolution, anyone found a fix ?

Jun 12 '24 01:06 chen-xiaohu

Have you solved your problem? I encountered the same problem

Jun 12 '24 03:06 zhangchengda

I'm curious if you get the same issue when running master.

You can also delete your node_modules folder contents entirely, and _then npm install again. Basically, "nuke it from orbit"

If that doesn't work, I wonder if you can just npm install micromark-extension-gfm-autolink-literal to solve this. You shouldn't have to, but maybe it'll work for your situation.

Jun 12 '24 04:06 rusackas

Nope, it's still not solved for me, and I've tried nuking it out as well, that doesn't solve the problem, also tried npm install micromark-extension-gfm-autolink-literal

btw the same installation steps works in linux

Jun 12 '24 06:06 LuvKaranwal21

btw the same installation steps works in linux

What OS are you running?

Jun 12 '24 15:06 rusackas

btw the same installation steps works in linux

What OS are you running?

nevermind, I don't know the OS that my colleague was using before

but the problem persists for me on windows

I used 4.0.0 version of superset, did installation with node 16,

I'm not sure, but might be related to this

https://github.com/gaearon/react-hot-loader/issues/1707

https://github.com/apache/superset/issues/12197

Jun 13 '24 10:06 LuvKaranwal21

Windows is unsupported at this time. It's certainly possible to run Superset on Windows (with the right layer of Linux installed) but historically we've seen random dependency/Docker issues that we can't really support. None (as far as I know) of the core committers/PMC use Windows, and nearly all deployments are on some flavor of Linux.

Jun 13 '24 16:06 rusackas

Superset works very well for me (I used the Docker Compose method mentioned in the installation for superset), this issue happens with me when I try to access the proxy of superset on port 9000.

Jun 14 '24 06:06 LuvKaranwal21

Looks like you're also running Windows. I assume this is the crux of the issue.

Jun 14 '24 15:06 rusackas

Maybe generate different things on windows or linux? check these files: on windows: syntax-windows.js.txt on linux: syntax-linux.js.txt

The difference between the two files may be related to ‘react-hot-loader’, I guess

Jun 20 '24 10:06 FFFirer

After looking through the source code of 'react-hot-loader', I decided to comment out the following code to disable react-hot-loader from working.

# /superset-frontend/babel.config.js

module.exports = {
...
  plugins: [
    ...
    // 'react-hot-loader/babel',
  ]
...]

And it works.

But I still haven't found the root cause, just temporarily masked the problem, and it's not clear what the differences between Linux and Windows are causing the inconsistent behavior on this issue.

Jun 20 '24 11:06 FFFirer

After looking through the source code of 'react-hot-loader', I decided to comment out the following code to disable react-hot-loader from working.
# /superset-frontend/babel.config.js

module.exports = {
...
  plugins: [
    ...
    // 'react-hot-loader/babel',
  ]
...]
And it works.

But I still haven't found the root cause, just temporarily masked the problem, and it's not clear what the differences between Linux and Windows are causing the inconsistent behavior on this issue.

This works!

Jun 25 '24 06:06 harrychristianx

After looking through the source code of 'react-hot-loader', I decided to comment out the following code to disable react-hot-loader from working.
# /superset-frontend/babel.config.js

module.exports = {
...
  plugins: [
    ...
    // 'react-hot-loader/babel',
  ]
...]
And it works.

But I still haven't found the root cause, just temporarily masked the problem, and it's not clear what the differences between Linux and Windows are causing the inconsistent behavior on this issue.

This works, and did you found the root cause?

Sep 19 '24 08:09 TejParker

After looking through the source code of 'react-hot-loader', I decided to comment out the following code to disable react-hot-loader from working.
# /superset-frontend/babel.config.js

module.exports = {
...
  plugins: [
    ...
    // 'react-hot-loader/babel',
  ]
...]
And it works.

But I still haven't found the root cause, just temporarily masked the problem, and it's not clear what the differences between Linux and Windows are causing the inconsistent behavior on this issue.

If anyone's experiencing the "hot update failed 😭" error, this also fixed the problem... don't ask me why

Sep 29 '24 22:09 sam-hieken