Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`yarn create react-app` with @chakra-ui/typescript failing to compile

See original GitHub issue

Bug report

When trying to start a project project from the start with the help of create react-app, the unmodified, fresh project is failing to compile.

To reproduce

Simply type yarn create react-app my-app --template @chakra-ui/typescript and then yarn start into the new project.

System information

Version of @chakra-ui/core: 1.0.0-rc.3
Version of Node.js: v12.14.0

Getting this message:

TypeScript error in /[…]/my-app/src/App.tsx(23,9):
No overload matches this call.
  Overload 1 of 2, '(props: Pick<GridProps, "row" | "ref" | "area" | "p" | "slot" | "style" | "title" | "aria-label" | "key" | "sx" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 491 more ... | "templateAreas"> & Pick<...> & { ...; } & Pick<...>): ReactElement<...> | null', gave the following error.
    Type '{ children: Element[]; minH: string; p: number; direction: string; align: string; justify: string; }' is not assignable to type 'IntrinsicAttributes & Pick<GridProps, "row" | "ref" | "area" | "p" | "slot" | "style" | "title" | "aria-label" | "key" | "sx" | "defaultChecked" | ... 493 more ... | "templateAreas"> & Pick<...> & { ...; } & Pick<...>'.
      Property 'direction' does not exist on type 'IntrinsicAttributes & Pick<GridProps, "row" | "ref" | "area" | "p" | "slot" | "style" | "title" | "aria-label" | "key" | "sx" | "defaultChecked" | ... 493 more ... | "templateAreas"> & Pick<...> & { ...; } & Pick<...>'.
  Overload 2 of 2, '(props: Pick<GridProps, "row" | "ref" | "area" | "p" | "slot" | "style" | "title" | "aria-label" | "key" | "sx" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 491 more ... | "templateAreas"> & Pick<...>): ReactElement<...> | null', gave the following error.
    Type '{ children: Element[]; minH: string; p: number; direction: string; align: string; justify: string; }' is not assignable to type 'IntrinsicAttributes & Pick<GridProps, "row" | "ref" | "area" | "p" | "slot" | "style" | "title" | "aria-label" | "key" | "sx" | "defaultChecked" | ... 493 more ... | "templateAreas"> & Pick<...>'.
      Property 'direction' does not exist on type 'IntrinsicAttributes & Pick<GridProps, "row" | "ref" | "area" | "p" | "slot" | "style" | "title" | "aria-label" | "key" | "sx" | "defaultChecked" | ... 493 more ... | "templateAreas"> & Pick<...>'.  TS2769

    21 |         minH="100vh"
    22 |         p={3}
  > 23 |         direction="column"
       |         ^
    24 |         align="center"
    25 |         justify="center"
    26 |       >

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

ljosberinncommented, Oct 25, 2020

No, sadly its a limitation on CRAs side how templates are retrieved. It will be automatically fixed once v1 is out. See #2303 too.

0reactions

netcoding87commented, Oct 25, 2020

Hey there, I had the same problem after installing chakra-ui using the cra typescript template (npx create-react-app chakra --template @chakra-ui/typescript). In the package.json the versions are as following:

"dependencies": {
    "@chakra-ui/core": "^1.0.0-next.6",
    "@chakra-ui/theme": "^1.0.0-next.6",
    "@chakra-ui/theme-tools": "^1.0.0-next.6",
    "@testing-library/jest-dom": "^5.9.0",
    "@testing-library/react": "^10.2.1",
    "@testing-library/user-event": "^12.0.2",
    "@types/jest": "^25.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-icons": "^3.0.0",
    "react-scripts": "4.0.0",
    "typescript": "^3.9.5",
    "web-vitals": "^0.2.2"
  },

Shouldn’t it be fixed? 🤨