Search code examples
node.jsreactjsautodesk-forge

How do I use "forge-apis" package in react app?


I am trying to use the forge-apis package with the line const ForgeSDK = require('forge-apis'); but importing the package and adding this line causes about 40 errors to pop up upon running the application, starting with

Module not found: Error: Can't resolve 'fs' in ...\node_modules\forge-apis\src

Followed by 4 different issues of ...\node_modules\lru-memoizer\src\sync missing files

And then the remaining errors all come up like this:

ERROR in ./node_modules/forge-apis/src/api/ObjectsApi.js 40:16-31
Module not found: Error: Can't resolve 'path' in '...\node_modules\forge-apis\src\api'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

These errors persist even if I install the packages that it claims are missing, any idea how I'd fix this?

Here's my package.json in case the issue is here:

{
  "name": "onetwinvis",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "assert": "^2.0.0",
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "eslint-config-react-app": "^7.0.1",
    "forge-apis": "^0.9.6",
    "fs": "^0.0.1-security",
    "https-browserify": "^1.0.0",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "react": "^18.2.0",
    "react-date-picker": "^10.0.3",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "stream-browserify": "^3.0.0",
    "url": "^0.11.0",
    "util": "^0.12.5",
    "web-vitals": "^2.1.4",
    "webpack-cli": "^5.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Solution

  • The forge-apis package is intended to work on the server side part with Node.js. React is a library to build the client side. You should not use this package with React.

    One of the main reason of not using this package on the client side or make direct request from the client to Autodesk API's is to protect your app's credentials safe.

    However, if you really want to access the API's on the client side, you can take a look at this package : forge-server-utils. This is an unofficial alternative to forge-apis, but there is an experimental client side that you can run on the browser (except for the authentication).