Using the <MediaUpload /> component outside the editor. select('core') is null

Question

I am using the WordPress components in the admin panel of my plugin and trying to make an image upload button. The button works fine and allows me to select an image, but when I select an image, I get a error in the console::

An error occurred while running 'mapSelect': Cannot read properties of null (reading 'getMedia') The error may be correlated with this previous error: TypeError: Cannot read properties of null (reading 'getMedia')

My component:

import { useSelect } from '@wordpress/data';
import { MediaUpload } from '@wordpress/media-utils';
import { Button, ResponsiveWrapper } from '@wordpress/components';

export default ({ onSelect, id }: { onSelect: (id: number) => void; id?: number }) => {
  const media = useSelect(
    (select) => {
      return id ? select('core').getMedia(id) : undefined;
    },
    [id]
  );

  const onSelectMedia = (selectedMedia) => {
    onSelect(selectedMedia.id);
  };

  return (
      <MediaUpload
        onSelect={onSelectMedia}
        allowedTypes={['image']}
        value={id}
        render={({ open }) => (
          <Button onClick={open} variant="secondary">
            {!id && 'Select image'}
            {media && (
              <ResponsiveWrapper naturalWidth={media.media_details.width} naturalHeight={media.media_details.height}>
                <img src={media.source_url} alt={media.alt} />
              </ResponsiveWrapper>
            )}
          </Button>
        )}
      />
  );
};

console.log(select('core')) in useSelect returns null.

What can I do to make retrieving the image information work? Similar code in the Gutenberg editor works...

Answer 1

I hope you found the answer, but for anyone else wondering: You need to tell WordPress what scripts to enqueue. When you compile your React code, at least if you use WordPress' native solution, a file named [filename].assets.php is automatically created in the build folder. When you register the script for the options page in your plugin file, you can add this to the dependencies, like so:

$assets = require PLUGIN_PATH . 'build/[filename].asset.php';

wp_enqueue_script(
  'options-page-script',
  PLUGIN_URL . '/build/[filename].js',
  $assets['dependencies'],
  '1.00',
  true
);

Alternatively you can keep track of the handles of the scripts, and add them manually, like so:

wp_enqueue_script(
  'options-page-script',
  PLUGIN_URL . '/build/[filename].js',
  ['wp-components', 'wp-element'], // <-- Change this to what you need
  '1.00',
  true
);

For the media uploader to work, you might also need to run wp_enqueue_media(), but I'm not sure.