Develop Reference

"React is not defined" when importing React components from other package with Vite

I am importing a JSX component from #platformatic/ui-components, but I have the following problem when using a simple code like
import { BorderedBox } from '#platformatic/ui-components'
function App() {
return <BorderedBox>Hello World!</BorderedBox>
}
The error is:
Uncaught ReferenceError: React is not defined
at BorderedBox (BorderedBox.jsx:10:3)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27451:7)
at performUnitOfWork (react-dom.development.js:26557:12)
at workLoopSync (react-dom.development.js:26466:5)
It seems that adding import React from 'react' in each component I export would fix the problem but it doesn't sound right to me.
I maintain also #platformatic/ui-components so I can change the library accordingly.
Repo for minimal reproduction: https://github.com/leorossi/plt-ui

react-three-fiber "Uncaught Error: Objects are not valid as a React child" when loading gltf mesh and animations

I have searched the forums, and am unable to understand why my .js file is returning this error:
react-reconciler.development.js:5931
Uncaught Error: Objects are not valid as a React child (found: object with keys {isBufferGeometry, uuid, name, type, index, attributes, morphAttributes, morphTargetsRelative, groups, boundingBox, boundingSphere, drawRange, userData}). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-reconciler.development.js:5931:9)
at createChild (react-reconciler.development.js:6185:7)
at reconcileChildrenArray (react-reconciler.development.js:6457:25)
at reconcileChildFibers (react-reconciler.development.js:6877:16)
at reconcileChildren (react-reconciler.development.js:11398:28)
at updateHostComponent$1 (react-reconciler.development.js:12147:3)
at beginWork (react-reconciler.development.js:13862:14)
at HTMLUnknownElement.callCallback (react-reconciler.development.js:14219:14)
at Object.invokeGuardedCallbackDev (react-reconciler.development.js:14268:16)
at invokeGuardedCallback (react-reconciler.development.js:14329:31)
at beginWork$1 (react-reconciler.development.js:19537:7)
at performUnitOfWork (react-reconciler.development.js:18686:12)
at workLoopSync (react-reconciler.development.js:18597:5)
at renderRootSync (react-reconciler.development.js:18565:7)
at performConcurrentWorkOnRoot (react-reconciler.development.js:17836:74)
at workLoop (scheduler.development.js:266:34)
at flushWork (scheduler.development.js:239:14)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)
I am attempting to load a gltf mesh into my react-three-fiber scene and include a react scale event. I successfully loaded the gltf, however I am getting tripped up by the JSX syntax when I try to incorporate it with properties I've defined.
Here is my code:
function foobut(props) {
const { nodes, materials } = useGLTF("/foobut.glb")
const myMesh = React.useRef();
const [active, setActive] = useState(false);
return (
<mesh
scale={active ? 1.5 : 1}
onClick={() => setActive(!active)}
ref={myMesh}
>
castShadow
receiveShadow
geometry={nodes.Circle.geometry}
material={nodes.Circle.material}
scale={0.50}
position={[0, 0, 0]}
material-metalness={4.6}
</ mesh>
);
}
EDIT: The issue disappears when I nest everything in "<mesh ... />". However, I do not believe this is the correct method, as the animations do not work--it is stuck on one frame. Furthermore, this contradicts practices I've seen in other works (e.g., https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js:584-594 -- notice what is nested in the mesh ).

react-draggable Unable to find node on an unmounted component

