Error: Element ref was specified as a string (image_popover) but no owner was set.

[azizmashkour]

I am trying to add this editor to my React app without success and I am not able to understand the issue:

import Dante from "Dante2";
import { convertFromRaw } from "draft-js";

const Editor = () => {
  const [content, setContent] = useState(null);
  const editorRef = React.useRef();

  useEffect(() => {
  }, []);

  const save_handler = (editorContext, content) => {
    setContent(content);
  };

  const classes = useStyles();
  let danteProps = {
    data_storage: {
      url: "xxx",
      save_handler: save_handler,
    },
    upload_url: "http://localhost:9292/uploads/new",
    store_url: "http://localhost:3333/store.json",
    el: editorRef,
  };

  let contentState = {};
  try {
    contentState = convertFromRaw(content);
  } catch (e) {}

  return (
    <div className={classes.heroContent}>
      <Dante ref={editorRef} content={content}/>
    </div>
  );
};

export default Editor;

I am using:
"Dante2": "^0.5.0-rc5" and "react": "latest".

[azizmashkour]

And I am getting this error:

Error: Element ref was specified as a string (image_popover) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://reactjs.org/link/refs-must-have-owner for more information.

[michelson]

use version 0.5.0-rc26, sorry the inconvenience Atte. Miguel Michelson Martinez www.vadb.org <http://vadb.org>

…

On Mon, Jan 11, 2021 at 10:03 PM Mashkour ***@***.***> wrote: And I am getting this error: 1. You may be adding a ref to a function component 2. You may be adding a ref to a component that was not created inside a component's render method 3. You have multiple copies of React loaded See https://reactjs.org/link/refs-must-have-owner for more information. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#255 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAC5SA3LCLSIJTAZ7TAX2LSZONUTANCNFSM4V6ODE7Q> .

[azizmashkour]

Yes, I did but it seems to not be working with the latest version of react which removed emotion-theming library and using @emotion/react instead. How can I upgrade it please?

[michelson]

which version of react are you using ?

…

On Mon, Jan 11, 2021 at 10:35 PM Mashkour ***@***.***> wrote: Yes, I did but it seems to not be working with the latest version of react which removed emotion-theming library and using @emotion/react instead. How can I upgrade it please? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#255 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAC5SCLII5XCLQYLRFTU6LSZORNDANCNFSM4V6ODE7Q> .

[azizmashkour]

"Dante2": "^0.5.0-rc26" and "react": "17".

[0xc00010ff]

Also getting the error with latest Dante2 and React17

Error: `emotion-theming` has been removed and all its exports were moved to `@emotion/react` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/react'`.

[PrimeObjects]

got same issue, React 17, Dante2, Hook, please help!! thanks!

Error: Element ref was specified as a string (editor) but no owner was set. This could happen for one of the following reasons:

1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
   See https://reactjs.org/link/refs-must-have-owner for more information.

[davidsmorais]

Samesies 👆

[LucasTrombim]

Same problem that @PrimeObjects has. ☝🏼

[michelson]

please try version 0.5.0-rc26 <https://www.npmjs.com/package/Dante2/v/0.5.0-rc26> let me know how it goes El vie, 7 may 2021 a las 15:38, Lucas Trombim ***@***.***>) escribió:

…

Same problem that @PrimeObjects <https://github.com/PrimeObjects> has. ☝🏼 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#255 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAC5SALXUUJXZC3HPEUWDDTMQ6VFANCNFSM4V6ODE7Q> .