superset-frontend ReferenceError: module is not defined

[tym3515]

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

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.

[dosubot[bot]]

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:

1. 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.

2. 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.

3. 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.

4. Webpack Configuration: For projects using Webpack, adjust your configuration to properly resolve ES modules by setting resolve.mainFields to ['browser', 'module', 'main'].

5. 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).

6. 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** - [RpcIpcMessagePortClosedError](https://github.com/apache/superset/discussions/18334) - [superset-frontend can not run](https://github.com/apache/superset/discussions/18355) - [Not able to run the superset latest version](https://github.com/apache/superset/issues/25624) - [superset-frontend fail run in master branch](https://github.com/apache/superset/issues/20246) - [Handlebars Chart: ReferenceError: exports is not defined](https://github.com/apache/superset/issues/22402) - [superset-frontend/packages/superset-ui-core/package.json](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/package.json) - [superset-frontend/.nvmrc](https://github.com/apache/superset/blob/master/superset-frontend/.nvmrc) - [superset-frontend/webpack.config.js](https://github.com/apache/superset/blob/master/superset-frontend/webpack.config.js)
**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.

[rusackas]

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.

[harrychristianx]

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.

[LuvKaranwal21]

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

[chen-xiaohu]

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

[zhangchengda]

Have you solved your problem? I encountered the same problem

[rusackas]

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.

[LuvKaranwal21]

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

[rusackas]

btw the same installation steps works in linux

What OS are you running?

[LuvKaranwal21]

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

[rusackas]

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.

[LuvKaranwal21]

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.

[rusackas]

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

[FFFirer]

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

[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.

[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!