Upgrading caused type mismatch in react types

[m0rdreck]

Hello, I have one error with Editor component.

Type error: '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 'ReactElement<{ ref: RefObject; id: string; }, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<{ ref: RefObject; id: string; }, string | JSXElementConstructor>' but required in type 'ReactPortal'.

import React from "react"
import { Editor } from "@tinymce/tinymce-react"

const TinyMceEditField = ({ onChange, value, id }) => {
  const handleEditorChange = (editor) => onChange(editor)

  let tinyMCE
  const myFileBrowser = (callback, win, field_name) => {
    if (tinyMCE != null) {
      const cmsURL = window.location.origin + "/admin/filesBrowsers?type=" + field_name.filetype
      let searchString = window.location.search
      if (searchString.length < 1) {
        searchString = "?"
      }

      var body = document.body,
        html = document.documentElement

      var height = Math.max(
        body.scrollHeight,
        body.offsetHeight,
        html.clientHeight,
        html.scrollHeight,
        html.offsetHeight
      )

      var width = Math.max(
        body.scrollWidth,
        body.offsetWidth,
        html.clientWidth,
        html.scrollWidth,
        html.offsetWidth
      )

      tinyMCE.windowManager.openUrl(
        {
          title: "Explorateur de fichiers",
          url: cmsURL + searchString,
          width: width * 0.8,
          height: height * 0.8,
          buttons: [],
          onMessage: function (api, data) {
            if (data.mceAction === "customAction") {
              callback(data.url, { text: data.title, title: data.title, alt: data.name })
              api.close()
            }
          },
        },
        {
          window: win,
          input: field_name,
          resizable: "yes",
          inline: "yes",
          editor_id: tinyMCE.editorId,
        }
      )
    }
    return false
  }

  return (
    <div>
      <Editor
        id={id}
        apiKey={process.env.NEXT_PUBLIC_TINY_MCE_KEY}
        init={{
          image_title: true,
          height: 500,
          menubar: true,
          spellchecker_language: "fr",
          language: "fr_FR",
          language_url: "/tinymce/fr_FR.js",
          file_picker_callback: myFileBrowser,
          plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table paste code help wordcount ",
          ],
          toolbar:
            "undo redo | formatselect | bold italic forecolor backcolor | " +
            "alignleft aligncenter alignright alignjustify  lineheight | " +
            "bullist numlist outdent indent | removeformat | help",
          lineheight_formats: "0.05 0.15 0.25 0.5 1 1.1 1.2 1.3 1.4 1.5 2 2.5 3 3.5 4 4.5 5 5.5 6",
          block_formats:
            "Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre",
          color_map: [
            "#BFEDD2",
            "Light Green",
            "#FBEEB8",
            "Light Yellow",
            "#F8CAC6",
            "Light Red",
            "#ECCAFA",
            "Light Purple",
            "#C2E0F4",
            "Light Blue",

            "#2DC26B",
            "Green",
            "#F1C40F",
            "Yellow",
            "#E03E2D",
            "Red",
            "#B96AD9",
            "Purple",
            "#3598DB",
            "Blue",

            "#169179",
            "Dark Turquoise",
            "#E67E23",
            "Orange",
            "#BA372A",
            "Dark Red",
            "#843FA1",
            "Dark Purple",
            "#236FA1",
            "Dark Blue",

            "#ECF0F1",
            "Light Gray",
            "#CED4D9",
            "Medium Gray",
            "#95A5A6",
            "Gray",
            "#7E8C8D",
            "Dark Gray",
            "#34495E",
            "Navy Blue",

            "#000000",
            "Black",
            "#ffffff",
            "White",

            "#dc3545",
            "Rouge Axa",
            "#034ea2",
            "Bleu Axa",
            "#ffcb05",
            "Jaune Axa",
          ],
          relative_urls: false,
          convert_urls: false,
          remove_script_host: false,
          setup: function (editor) {
            tinyMCE = editor
          },
          content_style:
            "ul{margin: 0;}p{margin: 0;}h1{font-size:2em;font-weight:700;margin:0}h2{font-size:1.5em;font-weight:700;margin: 0;color: #516190;}h3{font-size:1.17em;font-weight:700;margin:0}h4{font-size:1em;font-weight:700;margin:0}h5{font-size:.83em;font-weight:700;margin:0}h6{font-size:.67em;font-weight:700;margin: 0}",
        }}
        value={value}
        onEditorChange={handleEditorChange}
      />
    </div>
  )
}

export default TinyMceEditField

Thank for futur help.

[exalate-issue-sync]

Ref: INT-2848

[dellasys]

I got this issue and managed to solved it. In my case, my local machine is using npm and my docker is using yarn. I changed my docker script to use npm and also upgrade my local machine node version from 14 to 16.
Hope it does give you some clues.

[m0rdreck]

Hello @dellasys, i try with node 16.14.2 but same error.

[PierluigiGreto]

Hello, same issue here. I have tried to update node but same error. Do you know other workaround? Thank you

[dellasys]

Have you tried delete node_modules and npm install ?

[PierluigiGreto]

Yes, after moving from yarn to npm it is now working. Thank you!

[przucidlo]

This problem occurs if you haven't migrated to the newest version of React. The solution is to tell your package manager to enforce the same versions of @types/react and @types/react-dom packages, in all dependencies that require them.

In the case of npm you have to add the following properties to package.json:

"scripts": {
    "preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions",
},
"resolutions": {
  "@types/react": "17.0.6",
  "@types/react-dom": "17.0.5"
}

[tiny-james]

Another possibility is that the yarn.lock or package-lock.json needs to be regenerated because multiple versions of the react libraries and types are being included.

In the case of yarn I would normally fix this sort of problem by deleting the node_modules folder and yarn.lock file followed by re-running yarn install to regenerate both.

I don't believe this is an actual problem with the tinymce-react repository though so I will convert this issue into a discussion so people can still see it.