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. https://github.com/ahmadawais/create-guten-block/blob/b8fbdbcf2f1b9db4918eb933d630777027ed3de8/packages/cgb-scripts/config/externals.js#L20-L34 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 #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.