Atlaskit Form Generic Type does not work

Hi all,

I’m working on a React Typescript project (Forge Custom UI), the Form declaration with type does not work for me:

interface FormData {
  name: string;
}

<Form<FormData> onSubmit={submit}>
  {({ formProps }) => (
    // The details has been omitted
  )}
</Form>

The error in the compiler:
image

I’m using "react": "^16.13.1" and "typescript": "^3.9.10".

Can someone help me to identify the problem, thank you!

Hey @nhac.tat.nguyen! Thanks for the question.

Hm, I believe that that particular error is a linting error from eslint and not actually a compiler error. For this reason I would assume that there is a misconfiguration in your .eslintrc or tsconfig.json? I have managed to create a local app using the FormData type you have provided that compiles and is deployed via forge deploy. I could be wrong however.

Here are my config files that work!

.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"]
        }
      }
    }
}
package.json dependencies
{
  "dependencies": {
    "@atlaskit/css-reset": "^6.0.1",
    "@atlaskit/form": "^8.4.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^5.0.0"
  },
  "devDependencies": {
    "@types/node": "^17.0.0",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@typescript-eslint/parser": "^5.7.0",
    "eslint": "^8.4.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "typescript": "^3.9.10"
  }
}
tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "sourceMap": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["dom", "es2017"],
    "types": ["node", "react"],
    "baseUrl": "./",
    "allowJs": true,
    "jsx": "react",
  },
  "include": ["./src/**/*"]
}

I hope this helps!

If the issues persist, could I get you to share the above files so we can try and recreate the issue locally?

Thanks!

1 Like

Hi @MatthewFreeman, thanks a lot for helping me.

Looks like I’m missing the .eslintrc.json for my static directory (since there is already this .eslintrc file in the parent directory of the Forge app.

But now, whenever I create a new .eslintrc.json for my static directory, there are a lot of conflicting problems, see my project structure visualize below:

App
 |- src (Forge Source)
 |   |- index.ts
 |
 |- static (React App)
 |   |-src
 |   |  |- index.tsx
 |   |- .eslintrc.json // This file is conflicting with the one in the parent.
 |   |- package.json
 |   |- tsconfig.json
 |
 |- .eslintrc.json
 |- manifest.yml
 |- package.json
 |- tsconfig.json

Do you have any example project, where we have a React app as Custom UI, and both are using Typescript and ESLint?