Module not found when creating Visualization Plugins

[jpchev]

Bug description

i've gone through the documentation to create a custom plugin
https://superset.apache.org/docs/contributing/howtos/#creating-visualization-plugins
but I get the following error

Module not found: Error: Can't resolve 'superset-plugin-chart-hello-world' in '/app/superset-frontend/src/visualizations/presets'

when running this command

npm i -S /tmp/superset-plugin-chart-hello-world

btw, this command

yo @superset-ui/superset

gives the following error

Running npm install for you to install the required dependencies.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.2" from the root project
npm ERR!   peer react@">=16.0.0" from @ant-design/[email protected]
npm ERR!   node_modules/@ant-design/icons
npm ERR!     @ant-design/icons@"^4.7.0" from [email protected]
npm ERR!     node_modules/antd
npm ERR!       peer antd@"^4.9.4" from @superset-ui/[email protected]
npm ERR!       node_modules/@superset-ui/chart-controls
npm ERR!         peer @superset-ui/chart-controls@"*" from the root project
npm ERR!   47 more (@ant-design/react-slick, @emotion/react, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

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]

I found a similar closed issue that might be relevant to your problem: Module not found Error Building custom viz plugins in superset. This issue was closed by a pull request that removed old visualization plugin documentation, which might indicate that the documentation you followed could be outdated ^[1].

To address the React version conflict you're encountering, you can try the following steps:

1. Align React Versions: Ensure that your project's React version matches the peer dependencies required by Superset's visualization plugins. According to the peer dependencies, React should be version ^17.0.2 ^[2].

2. Use --legacy-peer-deps: When running npm install, use the --legacy-peer-deps flag to bypass peer dependency conflicts:

   npm install --legacy-peer-deps

3. Check package.json: Verify that your package.json in both the Superset project and your plugin project specifies compatible versions of React and other dependencies.

4. Reinstall Dependencies: After making changes to your package.json, remove node_modules and package-lock.json, then reinstall dependencies:

   rm -rf node_modules package-lock.json
   npm install --legacy-peer-deps

These steps should help resolve the dependency conflicts and allow you to proceed with creating and importing your custom visualization plugin.

To continue talking to Dosu, mention @dosu.

---

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

[jpchev]

@villebro could you please put me on the right direction?

[villebro]

@jpchev we're currently hard at work to improve the extension architecture (see #31932), as the current plugin system has multiple issues. I would almost advise against creating new visualization plugins until the new framework has been rolled out. But if you do want to work with the existing system, I recommend using 4.1.1 as the base, as that should have React 16 which is required by the plugin peer dependencies.