Cannot see custom chart of Hello World

[myselfuser1]

Bug description

I need to create a custom chart in apache superset. I followed the below steps. I am using Docker
git clone https://github.com/apache/superset
cd superset
git checkout tags/4.1.1

docker compose -f docker-compose-image-tag.yml up
cd superset-frontend
sudo npm i -g yo
cd packages
cd generator-superset
npm i && npm link

Open new terminal tab, go to the root of macOS

cd /tmp
mkdir superset-plugin-chart-ville
cd superset-plugin-chart-ville
yo @superset-ui/superset

Then I entered the following details

Package name: superset-plugin-chart-ville
Plugin name: Ville Plugin
Description: Ville's awesome viz plugin
What type of chart would you like? Regular chart
npm ci && npm run build

Open new tab and cd to superset-frontend in the superset repo
sudo npm i -S /tmp/superset-plugin-chart-ville

Open the source code of superset in vscode , go to superset-frontend => src => visualizations => presets => MainPreset.js
import { SupersetPluginChartVille } from 'superset-plugin-chart-ville';

and add the following to the array that's passed to the plugins property: ```
new SupersetPluginChartVille().configure({
key: 'ext-hello-world',
}),

`npm run dev-server`

On localhost:8088 when I try to search for Ville in charts I don’t see it


Now when i try to search for my chart i don't see it

### Screenshots/recordings

<img width="1430" alt="Image" src="https://github.com/user-attachments/assets/face2021-a17b-4bc4-85bb-c7bd8c77cb2d" />

### Superset version

master / latest-dev

### Python version

3.9

### Node version

16

### 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]]

I found some similar discussions that might help you resolve the issue with your custom "Hello World" chart not appearing in Apache Superset:

1. Building Custom Viz Plugins in Superset - This discussion might provide insights into common issues faced when building custom visualization plugins ^[1].

2. Unable to install custom visualization plugin in superset - This thread discusses issues related to installing custom visualization plugins, which might be relevant to your situation ^[2].

3. Module not found Error Building custom viz plugins in superset - This closed issue was resolved by correcting a clerical error in the import statement. Ensure that the module name in your import statement matches the correct module name as indicated in the logs ^[3].

To ensure your custom "Hello World" chart is visible, verify the following steps:

• Make sure you have correctly built and installed your plugin using the commands:

  npm i --force
  npm run build

• Confirm that you have added the plugin to the MainPreset.js file correctly:

  import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world';
  new SupersetPluginChartHelloWorld().configure({ key: 'ext-hello-world' }),

• Ensure your Docker setup is running correctly with:

  docker compose up --build

Double-check each step to ensure everything is configured correctly, and make sure all services are running as expected.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[myselfuser1]

@dosu ok i am running my superset on http://localhost:8088/ via docker and then i went to superset-frontend folder and ran npm run dev-server and all i see is this

On localhost:8088, i see my superset properly

but i cannot find my viz plugin

[rusackas]

What version of Superset are you running? There was an issue several months ago with the garbled characters like in your screenshot, but it was resolved in one release or another.

[dosubot[bot]]

When running Superset locally using Docker Compose for development and using npm run dev-server, you should access the UI through port 9000, not port 8088. Port 8088 may serve an older build, so switching to port 9000 should resolve the issue with your custom visualization plugin not appearing ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[myselfuser1]

@rusackas @dosubot Superset version 4.1.1

[dosubot[bot]]

Hey @myselfuser1! I see you're sharing the Superset version, but I'm here to help with technical questions, bug fixes, and engineering knowledge. If you think I should have more to say about this, feel free to reach out to the Dosu Team. They'll know what to do! 😊

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}