Declare local path alias for forge builder

Forge Forge Platform and Tools
1

Hi I have created a little module with some custom types and interfaces that I would like to reuse in multiple locations. It is located in a lib directory in the root of my app and I would like to create an alias to reference it from within forge. I have configured typescript to find my directory but I can’t get the forge cli to find it. I tried adding a local path to the dependencies in package.json but that did not work out. I also tried installing the module-alias package as described here but that didn’t make a difference… Has somebody done something like this before?

2

Hey @MichaelIlewicz! Thanks for reaching out! Could you please provide me with a bit more context?

  • What version of the CLI are you using?

  • What type of app are you trying to create?

  • Are you using UI Kit or Custom UI?

Thanks!! Looking forward to hearing from you.

3

Hi @MatthewFreeman,
Thanks for the quick reply, of course here some more context,

  • forge version 2.0.6
  • I am building a custom field type extension. I am using Typescript for all files
  • I am using both custom UI (edit and config view) and the UI Kit (for the field view). So far I have only tried to set up the UI Kit
4

Hey @MichaelIlewicz! Thanks for your patience with us getting back to you.

The forge-cli should only use your app configuration when compiling you app, agnostic of whether you are using javascript or typescript. For this reason I believe that this might be a misconfiguration issue with either tsconfig.json, .eslintrc or package.json somewhere.

I have created a small model custom-field-type-ui-kit extension app using the same environment you have provided that compiles successfully using forge deploy. I hope that I have properly captured the same directory structure you have described, if I have misunderstood anything please correct me.

.
├── README.md
├── lib
│   └── interfaces.ts
├── manifest.yml
├── package-lock.json
├── package.json
├── src
│   ├── context-config.tsx
│   ├── edit.tsx
│   ├── index.tsx
│   └── view.tsx
└── tsconfig.json
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": {
    "@types/node": "^16.11.13",
    "@types/react": "^17.0.37",
    "@typescript-eslint/parser": "^5.7.0",
    "eslint": "^6.5.1",
    "eslint-plugin-react-hooks": "^2.1.2",
    "typescript": "^4.5.4"
  },
  "dependencies": {
    "@forge/ui": "^0.15.0"
  }
}
.eslintrc 
{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "sourceType": "module",
      "ecmaVersion": 2017,
    },
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
    },
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [".js", ".jsx", ".ts", ".tsx"]
        }
      }
    }
}
tsconfig.json 
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "sourceMap": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["dom", "es2017"],
    "types": ["node", "react"],
    "baseUrl": "./",
    "allowJs": true,
    "jsx": "react",
    "jsxFactory": "ForgeUI.createElement",
    "paths": {
      "@lib/*": [
        "lib/*"
      ],
    }
  },
  "include": ["./src/**/*", "./lib/*"]
}
Example Alias Usage 
import ForgeUI, { CustomField, Text } from "@forge/ui";
import { Hi } from "@lib/interfaces";

export const View = () => {
  const test: Hi = "hi";

  return (
    <CustomField>
      <Text>Hello, World!</Text>
    </CustomField>
  );
};

I hope this helps!

If this doesn’t resolve your issue, could you provide us with your directory structure, manifest.yml with sensitive info redacted and tsconfig.json if necessary?

Looking forward to hearing from you!

1 Like
5

Hi, It’s been a while but seems relevant as it doesn’t currently work. Not sure if it’s related to UI Kit 2 but the import aliases are no longer resolved when bundling in forge deploy.