question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TopAppBar subcomponents failing to import

See original GitHub issue

All 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:closed
  • Created 5 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
tomazscommented, Mar 14, 2019

the documentation is for a new version than what is available on npm.

0reactions
moog16commented, Mar 22, 2019

@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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jetpack compose TopAppBar gives a call error - Stack Overflow
I get an error when I write the following in Jetpack compose TopAppBar. I think it's a rudimentary mistake, but I don't know....
Read more >
The repo stylesheet 'resetting' my parent component's material ...
Hi, I went through the codebase and was not able to identify the source of the issue and correct it if needed. I...
Read more >
Modifier - Android Developers
Composables that accept modifiers to be applied to a specific subcomponent foo should name the parameter fooModifier and follow the same guidelines above ......
Read more >
next link function components cannot be given refs. attempts ...
Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of ForwardRef . If I put...
Read more >
@material/react-top-app-bar - npm
Styles. with Sass: import '@material/react-top-app-bar/index.scss'; ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found