The externals list is outdated and doesn't support all the available Gutenberg components.

[codebymikey]

Bug Report

The list of externals the externals.js is not up to date is missing various components that might be used.

create-guten-block/packages/cgb-scripts/config/externals.js

Lines 20 to 34 in b8fbdbc

	const externals = [
	'components',
	'api-fetch',
	'edit-post',
	'element',
	'plugins',
	'editor',
	'block-editor',
	'blocks',
	'hooks',
	'utils',
	'date',
	'data',
	'i18n',
	].reduce(

e.g.

import { Path, SVG } from '@wordpress/primitives';

export default (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v3.5h-15V5c0-.3.2-.5.5-.5zm8 5.5h6.5v3.5H13V10zm-1.5 3.5h-7V10h7v3.5zm-7 5.5v-4h7v4.5H5c-.3 0-.5-.2-.5-.5zm14.5.5h-6V15h6.5v4c0 .3-.2.5-.5.5z" />
	</SVG>
);

Imports the Path and SVG objects from the node_modules (if it exists) rather than replacing it with wp.primitives.

Expected Behavior

The import should be replaced with wp.primitives in the exported output.

Proposed solution(s)

• Update the list manually based off the results of Object.keys(wp) on https://wordpress.org/gutenberg/, or list of folders here.
• Port the @wordpress/dependency-extraction-webpack-plugin plugin to support webpack 3.
• Upgrade to webpack 4. see 📦 NEW: Upgrade webpack and @babel/core #164

[codebymikey]

The updated list should be

const externals = [
	'a11y',
	'annotations',
	'api-fetch',
	'autop',
	'blob',
	'block-directory',
	'block-editor',
	'block-library',
	'block-serialization-default-parser',
	'blocks',
	'components',
	'compose',
	'core-data',
	'data',
	'data-controls',
	'date',
	'deprecated',
	'dom',
	'dom-ready',
	'edit-post',
	'editor',
	'element',
	'escape-html',
	'format-library',
	'hooks',
	'html-entities',
	'i18n',
	'is-shallow-equal',
	'keyboard-shortcuts',
	'keycodes',
	'media',
	'media-utils',
	'notices',
	'plugins',
	'primitives',
	'priority-queue',
	'redux-routine',
	'rich-text',
	'server-side-render',
	'shortcode',
	'token-list',
	'url',
	'viewport',
	'warning',
	'wordcount',
]

And can be generated from running the following on the https://wordpress.org/gutenberg/ console:

\n\t\'' + Object
	.keys( wp )
	.filter( k => !['Uploader','apiRequest','receiveEmbedMessage','template'].includes(k) && (wp[k].__esModule || typeof wp[k] === 'function') )
	.map( ( k ) => k.replace( /([a-z])([A-Z])/g, ( match ) => match[ 0 ] + '-' + match[ 1 ].toLowerCase() ) )
	.sort()
	.join( '\',\n\t\'' ) + '\',\n';

[chriscamacho]

I've just hit this with the compose component.

I'm new to this so don't know how to add this dependence on an in progress plugin, to I need to instead clone the repo but then how do I use it ?

Some basic documentation on this would be most helpful and appreciated.