search

jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.41k stars 1.16k forks source link

Type '{}' is not assignable to type 'ReactNode' #1260

Open aarona opened 2 years ago

aarona commented 2 years ago

Full Error message:

'Editor' cannot be used as a JSX component.
  Its instance type 'Editor' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("/home/.../node_modules/@types/react-draft-wysiwyg/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

Im importing the component like this:

import { Editor } from "react-draft-wysiwyg";

Here is my package.json file:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": {
    "@apollo/react-components": "^3.1.3",
    "@apollo/react-hoc": "^3.1.3",
    "@apollo/react-hooks": "^3.1.3",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.2",
    "@mui/material": "^5.6.3",
    "@mui/styles": "^5.6.2",
    "@types/draft-js": "^0.11.9",
    "@types/draftjs-to-html": "^0.8.0",
    "@types/jwt-decode": "^3.1.0",
    "@types/lodash": "^4.14.182",
    "@types/luxon": "^2.3.1",
    "@types/react-dom": "^18.0.0",
    "@types/react-draft-wysiwyg": "^1.13.4",
    "@types/react-router-dom": "^5.1.3",
    "@types/yup": "^0.29.13",
    "apollo-boost": "^0.4.7",
    "apollo-link-token-refresh": "^0.2.7",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "formik": "^2.1.4",
    "graphql": "^14.6.0",
    "html-react-parser": "^1.4.12",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.20",
    "luxon": "^2.3.2",
    "notistack": "^2.0.4",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-draft-wysiwyg": "^1.14.7",
    "react-router-dom": "^6.3.0",
    "react-scripts": "3.4.1",
    "typescript": "^4.6.3",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "node server.js",
    "dev-start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "gen": "graphql-codegen --config codegen.yml"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.12.2",
    "@graphql-codegen/introspection": "^1.12.2",
    "@graphql-codegen/typescript": "1.12.2",
    "@graphql-codegen/typescript-operations": "1.12.2",
    "@graphql-codegen/typescript-react-apollo": "1.12.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^17.0.25",
    "@types/react": "^18.0.8",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "@typescript-eslint/parser": "^5.20.0"
  }
}
aarona commented 2 years ago

After a little more investigating it looks like this issue may be coming from @types/draft-js. When I import that Editor component from directly from that package, I'm still getting a similar error.

ZodiacWind commented 2 years ago

types/draft-j

I encountered the same error. How did you fix the error finally? Thanks!

OdapX commented 2 years ago

this shouldnt be closed , I have the same error , I even changed the types.d.ts and still nothing!!

aarona commented 2 years ago

types/draft-j

I encountered the same error. How did you fix the error finally? Thanks!

Sorry for this very late reply!

I was doing a major upgrade of my js packages and this wasn't working so I started using another WYSIYG editor, during the time I was in the middle of swapping this one out for another, a newer version of this (or related) package(s) was pushed and I was able to come back to this editor with no issue.

Below, is my projects current package.json file that is working for me right now:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": {
    "@apollo/client": "^3.6.2",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.2",
    "@mui/material": "^5.6.4",
    "@mui/styles": "^5.6.2",
    "@types/draft-js": "^0.11.9",
    "@types/draftjs-to-html": "^0.8.0",
    "@types/jwt-decode": "^3.1.0",
    "@types/lodash": "^4.14.182",
    "@types/luxon": "^2.3.2",
    "@types/react-dom": "^18.0.3",
    "@types/react-draft-wysiwyg": "^1.13.4",
    "@types/react-router-dom": "^5.1.3",
    "@types/yup": "^0.29.13",
    "apollo-link-error": "^1.1.13",
    "apollo-link-token-refresh": "^0.4.0",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "eslint-config-react-app": "^7.0.1",
    "formik": "^2.2.9",
    "graphql": "^16.4.0",
    "html-react-parser": "^1.4.12",
    "immutable": "^4.0.0",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.20",
    "luxon": "^2.3.2",
    "notistack": "^2.0.4",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-draft-wysiwyg": "^1.14.7",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "node server.js",
    "dev-start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "gen": "graphql-codegen --config codegen.yml"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/plugin-syntax-flow": "^7.14.5",
    "@babel/plugin-transform-react-jsx": "^7.14.9",
    "@graphql-codegen/cli": "^2.6.2",
    "@graphql-codegen/introspection": "^2.1.1",
    "@graphql-codegen/typescript": "^2.4.9",
    "@graphql-codegen/typescript-operations": "^2.3.6",
    "@graphql-codegen/typescript-react-apollo": "^3.2.12",
    "@types/node": "^17.0.31",
    "@types/react": "^18.0.8",
    "@typescript-eslint/eslint-plugin": "^5.22.0",
    "@typescript-eslint/parser": "^5.22.0",
    "eslint": "^8.1.0",
    "graphql-tag": "^2.0.0"
  }
}
aarona commented 2 years ago

this shouldnt be closed , I have the same error , I even changed the types.d.ts and still nothing!!

You're correct. I closed this prematurely as I felt I was barking up the wrong tree but you're correct, this does need to be fixed. Reopening...

OdapX commented 2 years ago

I have removed node_modules and lock files and re run npm install, and it got solved . My guess is that lock files used a wrong version or sth, but yeah that's how I got through