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

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...

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...

• plugin-development
• uploads
• block-editor
• media-library

Share Improve this question edited Mar 18, 2022 at 12:39 Rafaucau asked Mar 18, 2022 at 12:33 RafaucauRafaucau 17388 bronze badges 1

• I'm having the same issue. Did you end up finding a solution? – donnapep Commented Mar 31, 2022 at 1:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.