Question:
I am looking to use the react-select npm package in my project but the latest version allowed in Velo is v4.3.0 which is running on an outdated dependency of React v16 and is causing errors in the dependency tree when I run the wix install command.
The latest version of react-select is v5.8.0 and is using React v18.
What are you trying to achieve:
I need access to the latest version of react-select npm package.
I’ve tried searching for a way to request review of a new NPM package but there is no simple way to make the request.
Additional information:
I need this package version approved as soon as possible.
Thank you
1 Like
Which editor are you using? The ability to use any npm package or version should now be available in Wix Studio.
I am using Editor X. I have setup Wix CLI and am able to install packages from this list using wix install <package-name>.
However the version available for the package I need, react-select, only has v4.3.0 available. I need v5.8.0 as it’s using the most recent version of React.
Since this package has already been approved before, what is the process for having an updated version of it become available?
I see up to version 5.7.7 available:
If I install react 18 with npm and then install react-select it works:
% wix install react@18
react@18 was successfully installed.
✖ Failed to resolve npm dependencies
💡 This is probably a temporary system error and has been logged. Try again shortly.
% wix install react-select
react-select was successfully installed.
However I don’t expect the react-select package to work in EditorX as it seems like it will need DOM access which Wix’s development environment doesn’t provide.
The workaround for this would be using a Custom Element. However for input controls and other elements I’d suggest using the prebuilt Wix components as they’re what Wix’s workflow is designed around.
I plan on using Custom Elements in my project to enable the react-select package.
I tried running wix install react-select in CLI but got this error
% wix install react-select
⠏ Installing react-select@4.3.0...✖ Failed to install npm package react-select. Cause: Command failed with exit code 1: npm install
react-select@4.3.0 -D
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react@undefined
npm ERR! node_modules/react
npm ERR! dev react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from react-select@4.3.0
npm ERR! node_modules/react-select
npm ERR! dev react-select@"4.3.0" 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.
The work around I found was disconnecting my Github repository in order to enable Dev Mode (otherwise it’s disabled as shown in the screenshot)
Once I disconnected my repo, it let me install packages through the UI and I installed react-select v5.7.7.
I then had to reconnect my project to a new repo. All of this just to get the proper package installed 
.
I don’t know if that is a bug or if the design is meant to be that way.
Got it. In that case then since Custom Elements do not have access to their parent page you need to include the packages you need with script declarations like so rather than using a package manager:
<script src="https://www.unpkg.com/react-select@5.8.0/dist/react-select.cjs.js"></script>
Will also need to do the same for any dependencies that react-select has (like react-dom, and react).
Interesting post… (never touched react yet)… 
