Dev-server page isn't rendered

[goldjee]

Bug description

After installing all dependencies and running dev-server, I get broken page at http://localhost:9000.

I've found the same very old issue #12040. The author supposed that it is specific to Chrome. But both Chrome and Firefox show broken page. Also it's worth mentioning that, as far as I see, there are no related errors in terminal or console output.

How to reproduce the bug

1. Install Superset without Docker

source venv/bin/activate
pip install -r requirements/development.txt
pip install -e .

cd superset-frontend
npm ci

2. Run Superset

export SUPERSET_CONFIG_PATH=./docker/pythonpath_dev/superset_config_local.py
superset run -p 8088 --with-threads --reload

3. Run development server

npm run dev-server

4. Navigate to http://localhost:9000

Screenshots/recordings

Superset version

master / latest-dev

Python version

3.11

Node version

18 or greater

Browser

Chrome

Additional context

node.js version: 18.20.4 (same error on 22.5.1)

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• 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]

To address the issue of the broken page and garbled text when running the Superset development server at http://localhost:9000, you can follow these steps to ensure the correct character encoding is set:

1. Set Environment Variables:
   Ensure that the environment variables for character encoding are set correctly. Add the following lines to your shell configuration file (e.g., .bashrc, .zshrc):

   export LC_ALL=en_US.UTF-8
   export LANG=en_US.UTF-8

   After adding these lines, reload your shell configuration:

   source ~/.bashrc  # or source ~/.zshrc

2. Check Flask Configuration:
   Ensure that Flask is configured to use the correct character encoding. Add the following line to your superset_config.py file:

   JSON_AS_ASCII = False

3. Restart the Servers:
   After making these changes, restart both the Flask server and the Webpack dev server:

   # Restart Flask server
   superset run -p 8088 --with-threads --reload --debugger --debug
   
   # Restart Webpack dev server
   npm run dev-server

These steps should help resolve the issue of garbled text due to incorrect character encoding ^[1].

To continue talking to Dosu, mention @dosu.

[goldjee]

@dosu Nope, it didn't work.

[monsterkai233]

不，它没有用。

I tried the same thing and it didn't work

[dosubot]

To fix the issue of a broken page and garbled text when running the Superset development server at http://localhost:9000, ensure that the Webpack dev server is running in parallel with the Flask server. Follow these steps:

1. Run the Flask server on port 8088:

   superset run -p 8088 --with-threads --reload --debugger --debug

2. Run the Webpack dev server on port 9000:

   npm run dev-server

3. Access the application via http://localhost:9000 in your web browser.

This setup ensures that the front-end assets are served correctly by the Webpack dev server while backend requests are proxied to the Flask server ^[1].

To continue talking to Dosu, mention @dosu.

[monsterkai233]

@goldjee hi bro, I use safari and it's working fine

[goldjee]

@monsterkai233 Hi! Good tip, Safari works. It seems very odd to me as I thought that as Chrome and Safari both use Webkit, they would behave similarly. It's worth mentioning I haven't seen stuff like that with other React projects. So it's probably related to something in the Superset repo. Webpack, maybe?

Regarding Safari, I'm much more used to Chrome dev tools. It would be great if maintainers could take a look.

@rusackas @michael-s-molina

[michael-s-molina]

Hi @goldjee. I also noticed this problem but haven't had the time to take a look. I hope other maintainers can fix it. In the meantime, I discovered that it works on Chrome if you use the IP address instead of localhost.

[michael-s-molina]

Let me tag @geido @rusackas as the leaders of dev experience group.

[goldjee]

Hi @goldjee. I also noticed this problem but haven't had the time to take a look. I hope other maintainers can fix it. In the meantime, I discovered that it works on Chrome if you use the IP address instead of localhost.

Hi! Thank you for the suggestion. Just tried http://127.0.0.1:9000 and had the same result :(

[michael-s-molina]

Not 127.0.0.1, your internal LAN IP such as 192....

Your IP will be in the output of npm run dev-server

[goldjee]

Ah, I see. Yep, internal LAN IP worked.

[geido]

I have got around that by downgrading to node 16.20. Superset isn't heavily tested on Node 18.

[michael-s-molina]

I have got around that by downgrading to node 16.20. Superset isn't heavily tested on Node 18.

@geido I'm able to reproduce this issue with Node v16.20.2

[rusackas]

Node 20 doesn't seem to magically fix this. Still looking for a good fix...

[geido]

Setting COMPRESS_REGISTER = False in superset config has helped some people getting around this issue.

[rusackas]

Fixed! Closing this thanks to #30034