'ReactQuill' cannot be used as a JSX component.

Hello there!

I’ve been using React Quill with NextJs for a while, but suddenly, today, I got this error:

'ReactQuill' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<ComponentProps, any, any> | null' is not a valid JSX element. Type 'Component<ComponentProps, any, any>' is not assignable to type 'Element | ElementClass | null'. Type 'Component<ComponentProps, 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("C:/Users/Pedro/workspace/ubistart/la-moda-portal/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.ts(2786)

I’m trying everything, but without solution, someone can help me?

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:6

Top GitHub Comments

4reactions

josealvaradoocommented, May 15, 2022

It’s an issue with react, after the release of react 18 version, I’ve solved it adding resolution property into the package.json

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

You have to replace YOUR_CURRENT_REACT_VERSION by the tag, for example 17.0.2

0reactions

JamesIdecommented, Nov 18, 2022

Solutions listed above not working. Has completely derailed the deployment of a project using this package.

Import in component import ReactQuill from “react-quill”; return (<><ReactQuill value={fields.body} onChange={handleEditor} name="body" /></>) Declaring module in index.d.ts declare module “react-quill”;

Error in Vercel build logs: Module not found: Error: Can't resolve 'react-quill' in '/vercel/path0/client/src/pages/articles' 08:01:57.249

{ "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@tanstack/react-query": "^4.13.0", "@tanstack/react-query-devtools": "^4.13.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.11.68", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "@types/react-router-dom": "^5.3.3", "axios": "^1.1.3", "bootstrap": "^5.2.2", "dotenv": "^16.0.3", "html-react-parser": "^3.0.4", "react": "^18.2.0", "react-bootstrap": "^2.6.0", "react-dom": "^18.2.0", "react-hook-form": "^7.38.0", "react-hot-toast": "^2.4.0", "react-icons": "^4.6.0", "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", "typescript": "^4.8.4", "web-vitals": "^2.1.4", "zustand": "^4.1.3" }, "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" ] }, "devDependencies": { "autoprefixer": "^10.4.12", "postcss": "^8.4.18", "tailwindcss": "^3.2.1" }, "resolutions": { "@types/react": "17.0.2", "@types/react-dom": "17.0.2" } }