Whenever I refresh my page after inserting the Draggable component, my page stops rendering and the HTML root element no longer has any children. I've tried putting it in the primary App component and still get the same error below in the console.
import React from 'react'
import Draggable from 'react-draggable';
import './Styles.css';
function Card() {
return (
<Draggable>
<div className='SCard'>
<div>Text</div>
</div>
</Draggable>
)
}
export default Card
react-dom.development.js:4303 Uncaught Error: Unable to find node on an unmounted component.
at findCurrentFiberUsingSlowPath (react-dom.development.js:4303:1)
at findCurrentHostFiber (react-dom.development.js:4465:1)
at findHostInstanceWithWarning (react-dom.development.js:25389:1)
at Object.findDOMNode (react-dom.development.js:26067:1)
at DraggableCore.findDOMNode (DraggableCore.js:389:1)
at DraggableCore.componentDidMount (DraggableCore.js:352:1)
at commitLayoutEffectOnFiber (react-dom.development.js:23305:1)
at commitLayoutMountEffects_complete (react-dom.development.js:24688:1)
at commitLayoutEffects_begin (react-dom.development.js:24674:1)
at commitLayoutEffects (react-dom.development.js:24612:1)
findCurrentFiberUsingSlowPath # react-dom.development.js:4303
findCurrentHostFiber # react-dom.development.js:4465
findHostInstanceWithWarning # react-dom.development.js:25389
findDOMNode # react-dom.development.js:26067
findDOMNode # DraggableCore.js:389
componentDidMount # DraggableCore.js:352
commitLayoutEffectOnFiber # react-dom.development.js:23305
commitLayoutMountEffects_complete # react-dom.development.js:24688
commitLayoutEffects_begin # react-dom.development.js:24674
commitLayoutEffects # react-dom.development.js:24612
commitRootImpl # react-dom.development.js:26823
commitRoot # react-dom.development.js:26682
finishConcurrentRender # react-dom.development.js:25981
performConcurrentWorkOnRoot # react-dom.development.js:25809
workLoop # scheduler.development.js:266
flushWork # scheduler.development.js:239
performWorkUntilDeadline # scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <DraggableCore> component:
at DraggableCore (http://localhost:3000/static/js/bundle.js:72974:5)
at Draggable (http://localhost:3000/static/js/bundle.js:72264:5)
at StressCard
at div
at div
at div
at div
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Surprisingly, I haven't found anyone else reporting this problem as it just works upon implementation. Any help is appreciated (please be very specific as I'm quite new to web dev), thanks!

React Router Dom prevents whole App from rendering

For some reason when I call the BrowserRouter inside my App() function, the whole App is prevented from being rendered. If I comment out the lines, the App works. I am a complete new to React. Is there something I am doing wrong?
index.js
import ReactDOM from 'react-dom';
import App from './App'
ReactDOM.render(
<App/>,
document.getElementById('root')
);
App.js
import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
return (
<div>
<h1>:S</h1>
<BrowserRouter>
<h1>:)</h1>
</BrowserRouter>
<h1>:(</h1>
</div>
);
}
export default App;
I thought that even if there was something wrong with BrowserRouter at least the first h1 tag would render, but no. The whole function just disappears and the page is blank.
What should I do?
EDIT: Browser console throws this error
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (bundle.js:44878:17)
at useRef (bundle.js:44918:24)
at BrowserRouter (bundle.js:42102:65)
at renderWithHooks (bundle.js:22138:22)
at mountIndeterminateComponent (bundle.js:24900:17)
at beginWork (bundle.js:26099:20)
at HTMLUnknownElement.callCallback (bundle.js:11088:18)
at Object.invokeGuardedCallbackDev (bundle.js:11137:20)
at invokeGuardedCallback (bundle.js:11197:35)
at beginWork$1 (bundle.js:30939:11)
react-dom.development.js:20085 The above error occurred in the <BrowserRouter> component:
at BrowserRouter (http://localhost:3000/static/js/bundle.js:42098:5)
at div
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:20085
bootstrap:27 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (bundle.js:44878:17)
at useRef (bundle.js:44918:24)
at BrowserRouter (bundle.js:42102:65)
at renderWithHooks (bundle.js:22138:22)
at mountIndeterminateComponent (bundle.js:24900:17)
at beginWork (bundle.js:26099:20)
at HTMLUnknownElement.callCallback (bundle.js:11088:18)
at Object.invokeGuardedCallbackDev (bundle.js:11137:20)
at invokeGuardedCallback (bundle.js:11197:35)
at beginWork$1 (bundle.js:30939:11)

I had wrongly installed react-router-dom in the parent directory of the project (which hosts the server) instead of the client subfolder (where react lives).

react-select error: str.replace is not a function error

I am trying to implement react-select in my project.
My code is here: https://gist.github.com/BikalNepal/9172b3161abfa545cc5748055c6584c6
The data for search is being fetched using graphql and relay from a backend nodejs server, when I type into the box, it fetches the data properly but when I click on the data, I get the following errors:
Option selected: {value: "stark#gmail.com", label: "rickon"}// Selected data is okay
Error:
react-select.esm.js?acac:1224 Uncaught TypeError: str.replace is not a function
at trimString (react-select.esm.js?acac:1224)
at Object.eval [as filterOption] (react-select.esm.js?acac:1246)
at Select.filterOption (react-select.esm.js?acac:3952)
at toOption (react-select.esm.js?acac:4038)
at options.reduce.render (react-select.esm.js?acac:4092)
at Array.reduce (<anonymous>)
at Select.buildMenuOptions (react-select.esm.js?acac:4071)
at Select.componentWillReceiveProps (react-select.esm.js?acac:3575)
at callComponentWillReceiveProps (react-dom.development.js?cada:11395)
at updateClassInstance (react-dom.development.js?cada:11605)
trimString # react-select.esm.js?acac:1224
(anonymous) # react-select.esm.js?acac:1246
filterOption # react-select.esm.js?acac:3952
toOption # react-select.esm.js?acac:4038
options.reduce.render # react-select.esm.js?acac:4092
buildMenuOptions # react-select.esm.js?acac:4071
componentWillReceiveProps # react-select.esm.js?acac:3575
callComponentWillReceiveProps # react-dom.development.js?cada:11395
updateClassInstance # react-dom.development.js?cada:11605
updateClassComponent # react-dom.development.js?cada:14648
beginWork # react-dom.development.js?cada:15598
performUnitOfWork # react-dom.development.js?cada:19266
workLoop # react-dom.development.js?cada:19306
callCallback # react-dom.development.js?cada:149
invokeGuardedCallbackDev # react-dom.development.js?cada:199
invokeGuardedCallback # react-dom.development.js?cada:256
replayUnitOfWork # react-dom.development.js?cada:18532
renderRoot # react-dom.development.js?cada:19422
performWorkOnRoot # react-dom.development.js?cada:20296
performWork # react-dom.development.js?cada:20208
performSyncWork # react-dom.development.js?cada:20182
interactiveUpdates$1 # react-dom.development.js?cada:20449
interactiveUpdates # react-dom.development.js?cada:2170
dispatchInteractiveEvent # react-dom.development.js?cada:4882
react-dom.development.js?cada:17071
The above error occurred in the <Select> component:
in Select (created by StateManager)
in StateManager (created by CustomerSearch)
in div (created by FormGroup)
in FormGroup (created by CustomerSearch)
in div (created by Col)
in Col (created by CustomerSearch)
in div (created by CustomerSearch)
in CustomerSearch (created by Relay(CustomerSearch))
in Relay(CustomerSearch) (created by ReactRelayQueryRenderer)
in ReactRelayQueryRenderer (created by CustomerSearchPage)
in div (created by CustomerSearchPage)
in div (created by CustomerSearchPage)
in CustomerSearchPage (created by ProductPerformance)
in div (created by Row)
in Row (created by ProductPerformance)
in div (created by Container)
in Container (created by ProductPerformance)
in div (created by ProductPerformance)
in ProductPerformance (created by Relay(ProductPerformance))
in Relay(ProductPerformance) (created by ReactRelayQueryRenderer)
in ReactRelayQueryRenderer (created by ProductPerformancePage)
in div (created by ProductPerformancePage)
in div (created by ProductPerformancePage)
in ProductPerformancePage (created by Route)
in Route (created by RoutePage)
in div (created by RoutePage)
in Router (created by HashRouter)
in HashRouter (created by RoutePage)
in RoutePage (created by App)
in div (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
What could be the issue here?

Here you're making a reference to an event constant that you never declare. Below your code fixed. See on props onInputChange and onKeyDown you have to call event before sending it.
<Select
value={selectedOption}
onChange={this.handleChange}
options={this.state.options}
// onKeyDown={event => this.handleRefetch(event)}
onInputChange={event => this.handleInput(event)}
inputValue={this.state.value}
/>