Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ToolbarItem Component Returns Undefined #26840

Closed
TeamDNK opened this issue Nov 9, 2020 · 1 comment
Closed

ToolbarItem Component Returns Undefined #26840

TeamDNK opened this issue Nov 9, 2020 · 1 comment
Labels
[Type] Help Request Help with setup, implementation, or "How do I?" questions.

Comments

@TeamDNK
Copy link

TeamDNK commented Nov 9, 2020

Describe the bug
The ToolbarItem component throws an error when it is called. For simplicity, I am using the Button component as the rendered component. I have tested the other toolbar components such as ToolbarGroup and ToolbarButton and they have worked perfectly, but for some reason the ToolbarItem returns undefined.

// button.js

import { Button } from '@wordpress/components'
import { Toolbar, ToolbarItem } from '@wordpress/components';

function ToolbarItemButton() {
    return (
        <Toolbar label="Options">
            <ToolbarItem as={ Button } onClick={() => alert('Success.')}>Experiment</ToolbarItem>
        </Toolbar>
    )
}

export default ToolbarItemButton
// index.js

import domReady from '@wordpress/dom-ready';
import ToolbarItemButton from './button.js'
import { render } from '@wordpress/element';

domReady( function() {
    render(<ToolbarItemButton />, document.querySelector('#toolbar-button') )
})

Error Message

[Error] Invariant Violation: Element 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 `ToolbarItemButton`.
	commitRootImpl (react-dom.js:22842)
	commitRootImpl
	unstable_runWithPriority (react.js:2820)
	commitRoot (react-dom.js:22552)
	commitRoot
	scheduleUpdateOnFiber (react-dom.js:21559)
	scheduleRootUpdate (react-dom.js:24457)
	(anonymous function) (react-dom.js:25101)
	unbatchedUpdates (react-dom.js:21825)
	legacyRenderSubtreeIntoContainer (react-dom.js:25100)
	(anonymous function) (index.js:9326)

Editor version (please complete the following information):

  • WordPress version: 5.5.3
  • Gutenberg default

Desktop (please complete the following information):

  • OS: macOS Catalina 10.15.7
  • Browser: Safari 14
@talldan
Copy link
Contributor

talldan commented Nov 10, 2020

@TeamDNK In WordPress 5.5.3 the component was still experimental (__experimentalToolbarItem). ToolbarItem will be made stable in WordPress 5.6 - #23316.

@talldan talldan closed this as completed Nov 10, 2020
@talldan talldan added the [Type] Help Request Help with setup, implementation, or "How do I?" questions. label Nov 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Help Request Help with setup, implementation, or "How do I?" questions.
Projects
None yet
Development

No branches or pull requests

2 participants