Skip to content
This repository has been archived by the owner on May 24, 2021. It is now read-only.

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

Open
azizmashkour opened this issue Jan 12, 2021 · 10 comments

Comments

@azizmashkour
Copy link

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
Copy link
Author

azizmashkour commented Jan 12, 2021

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
Copy link
Owner

michelson commented Jan 12, 2021 via email

@azizmashkour
Copy link
Author

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
Copy link
Owner

michelson commented Jan 12, 2021 via email

@azizmashkour
Copy link
Author

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

@0xc00010ff
Copy link

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
Copy link

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
Copy link

Samesies 👆

@LucasTrombim
Copy link

Same problem that @PrimeObjects has. ☝🏼

@michelson
Copy link
Owner

michelson commented May 7, 2021 via email

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants