sb-children-block built with npm run build doesn't work

[bobbingwide]

I packaged up my 3 new plugins sb-children-block, sb-parent-block and sb-breadcumbs-block with each of them having been built with npm run build and loaded them to oik-plugins.

The trouble is, that the sb/children-block ( which was the first block I built ) does not work in the editor. It produces

This block has encountered an error and cannot be previewed.

There's a message in the console

react.js?ver=16.9.0:260 Warning: React.createElement: type is invalid -- 
expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, 
or you might have mixed up default and named imports.

Check the render method of `edit`.

then a massive stack starting

in edit
    in Unknown (created by WithToolbarControls(Component))
    in WithToolbarControls(Component) (created by WithInspectorControl(WithToolbarControls(Component)))

Additionally, the sb/parent-block stops working. I get

Your site doesn't include support for the "sb/parent-block" block. 
You can leave this block intact or remove it entirely.

[bobbingwide]

Workaround

When the block is built using npm start or npm run dev then it works. And the sb/parent-block gets registered too.

Investigation

I had a look at: https://stackoverflow.com/questions/42813342/react-createelement-type-is-invalid-expected-a-string and tried a few things.

Tried	Result
npm run update-packages	No better
change edit: edit, in index.js to edit,	No better
change import statement in index.js from edit to {edit}	Build fails
change edit function name back to Edit	No better

[bobbingwide]

I reduced the problem to the simplest. It occurs when using sb-breadcrumbs-block and sb-children-block and when they're both built using npm run build.

sb-breadcrumbs-block	sb-children-block	Result
dev	dev	works
dev	build	works
build	dev	works
build	build	This block has encountered an error and cannot be previewed.

Note; sb-breadcrumbs-block doesn't yet use <InspectorControls>

[bobbingwide]

sb-parent-block and sb-children-block are similar. I also tried recreating the problem with these two plugins, adding logic to the sb/parent-block to be similar to sb/children-block. Each of the 4 combinations worked.

sb-children-block	sb-parent-block	Result
dev	dev	works
dev	build	works
build	dev	works
build	build	works

[bobbingwide]

So then I tried sb-breadcrumbs-block with sb-parent-block ( the modified version ).

sb-breadcrumbs-block	sb-parent-block	Result
dev	dev	works
dev	build	works
build	dev	works
build	build	This block has encountered an error

The modified version includes in edit. I'll remove it from sb/parent-block and retest with sb-breadcumbs-block.

[bobbingwide]

I discovered a few hours ago that if I remove this section of the code from sb/children-block the block works when built with npm run build.

<InspectorControls>
            <PanelBody>
                <PanelRow>
                    <TextControl label={__("Depth",'sb-children-block')} value={attributes.depth} onChange={onChangeDepth} />
                </PanelRow>
            </PanelBody>
        </InspectorControls>

[bobbingwide]

I've made no progress attempting to fix my code so that it works when everything's built using npm run build.
I've tried following the documentation on wordpress.org. Sometimes things seemed a little better, but that was probably when something was built for debugging. Other times they got worse. I've learnt about the <Disabled> component, which comes in handy when you don't want to accidentally click on a link. But I haven't been able to confirm exactly how to import InspectorControls and ServerSideRender or from where to import them. I didn't have this problem with my original builds of oik-blocks, oik and other plugins, all of which use the const method rather than import. e.g.

const {
    InspectorControls,
} = wp.blockEditor;
const {
    ServerSideRender,
} = wp.editor;

The things I don't understand are:

• How should InspectorControls be imported?
• How should ServerSideRender be imported?
• When do I need to run npm install @wordpress/package-name
• If I believe there's a bug in the npm run build process, where do I raise the issue?

[bobbingwide]

As you can see I raised an issue against Gutenberg. I don't think I'm going to find a solution to the problem of delivering a production version without help. And I don't think I'm going to get the help right away. Therefore, my pragmatic workaround is to build the plugin using npm start and deliver that version.

[bobbingwide]

I've documented the workaround in https://github.com/WordPress/gutenberg/issues/24321#issuecomment-668513051 Add a webpack.config.js file that sets config.output.jsonpFunction = 'unique-code';

While this is not provided as standard this workaround needs to be applied to each of single block plugin that's going to be delivered as production built version. Which should be all of them, except perhaps, esnext-example.