title: Uncaught Error: Element ref was specified as a string (content) but no owner was set. This could happen for one of the following reasons:
body: <p>So I will no longer use micro froentend to include this part of the application, so I did copy the source files into the main project. Installed packages, etc but when I went to run, I got this error on console:</p>
  <pre><code>Uncaught Error: Element ref was specified as a string (content) 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.
      at coerceRef (react-dom.development.js:13218:1)
      at createChild (react-dom.development.js:13448:1)
      at reconcileChildrenArray (react-dom.development.js:13719:1)
      at reconcileChildFibers (react-dom.development.js:14125:1)
      at reconcileChildren (react-dom.development.js:16990:1)
      at updateHostComponent (react-dom.development.js:17632:1)
      at beginWork (react-dom.development.js:19080:1)
      at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
      at invokeGuardedCallback (react-dom.development.js:4056:1)
      at beginWork$1 (react-dom.development.js:23964:1)
      at performUnitOfWork (react-dom.development.js:22776:1)
      at workLoopSync (react-dom.development.js:22707:1)
      at renderRootSync (react-dom.development.js:22670:1)
      at performSyncWorkOnRoot (react-dom.development.js:22293:1)
      at scheduleUpdateOnFiber (react-dom.development.js:21881:1)
      at updateContainer (react-dom.development.js:25482:1)
      at react-dom.development.js:26021:1
      at unbatchedUpdates (react-dom.development.js:22431:1)
      at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020:1)
      at Object.render (react-dom.development.js:26103:1)
      at Module.&lt;anonymous&gt; (index.js:6:1)
      at Module../src/index.js (index.js:8:1)
      at __webpack_require__ (bootstrap:851:1)
      at fn (bootstrap:150:1)
      at Object.1 (ChannelName.tsx:4:1)
      at __webpack_require__ (bootstrap:851:1)
      at checkDeferredModules (bootstrap:45:1)
      at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
      at main.chunk.js:1:59
  </code></pre>
  <p>it seems i didn't have any duplicate react version loaded:</p>
  <pre><code>&gt; npm ls react
  ├─┬ @emotion/react@11.8.1
  │ └── react@17.0.2 deduped
  ├─┬ @emotion/styled@11.8.1
  │ └── react@17.0.2 deduped
  ├─┬ @mui/icons-material@5.4.4
  │ └── react@17.0.2 deduped
  ├─┬ @mui/lab@5.0.0-alpha.71
  │ ├─┬ @mui/base@5.0.0-alpha.70
  │ │ └── react@17.0.2 deduped
  │ ├─┬ @mui/system@5.4.4
  │ │ ├─┬ @mui/private-theming@5.4.4
  │ │ │ └── react@17.0.2 deduped
  │ │ ├─┬ @mui/styled-engine@5.4.4
  │ │ │ └── react@17.0.2 deduped
  │ │ └── react@17.0.2 deduped
  │ ├─┬ @mui/utils@5.4.4
  │ │ └── react@17.0.2 deduped
  │ ├─┬ react-transition-group@4.4.2
  │ │ └── react@17.0.2 deduped
  │ ├── react@17.0.2 deduped
  │ └─┬ rifm@0.12.1
  │   └── react@17.0.2 deduped
  ├─┬ @mui/material@5.4.4
  │ └── react@17.0.2 deduped
  ├─┬ @testing-library/react@11.2.7
  │ └── react@17.0.2 deduped
  ├─┬ react-dnd@15.1.1
  │ └── react@17.0.2 deduped
  ├─┬ react-dom@17.0.2
  │ └── react@17.0.2 deduped
  ├─┬ react-draggable@4.4.4
  │ └── react@17.0.2 deduped
  ├─┬ react-helmet-async@1.2.3
  │ └── react@17.0.2 deduped
  ├─┬ react-icons@4.3.1
  │ └── react@17.0.2 deduped
  ├─┬ react-pro-sidebar@0.7.1
  │ ├─┬ react-slidedown@2.4.7
  │ │ └── react@17.0.2 deduped
  │ └── react@17.0.2 deduped
  ├─┬ react-router-dom@5.3.0
  │ ├─┬ react-router@5.2.1
  │ │ ├─┬ mini-create-react-context@0.4.1
  │ │ │ └── react@17.0.2 deduped
  │ │ └── react@17.0.2 deduped
  │ └── react@17.0.2 deduped
  ├─┬ react-scripts@4.0.3
  │ └── react@17.0.2 deduped
  ├─┬ react-tabs@3.2.3
  │ └── react@17.0.2 deduped
  ├─┬ react-usestateref@1.0.8
  │ └── react@17.0.2 deduped
  ├── react@17.0.2
  └─┬ styled-components@5.3.3
    └── react@17.0.2 deduped
  </code></pre>
  <p>I didn't have in the source code ref set to a string, only 3 uses like this:</p>
  <p>return </p>
  <p>the full code look like this:</p>
  <pre><code>import { useCallback, useState } from 'react';
  import { useDrop } from 'react-dnd';
  import { ItemTypes } from './ItemTypes.tsx';
  import { DraggableBox } from './DraggableBox';
  import update from 'immutability-helper';
  import { ButtonBox, TextBox, CheckBox } from './Box';
  import { ControlType } from './ControlType';
  import { GiArrowCursor } from &quot;react-icons/gi&quot;;
  
  const styles = {
      width: 150,
      height: 400,
      border: '1px solid black',
      position: 'relative',
      background: 'RGB(240, 240, 240)'
  };
  
  const cursorPropStyle = {
      position:&quot;absolute&quot;,
      top: 10,
      left: 10,
  };
  
  export const Container = () =&gt; {
      const [boxes, setBoxes] = useState({
         //a: { top: 20, left: 10, title: 'Button' },
      });
      
      const moveBox = useCallback((id, left, top) =&gt; {
          setBoxes(update(boxes, {
              [id]: {
                  $merge: { left, top },
              },
          }));
      }, [boxes]);
      
      const [, drop] = useDrop(() =&gt; ({
          accept: ItemTypes.BOX,
          drop(item, monitor) {
              const delta = monitor.getDifferenceFromInitialOffset();
              let left = Math.round(item.left + delta.x);
              let top = Math.round(item.top + delta.y);
              moveBox(item.id, left, top);
              return undefined;
          },
      }), [moveBox]);
  
      return &lt;div ref={drop} style={styles}&gt;
                  &lt;div style={cursorPropStyle}&gt;
                      &lt;GiArrowCursor /&gt;
                  &lt;/div&gt;
                  &lt;DraggableBox top={30} left={10} key=&quot;a&quot; id=&quot;a&quot; title=&quot;button&quot; controlType={ControlType.Button}&gt;
                      &lt;ButtonBox title=&quot;button&quot;/&gt;
                  &lt;/DraggableBox&gt;
                  &lt;DraggableBox top={60} left={10} key=&quot;b&quot; id=&quot;b&quot; title=&quot;&quot; controlType={ControlType.TextBox}&gt;
                      &lt;TextBox/&gt;
                  &lt;/DraggableBox&gt;
                  &lt;DraggableBox top={90} left={10} key=&quot;c&quot; id=&quot;c&quot; title=&quot;checkbox&quot; controlType={ControlType.CheckBox}&gt;
                      &lt;CheckBox title=&quot;checkbox&quot; /&gt;
                  &lt;/DraggableBox&gt;
              &lt;/div&gt;;
  };
  </code></pre>
  <p>How can I fix this?</p>