CustomGradientPicker GradientPicker component not working

[anver]

Description

I'm creating a new block plugin where I tried to use CustomGradientPicker from @wordpress/components but the component is not rendering and it throws an error

react_devtools_backend.js:2540 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I tried to use GradientPicker which is another Component but that too is not working and shows the same error. I tried to replace it with an InputControl and it works fine. All my imports are correct.

//@ts-ignore
import { GradientPicker } from '@wordpress/components';

type Props = { value: any; onChange: (v: string) => void };

const Gradient: React.FC = ({ value, onChange }) => {
const gradients = [
{
name: 'Vivid cyan blue to vivid purple',
gradient:
'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
slug: 'vivid-cyan-blue-to-vivid-purple',
},
];
return (
<GradientPicker
value="#f00"
onChange={() => true}
gradients={gradients}
/>
);
};

export default Gradient;

Step-by-step reproduction instructions

how to replicate

npx npx create-guten-block my-block
cd my-block
npm install @wordpress/components
npm start

Then inside the edit.js under src directory insert this code

import { __ } from '@wordpress/i18n';
import { CustomGradientPicker } from '@wordpress/components'
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
const gradients = [
{
name: 'Vivid cyan blue to vivid purple',
gradient:
'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
slug: 'vivid-cyan-blue-to-vivid-purple',
},
];
return (
<GradientPicker
value="#f00"
onChange={() => true}
gradients={gradients}
/>
);
}

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

@anver I'd check that GradientPicker is in the version of the components package you're using. It might be that you're currently using an earlier version.

Also there seem to be problems with the code example you provided. It imports CustomGradientPicker but tries to render GradientPicker.

[anver]

@anver I'd check that GradientPicker is in the version of the components package you're using. It might be that you're currently using an earlier version.

Also there seem to be problems with the code example you provided. It imports CustomGradientPicker but tries to render GradientPicker.

Hi @talldan I'm using the latest version and for the imports yes you are right, the imports are wrong but the code looks ok on my computer, it's just there for reference purposes, but you'll see when you create a simple react app and check it.

[talldan]

@anver I tested it out in CodeSandbox and it didn't have any issues:
https://codesandbox.io/s/gradientpickerexample-pgj27

[anver]

This is my component

//@ts-ignore
import { GradientPicker } from '@wordpress/components';

type Props = { value: any; onChange: (v: string) => void };

const Gradient: React.FC<Props> = ({ value, onChange }) => {
	const handleChange = (value: any) => {
		console.log('value: ', value);
	};

	return (
		<div>
			<GradientPicker />
		</div>
	);
};

export default Gradient;

I have the latest version 19.0.5

still getting the same error, tried deleting node_modules folder and compiling fresh but in vain.
other components from the packages are working fine just CustomGradientPicker and GradientPicker is not

@talldan

[talldan]

I tested again in a local project and it still worked, so I definitely don't think this is a bug, but more an issue with your project. Here's the project if you're interested:
https://github.com/talldan/gradient-picker-test

I'd recommend locating the @wordpress/components folder in the node_modules folder and looking at the package.json file to check the version you have installed. Dependencies in node project are unfortunately not always straightforward. It might be that another dependency of yours is requiring an older version of the components package, and npm is resolving to install that. If that's the case I'd recommend updating those other dependencies too.

Anyway, I'll close the issue as I can't reproduce it. Happy to continue to help troubleshoot though, it'll be interesting to see if that test project works for you.