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:
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.<anonymous> (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
it seems i didn't have any duplicate react version loaded:
> 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
I didn't have in the source code ref set to a string, only 3 uses like this:
return
the full code look like this:
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 "react-icons/gi";
const styles = {
width: 150,
height: 400,
border: '1px solid black',
position: 'relative',
background: 'RGB(240, 240, 240)'
};
const cursorPropStyle = {
position:"absolute",
top: 10,
left: 10,
};
export const Container = () => {
const [boxes, setBoxes] = useState({
//a: { top: 20, left: 10, title: 'Button' },
});
const moveBox = useCallback((id, left, top) => {
setBoxes(update(boxes, {
[id]: {
$merge: { left, top },
},
}));
}, [boxes]);
const [, drop] = useDrop(() => ({
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 <div ref={drop} style={styles}>
<div style={cursorPropStyle}>
<GiArrowCursor />
</div>
<DraggableBox top={30} left={10} key="a" id="a" title="button" controlType={ControlType.Button}>
<ButtonBox title="button"/>
</DraggableBox>
<DraggableBox top={60} left={10} key="b" id="b" title="" controlType={ControlType.TextBox}>
<TextBox/>
</DraggableBox>
<DraggableBox top={90} left={10} key="c" id="c" title="checkbox" controlType={ControlType.CheckBox}>
<CheckBox title="checkbox" />
</DraggableBox>
</div>;
};
How can I fix this?