Gutenberg Blocks - _.contains is not a function

Are you developing custom blocks for Gutenberg in Wordpress, using a custom Webpack configuration, and getting this error? Did you configure the Dependency Extraction Webpack Plugin correctly?

From the plugin's read me:

Install the module:

npm install @wordpress/dependency-extraction-webpack-plugin --save-dev

Then use the plugin as you would other webpack plugins:

// webpack.config.js
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );

module.exports = {
  // …snip
  plugins: [ new DependencyExtractionWebpackPlugin() ],
};

I've had to set up Webpack to build assets for Wordpress sites a few times, and then some time in the future had to add Gutenberg blocks into the build process. The thing is when you have Webpack configured, you don't need to change the config that often so I tend to forget the pitfalls over time. When I searched around on the internet, I didn't come across anything to suggest that I'm missing this Webpack plugin given this error. I've ran into this problem more than once, and I'm annoyed, so I'm putting this out here in case someone else needs it or I run into this error again.

I speculate that most people developing custom Gutenberg blocks will never run into this error, because they just use the example configuration from the Wordpress tutorials or set it up through npx. But if you're adding blocks to an existing build process like I have, it can be easy to forget this plugin. Everything will build just fine, but then Wordpress complains in the console in the editor and it doesn't work.

I hope I may have saved you a headache if you've stumbled upon this, and have fun developing Gutenberg blocks!