TopAppBar subcomponents failing to import
See original GitHub issueAll of the sub components in the example fail to load with the exception of TopAppBarFixedAdjust. This is my first attempt at using this component, so I am just attempting to get the the example javascript initiation code on this page working. I broke the import apart to see if i could pinpoint what was happening.
import React, { Component } from 'react';
import TopAppBar from '@material/react-top-app-bar';
import {TopAppBarFixedAdjust} from '@material/react-top-app-bar'
import {TopAppBarRow} from '@material/react-top-app-bar'
import {TopAppBarSection} from '@material/react-top-app-bar'
import {TopAppBarTitle} from '@material/react-top-app-bar'
import {TopAppBarIcon} from '@material/react-top-app-bar'
import MaterialIcon from '@material/react-material-icon'
import './App.css';
import '@material/react-top-app-bar/dist/top-app-bar.css';
import '@material/react-material-icon/dist/material-icon.css'
class App extends Component {
render() {
return (
<div>
<TopAppBar>
<TopAppBarRow>
<TopAppBarSection align='start'>
<TopAppBarIcon navIcon tabIndex={0}>
<MaterialIcon hasRipple icon='menu' onClick={() => console.log('click')}/>
</TopAppBarIcon>
<TopAppBarTitle>Miami, FL</TopAppBarTitle>
</TopAppBarSection>
<TopAppBarSection align='end' role='toolbar'>
<TopAppBarIcon actionItem tabIndex={0}>
<MaterialIcon
aria-label="print page"
hasRipple
icon='print'
onClick={() => console.log('print')}
/>
</TopAppBarIcon>
</TopAppBarSection>
</TopAppBarRow>
</TopAppBar>
<TopAppBarFixedAdjust>
My exciting content!
</TopAppBarFixedAdjust>
</div>
);
}
}
export default App;
Error:
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 your code at App.js:20. in App (at src/index.js:7) function.console.(anonymous function) @ index.js:1446 warningWithoutStack @ react.development.js:188 warning @ react.development.js:623 createElementWithValidation @ react.development.js:1785 render @ App.js:19 finishClassComponent @ react-dom.development.js:15276 updateClassComponent @ react-dom.development.js:15231 beginWork @ react-dom.development.js:16221 performUnitOfWork @ react-dom.development.js:20241 workLoop @ react-dom.development.js:20282 renderRoot @ react-dom.development.js:20362 performWorkOnRoot @ react-dom.development.js:21319 performWork @ react-dom.development.js:21229 performSyncWork @ react-dom.development.js:21203 requestWork @ react-dom.development.js:21058 scheduleWork @ react-dom.development.js:20871 scheduleRootUpdate @ react-dom.development.js:21566 updateContainerAtExpirationTime @ react-dom.development.js:21592 updateContainer @ react-dom.development.js:21660 push…/node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:21973 (anonymous) @ react-dom.development.js:22125 unbatchedUpdates @ react-dom.development.js:21448 legacyRenderSubtreeIntoContainer @ react-dom.development.js:22121 render @ react-dom.development.js:22196 ./src/index.js @ index.js:7 webpack_require @ bootstrap:781 fn @ bootstrap:149 0 @ serviceWorker.js:135 webpack_require @ bootstrap:781 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (3 by maintainers)
Top GitHub Comments
the documentation is for a new version than what is available on npm.
@alvaroarenas I’ve switched it back to master, as I suspect more people are looking at the docs than opening PRs. Is this what your request is?