[Bug] Compiled with problems: 'ReactQuill', 'GitHubButton', 'ErrorMessage'.

[permanar]

Version

v1

Reproduction link

https://localhost:3000/

Operating System

macOS Monterey v12.3

Device

MacBook Pro (14-inch)

Browser & Version

Version 101.0.4951.64 (Official Build) (arm64)

Steps to reproduce

1. 'npm install' or 'yarn'
2. 'npm run start' or 'yarn start'.

   What is expected?

   Running smoothly, I guess?

   What is actually happening?

   So actually, I just literally bought this template like a SEC ago and been trying to run it on my local. And, I got direct error just by installing and tried to run it.

First error, it said NO TYPESCRIPT module found. It's WEIRD since this is a TS project but, why there's no typescript dependency? But okay, I was not really into it so it was simply fixed by a simple 'yarn add typescript -D'.

But then i run 'yarn start', it show me another error again.

Compiled with problems: ERROR in src/components/MDEditor/index.tsx:39:8 TS2786: 'ReactQuill' cannot be used as a JSX component. Its instance type 'ReactQuill' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/Users/permanar/Downloads/material-dashboard-2-pro-react-ts-v1.0.0/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

TS2786: 'GitHubButton' cannot be used as a JSX component. Its instance type 'GitHubButton' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/Users/permanar/Downloads/material-dashboard-2-pro-react-ts-v1.0.0/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

TS2786: 'ErrorMessage' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<ErrorMessageProps, any, any>' is not a valid JSX element. Type 'Component<ErrorMessageProps, any, any>' is not assignable to type 'Element | ElementClass'. Type 'Component<ErrorMessageProps, any, any>' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/Users/permanar/Downloads/material-dashboard-2-pro-react-ts-v1.0.0/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

---

I don't know why but, the process of getting started has already getting annoying. It's not 'easy' at all.

---

Solution

Additional comments

[permanar]

Hi,

Has anyone have any idea about this particular issues?

Screenshot:

[pksung1]

React 18 @types make this issue. I fixed my react, react-dom type version.

Add this code on package.json.

  ...
  "resolutions": {
    "@types/react": "17.0.14",
    "@types/react-dom": "17.0.14"
  }

Delete node_modules, yarn.lock.

Install dependencies use yarn.

yarn install

---

https://classic.yarnpkg.com/en/docs/selective-version-resolutions/ https://blog.logrocket.com/upgrading-react-18-typescript/#react18-and-definitely-typed

[permanar]

Hey @pksung1,

Thank you so much. It's working man. I also got another error and easily solved it by this helpful answer: https://stackoverflow.com/a/71579750.

So anyway, does this mean you're downgrading your React version to 17 instead because we use the version 17 of @types?

[pksung1]

@permanar oh sorry i read lete comment yes. this project library make on react 17. but when install dependencies, can see @types/react18 on yarn.lock file.

As a result, the libraries of this project follow react18 types, and errors occur from libraries that do not support react18 yet.

yarn.lock

but today i tried install package, didn't see 'ReactQuill', 'GitHubButton', 'ErrorMessage'. error.

Please let me know if my explanation is wrong :cry:

[sajadevo]

Hey everyone,

I've updated the product to v2.2.0 and this issue is fixed.

Regards, Sajad