'ReactQuill' cannot be used as a JSX component.

[pitfritsch]

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?

[maxstue]

I tried the workaround but it didn't fix the problem for ReactQuill. So I also need help fixing it

EDIT: after deduplicating the react types and adding the old types into optionalDependencies, the error was gone "optionalDependencies": { "@types/react": "^17.0.44" },

[dhj0326]

How did you use React-Quill in Next

[maxstue]

I use it in a React+vite app. But that shouldn't matter because the error is a typing error coming from upgrading to React 18 and upgrading the react types aswel

[cullylarson]

I'm getting the same error. I have to dynamically import react-quill because it doesn't play nice when being server-side rendered (it unconditionally accesses some browser globals). Also using Next.js. Also recently started getting the error.

import dynamic from 'next/dynamic';

const ReactQuill = dynamic(
  () => {
    return import('react-quill');
  },
  { ssr: false }
);

// ...

<ReactQuill
  theme="snow"
  modules={quillModules}
  formats={quillFormats}
  onBlur={onBlur}
  onChange={onChange}
  value={value || ''}
/>

Getting this error:

'ReactQuill' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<ReactQuillProps, any, any> | null' is not a valid JSX element.
    Type 'Component<ReactQuillProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<ReactQuillProps, 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("/path/to/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.ts(2786)

If I do a normal import, I don't get the error. So this might be a Next issue.

Actually, looking more closely at the error, it's likely a type mismatch issue.

Confirmed. node_modules/@types/react-transition-group/node_modules/@types/react is on version 18.0.9. My local @types/react is 17.0.39

I couldn't resolve the mismatch. My solution was to @ts-ignore and leave a comment to remove it when we upgrade to React 18.

[josealvaradoo]

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

[JamesIde]

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" } }

[yishay-at-bay]

For me what fixed it was updating @types/react package version I updated to the current version (18.0.28 now) and the error was resolved

[aldy97]

@maxstue Assuming you have got react-quill and Vite working together properly (pure React project, not with Next), may I ask which version of Vite, React and react-quill you are using? Thanks!

[maxstue]

@aldy97 I use these versions in my project

"vite": "^4.2.1",
"@vitejs/plugin-react": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-quill": "^2.0.0"

I don't have any "override" or so defined in my package.json or any special config and it works fine