search

facebookarchive / draft-js

A React framework for building text editors.
https://draftjs.org/
MIT License
22.56k stars 2.64k forks source link

Bug- Uncaught Invariant Violation: editorNode.firstChild is not an HTMLElement #2611

Open Heet1996 opened 4 years ago

Heet1996 commented 4 years ago

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When I select or type anything on DraftJS editor I get below error. If I use the same code in a separate project then everything is working as expected.

image

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/gmertk/e61z7nfa/.

When I select or type anything on DraftJS editor I get below error. If I use the same source code in a separate project then everything is working as expected. I highly suspect this issue is due to some package in my current project which is clashing with draftJS editor.

Below is my package JSON file.

    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "antd": "^3.26.5",
    "array-move": "^2.2.1",
    "axios": "^0.19.0",
    "bootstrap": "^4.4.0",
    "bootstrap-daterangepicker": "^3.0.5",
    "color-rgba": "^2.1.1",
    "commentssdk": "file:../Comments/CommentsSDK",
    "compressorjs": "^1.0.6",
    "firebase": "^7.14.2",
    "html-parse-stringify": "^1.0.3",
    "html2canvas": "^1.0.0-rc.5",
    "i18next": "^19.0.2",
    "immutability-helper": "^3.0.1",
    "jquery": "^3.4.1",
    "js-video-url-parser": "^0.4.0",
    "mb-sketch-ruler": "^1.2.0-dev.11",
    "moment": "^2.24.0",
    "node-sass": "^4.13.1",
    "prop-types": "^15.7.2",
    "qrcode.react": "^1.0.0",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-bootstrap-daterangepicker": "^4.1.0",
    "react-color": "^2.17.3",
    "react-contenteditable": "^3.3.3",
    "react-dom": "^16.12.0",
    "react-draggable": "^4.2.0",
    "react-file-drop": "^0.2.8",
    "react-hoverbox": "^1.0.847",
    "react-i18next": "^11.2.3",
    "react-iframe": "^1.8.0",
    "react-image-crop": "^8.6.2",
    "react-input-range": "^1.3.0",
    "react-input-select": "^1.0.3",
    "react-lottie": "^1.2.3",
    "react-nestable": "^1.2.2",
    "react-redux": "^7.1.3",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.0",
    "react-select": "^3.0.8",
    "react-sortable-hoc": "^1.10.1",
    "react-tagsinput": "^3.19.0",
    "react-text-selection-popover": "^1.3.2",
    "react-vis": "^1.11.7",
    "reactjs-popup": "^1.5.0",
    "recharts": "^1.8.5",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-query-sync": "^0.1.10",
    "redux-saga": "^1.1.3",
    "sanitize-filename": "^1.6.3",
    "socket.io-client": "^2.3.0",
    "styled-components": "^4.4.1",
    "sweetalert": "^2.1.2",
    "sweetalert2": "^9.10.0",
    "test-react": "file:../Comments/comments-ui",
    "validate-color": "^1.0.3"
  }
 "devDependencies": {
    "draft-js": "^0.11.7",
    "draft-js-mention-plugin": "^3.1.5",
    "draft-js-plugins-editor": "^3.0.0",
    "emoji-mart": "^3.0.0",
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-standard": "^4.0.1",
    "react-debounce-input": "^3.2.2"
  }

What is the expected behavior?

It shouldn't clash due to other packages.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

"draft-js": "^0.11.7", "draft-js-mention-plugin": "^3.1.5", "draft-js-plugins-editor": "^3.0.0",

Browser- Chrome
OS- Windows 10
Heet1996 commented 4 years ago

1321 This is the same issue I am getting

szepgergo commented 3 years ago

Hello, were you able to find a solution? I'm getting the same error with

    "@draft-js-plugins/buttons": "^4.1.0",
    "@draft-js-plugins/editor": "^4.1.0",
    "@draft-js-plugins/static-toolbar": "^4.1.0",
    "@emotion/cache": "11.0.0-next.12",
    "@emotion/css": "11.0.0-next.12",
    "@emotion/react": "11.0.0-next.12",
    "@emotion/server": "11.0.0-next.12",
    "@emotion/styled": "11.0.0-next.12",
    "@next/bundle-analyzer": "^9.1.4",
    "@stripe/stripe-js": "^1.11.0",
    "@types/node": "^13.11.0",
    "@unly/utils": "^1.0.3",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "color-scales": "^3.0.2",
    "cookies": "^0.8.0",
    "cross-env": "^6.0.3",
    "date-fns": "^2.11.1",
    "draft-js": "^0.11.7",
    "draft-js-export-markdown": "^1.4.0",
    "draft-js-import-markdown": "^1.4.0",
    "faker": "^4.1.0",
    "fslightbox-react": "^1.5.0",
    "gsap": "^3.2.6",
    "html-react-parser": "^1.2.4",
    "i18next": "^19.8.2",
    "i18next-http-backend": "^1.0.21",
    "isomorphic-unfetch": "^3.0.0",
    "jquery": "^3.4.1",
    "js-base64": "^2.5.2",
    "js-cookie": "^2.2.0",
    "keen-slider": "^5.4.0",
    "leaflet": "^1.7.1",
    "lodash.clone": "^4.5.0",
    "lodash.get": "^4.4.2",
    "lodash.isempty": "^4.4.0",
    "lodash.omit": "^4.5.0",
    "lodash.remove": "^4.7.0",
    "logrocket": "^1.0.7",
    "next": "^10.0.5",
    "next-cookies": "^1.1.3",
    "next-google-fonts": "^1.2.1",
    "next-pwa": "^3.1.4",
    "next-svgr": "0.0.2",
    "next-useragent": "^2.3.0",
    "nextjs-progressbar": "0.0.8",
    "node-sass": "^4.14.1",
    "polished": "^4.0.5",
    "react": "^16.13.1",
    "react-compare-slider": "^2.0.2",
    "react-cookie-consent": "^6.0.0",
    "react-copy-to-clipboard": "^5.0.2",
    "react-device-detect": "^1.17.0",
    "react-dom": "^16.13.1",
    "react-i18next": "^11.8.3",
    "react-id-swiper": "^4.0.0",
    "react-lazy-hydration": "0.0.11",
    "react-leaflet": "^3.0.5",
    "react-load-script": "0.0.6",
    "react-loading-skeleton": "^2.1.1",
    "react-markdown": "^4.3.1",
    "react-multi-carousel": "^2.6.2",
    "react-number-format": "^4.4.1",
    "react-phone-input-2": "^2.13.8",
    "react-redux": "^7.2.0",
    "react-responsive-carousel": "^3.2.9",
    "react-reveal": "^1.2.2",
    "react-share": "^4.1.0",
    "react-slick": "^0.27.11",
    "react-sortable-hoc": "^2.0.0",
    "react-spinners": "^0.9.0",
    "react-stomp": "^4.3.0",
    "react-text-mask": "^5.4.3",
    "react-toastify": "^6.0.9",
    "react-transition-group": "^4.4.1",
    "recharts": "^1.8.5",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "schema-typed": "^1.5.1",
    "swiper": "^6.4.5",
    "swr": "^0.2.3",
    "text-mask-addons": "^3.8.0"

On Chrome 89.0.4389.128 / macOS Big Sur 11.2.3