When you import storage from @forge/api, React apps break

Forge Forge Custom UI and UI kit (beta)
#1

Similar to the issue described here: Forge/api Cannot read properties of undefined (reading 'fetch')

When you import storage from @forge/api, React apps break:

image
image2880×1280 276 KB

The error message in the console is: Cannot read properties of undefined (reading ‘fetch’)

Here’s how you reproduce this error from scratch, using the forge CLI:

  • run forge create

  • give the app a name, lets say test

  • select Custom UI category

  • select jira-project-page template

  • go to test/static/hello-world

  • run: npm i

  • run: npm run build

  • go to test/

  • run: forge deploy

  • run: forge install

visit the app in your jira site, see everything works fine.

  • go back to test/static/hello-world

  • run: npm add @forge/api

  • open: static/hello-world/src/App.js

  • add: import { storage } from "@forge/api"; to the top of your file

  • underneath the invoke call in useEffect, add:

storage.set("test", "someValue").then(
      storage.get("test").then((value) => {
        console.log("value: ", value);
      })
    );

  • run: npm run build

  • go back to test/

  • run: forge deploy

visit the app in your jira site, see app is broken.

static package.json file:

{
  "name": "jira-project-page-custom-ui-static",
  "version": "0.1.2",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@atlaskit/css-reset": "^6.0.1",
    "@forge/api": "^2.6.1",
    "@forge/bridge": "^2.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "react-scripts": "^4.0.3"
  }
}

root package.json file:

{
  "name": "jira-project-page-custom-ui",
  "version": "1.0.2",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.2.0"
  },
  "dependencies": {
    "@forge/resolver": "^1.4.3"
  }
}

manifest.yml:

modules:
  jira:projectPage:
    - key: test-hello-world-project-page
      resource: main
      resolver:
        function: resolver
      title: test
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/hello-world/build
app:
  id: ari:cloud:ecosystem::app/f1b7c9f8-c4c2-49b6-93af-4c356bee951a
1 Like
#2

Unfortunately you can’t use @forge/api directly from the custom ui. You’ll need to use the @forge/bridge package to call a function which in turn can call the @forge/api.

3 Likes