Code renders in Dev (start) mode - with an Minified React error #130 in production build

[Bysander]

• Npm version 6.14.8
• WP 5.4.2
• No GB plugin
• Block creation via npx @wordpress/create-block
• OS Windows 10 - unfortunately

Recently I have been having issues adding extra wordpress components into my block. First found with <Panel> component (i think) more recently with any of the Icon components. I will attach a slightly shortened version of the code below as many blocks are ok within the file.

In start mode watching - all works fine - no errors reported - once the block is built for production there is:
Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Translating to
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Find code below - commented out lines show solutions tried - all with same issue.

index.js

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

import './style.scss';

/**
 * Internal dependencies
 */
import * as saver from './save';
import * as editor from './edit';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
 */
registerBlockType( 'fp/solutions-block-card-dropdown', {
	title: __( 'Solutions Dropdown', 'fp-solutions-block' ),
	description: __( 'Solution Dropdown Section', 'fp-solutions-block' ),
	category: 'layout',
	keywords: [ 'Card Solutions' ],
	icon: 'arrow-down-alt2',
	parent: [ 'fp/solutions-block-card' ],

	/**
	 * Optional block extended support features.
	 */
	supports: {
		// Removes support for an HTML mode.
		html: false,
	},

	/**
	 * @see ./edit.js
	 */

	edit: editor.dropdownEdit,

	/**
	 * @see ./save.js
	 */
	save: saver.dropdownSave,
} );

package.json

{
	"name": "solutions-block",
	"version": "1.0.0",
	"description": "Floating expandable blocks with flexible gutenburg content",
	"author": "Wordpress Squad",
	"main": "build/index.js",
	"scripts": {
		"build": "wp-scripts build",
		"format:js": "wp-scripts format-js",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"start": "wp-scripts start",
		"packages-update": "wp-scripts packages-update"
	},
	"devDependencies": {},
	"dependencies": {
		"@wordpress/block-editor": "^4.3.3",
		"@wordpress/components": "^10.0.5",
		"@wordpress/icons": "^2.4.0",
		"@wordpress/scripts": "^12.1.1",
		"prettier": "npm:wp-prettier@^1.18.2"
	}
}

edit.js

import { Icon } from '@wordpress/components';

// import { Dashicon } from '@wordpress/components';
// import { Icon, info } from '@wordpress/icons';
// import { info } from '@wordpress/icons';

const TEMP = [ [ 'core/list' ] ];

export const dropdownEdit = () => {
	const hidden = {
		fontSize: 'small',
		color: 'grey',
		marginTop: 0,
		marginBottom: '-20px',
	};

	// const MyIcon = () => <Icon icon="info-outline" className="fp-class" />;

	return (
		<div className={ 'fp-solutions-block-dropdown' }>
			<p style={ hidden } className={ 'fp-help-dropdown' }>
				(Dropdown)
				<Icon icon={ "info-outline" } />
				{ /* <Dashicon icon="info-outline" /> */ }
				{ /* { MyIcon } */ }
				{ /* <Icon icon={ 'info-outline' } /> */ }
				{ /* <Icon icon={ MyIcon } /> */ }
				{ /* <Icon icon={ info } /> */ }
			</p>
			<div className={ 'dropdown-help-info' }>
				<p>
					There should be one main bullet point with sub-bullets for
					the dropdown content
				</p>
			</div>
			<InnerBlocks
				allowedBlocks={ [ 'core/list' ] }
				templateLock={ 'all' }
				template={ TEMP }
			/>
		</div>
	);
};

I've spent nearly 2 days trying to put 1 stupid dashicon into a block - there must be something I'm missing - or a bug with it??

[Bysander]

Not sure if this is related - but I have also found that some components installed by the npx command aren't re-installed if you npm install again in the plugin folder... none of the format or lint npm commands work again - without adding the line - above in package.json. ("prettier": "npm:wp-prettier@^1.18.2") It seems like the package.json / lock isn't actually an accurate version of what's used.

I have to re-install when switching between branches as I need to delete the node_modules folder to avoid Visual Studio analysing 100,000 files for changes - my work laptop nearly crashes otherwise.

[Bysander]

This issue has been traced back to #24321