ScrollableInkTabBar supports extraContent but get error with InkTabBar?

Open

#247 opened on Feb 28, 2020 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 2/5
Estimated time: 1-3 hours
Newbie friendliness: 45/100

Issue type: Bug
Clarity: Mostly clear
Activity status: Stale
Tech stack: react, typescript
Domain: frontend

Research direction

Start at the InkTabBar and ScrollableInkTabBar entry points and compare how each handles the extraContent prop. Reproduce the exception with the two JSX examples, then add regression coverage where the tab-bar tests are located; done means InkTabBar renders extraContent without the invalid-element error.

Written by the indexing model from the issue text.

Description

If I do this:

    <Tabs
      renderTabBar={() => 
        <ScrollableInkTabBar
          onTabClick={onTabClick}
          extraContent={<Button>hi</Button>}
        />
      }
...

I get the button as expected. However, if I do this:

    <Tabs
      renderTabBar={() => 
        <InkTabBar
          onTabClick={onTabClick}
          extraContent={<Button>hi</Button>}
        />
      }
...

I get an exception:

Uncaught Error: 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.
    at createFiberFromTypeAndProps (react-dom.development.js:26629)
    at createFiberFromElement (react-dom.development.js:26652)
    at createChild (react-dom.development.js:14958)
    at reconcileChildrenArray (react-dom.development.js:15232)
    at reconcileChildFibers (react-dom.development.js:15598)
    at reconcileChildren (react-dom.development.js:18089)
    at updateHostComponent (react-dom.development.js:18611)
    at beginWork$1 (react-dom.development.js:20193)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at react-dom.development.js:12199

Dominant language: TypeScript
Stars: 572
Forks: 241
Avg merge: 4d 18h
Merged PRs (30d): 4

Contributor guide

No contributing guide indexed for this repository

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Similar issues

VPullToRefresh.sass ships unlayered CSS — breaks under @layer, unlike every other component Open

S: triage

Difficulty 1/5 Under an hour Newbie friendliness 85/100

vuetifyjs/vuetify#23206 · Opened Sep 22, 2026
`watchlist add` confirmation shows wrong company name for cross-exchange ticker collisions Open

Difficulty 2/5 1-3 hours Newbie friendliness 76/100

gloom-sh/gloomberb#955 · Opened Sep 22, 2026
fix(errors): EHOSTUNREACH from a happy-eyeballs connect is reported as a resolver error (STAMP-80) Open

Difficulty 2/5 1-3 hours Newbie friendliness 90/100

snapshot-labs/stamp#666 · Opened Sep 22, 2026
fix(api): prevent leaderboard SSE heartbeat from starting after disconnect during initial load Open

bug

Difficulty 2/5 1-3 hours Newbie friendliness 75/100

GauravKarakoti/SecureFlow#1070 · 1 comment · Opened Sep 22, 2026
Center language not found button in rtl in change language Open

feature:Languages/Translations good first issue ready Web

Difficulty 2/5 1-3 hours Newbie friendliness 72/100

digitalfabrik/integreat-app#4394 · Opened Sep 22, 2026

More TypeScript issues