How to import the imagesLoaded and Masonry libs that come with WP in a Gutenberg block?

When developing a block with @wordpress/scripts, wp-scripts uses @wordpress/dependency-extraction-webpack-plugin to allow you to import dependencies from WordPress by replacing the import statements with references to the global variables loaded by the enqueued scripts.

For example, this:

import { useEffect } from '@wordpress/element'

Will become:

const { useEffect } = wp.element;

And wp-element will be added as a dependency to the enqueued script to ensure that wp.element is available.

This process works when importing the modules listed in the documentation for the dependency extraction plugin:

• @wordpress/*
• jquery
• lodash-es
• lodash
• moment
• react-dom
• react

For any other bundled libraries you would need to enqueue them as a dependency manually and reference the global variable as you would if you were using the library anywhere else.