Struggling with Forge UI components other than "Text"

Forge
1

Hi, I have just worked through the “hello world” examples etc and am trying to branch out a little bit from that - I am failing at the first hurdle! I have imported the “Tag” component UI and am trying to use it as part of the Fragment… however it doesnt seem to be recognised as a valid component - I must be missing something obvious but cant see it, please help!

Error Message
There was an error invoking the function - Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Fragment:
in App
in IssuePanel
in

Error: Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Fragment:
in App
in IssuePanel
in
at /tmp/tunnel7A5Jrx72s7P4u/index.js:29056:11
at asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28995:29
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:29053:23
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28995:29
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:29053:23
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28920:31

index.jsx code


import api from "@forge/api";
import ForgeUI, { render, Fragment, Text, IssuePanel, useProductContext, useState, Tag, TagGroup } from "@forge/ui";

const fetchCommentsForIssue = async (issueId) => {
  const res = await api
    .asApp()
    .requestJira(`/rest/api/3/issue/${issueId}/comment`);

  const data = await res.json();
  return data.comments;
};

const App = () => {
  const context = useProductContext();
  const [comments] = useState(async () => await fetchCommentsForIssue(context.platformContext.issueKey));

  console.log(`Number of comments on this issue: ${comments.length}`);

  return (
    <Fragment>
      <Text>Hello world!</Text>
      <Text>
        Number of comments on this page: {comments.length}
      </Text>
    <Tag text="tag 1" />
  </Fragment>
  );
};

export const run = render(
  <IssuePanel>
    <App />
  </IssuePanel>
);
1 Like
2

Hi @AidenMarriott,

Can you please post which version of @forge/ui is in your package.json?

3

I am having the exact same issue.
This is my simple index.jsx:

import ForgeUI, { render, Fragment, Text, SpacePage, Heading } from '@forge/ui';

const App = () => {
  return (
    <Fragment>
      <Heading size="large">Title</Heading>
    </Fragment>
  );
};

export const run = render(
  <SpacePage>
    <App />
  </SpacePage>
);

Package.json:

{
  "name": "forge-ui-starter",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "lint": "./node_modules/.bin/eslint src/**/* || npm run --silent hook-errors",
    "hook-errors": "echo '\\x1b[31mThe build failed because a Forge UI hook is being used incorrectly. Forge UI hooks follow the same rules as React Hooks but have their own API definitions. See the Forge documentation for details on how to use Forge UI hooks.\n' && exit 1"
  },
  "devDependencies": {
    "eslint": "^6.5.1",
    "eslint-plugin-react-hooks": "^2.1.2"
  },
  "dependencies": {
    "@forge/api": "^1.1.0",
    "@forge/ui": "^0.9.0"
  }
}

Error:

Something went wrong
There was an error invoking the function - Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Fragment:
	in App
	in SpacePage

Error: Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Fragment:
	in App
	in SpacePage
    at index.js:2115:11
    at asyncMap (index.js:2029:30)
    at index.js:2050:35
    at asyncMap (index.js:2029:30)
    at index.js:2112:29
    at asyncMap (index.js:2029:30)
    at index.js:2050:35
    at Object.exports.processAuxElement (index.js:2131:49)
    at index.js:1980:49
    at Reference.value (bootstrap.js:1:8804)
4

Hi @Brian1, thanks for raising this issue. I can reproduce it and am looking into it now.

5

Hi @Brian1, you’ll need to install the latest @forge/ui package to use Heading — npm install @forge/ui@latest. I’ll raise feedback on the error message and the templates are out of date so I’ll get that fixed.

3 Likes
6

Thanks for the quick response and solution!

7

I have the same issue using the avatar component. If I remove the avatar components it work.
I am trying to add a avatar inside a row
How should I use the avatar component?

in Row
	in Table
	in Fragment
	in OldPage
	in ProjectPage

I am using “@forge/ui”: “^1.10.5”

Code1,

import ForgeUI, { Table,useState, Head, Cell,render, Fragment, Text, IssuePanel, Row,useProductContext,
  Avatar,AvatarStack,useEffect } from '@forge/ui';
  import {getTracking} from '../data/rest-client'

  export const OldPage = () => {

  const [history] = useState(() => getTracking("XXXX-275"));
  /*const [history, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      setData(getTracking("ABC-12312"));
    }})*/
  return (
    <Fragment>
      <Table>
    <Head>
      <Cell>
        <Text>Usuario</Text>
      </Cell>
      <Cell>
        <Text>Último avance</Text>
      </Cell>
      <Cell>
        <Text>Fecha</Text>
      </Cell>
      <Cell>
        <Text>Tiempo</Text>
      </Cell>
    </Head>
   
      {history.map(p=>(
         <Row>
         <Cell>
             <Avatar accountId={p.author.accountId} /> 
         </Cell>
        <Cell>
          <Text>{p.avance}</Text>
        </Cell>
        <Cell>
        <Text>{p.startDate}</Text>
      </Cell>
      <Cell>
        <Text>{p.tiempo}</Text>
      </Cell>
      </Row>
      ))}
      
    
    </Table>
    
    </Fragment>
  );
};

Index

type or paste code here