Having trouble with React useState hook

One more thing. Today I refactored my code to use react-web-component to set up the custom html element. Simplified the code greatly and works great until I use the element presented above. Then I get the same error. It is choking on the useState hook and returning in the Chrome Debugger:

Uncaught TypeError: Cannot read properties of null (reading 'useState')

I am providing a default to useState, so this shouldn't happen. Wondering if anyone has any idea of what i might be doing wrong.

Thanks.

So if you'll humor me, I have reduced this example to a bare minimum and would like to share it here.

In my Wix page I have created a Velo Custom Element (from the Embed Code list) and render it with the following code: import React, { useState } from 'react'; import { render, W } from '@wix/react-velo'; function App() { const [background, setBackground] = useState('green'); return ( <W.customElement2 /> ); } $w.onReady(() => render(App, $w, React));

Then in the Custom Element Attributes screen I connect it to the FullCalendar.js velo code file with the tag name my-full_calendar.

In FullCalendar.js I have the following:

import React from 'react'; import ReactWebComponent from 'react-web-component'; import Tabs from './tabs'; class MyFullCalendar extends React.Component { render() { return <Tabs/>; } }

ReactWebComponent.create(<MyFullCalendar />, 'my-full_calendar');

And then in tabs.js I have:

import React, { useState } from "react"; const Tabs = () => { //const [activeTab, setActiveTab] = useState('tab1'); return ( <div>Hello World!</div> ); }; export default Tabs;

With the useState commented out (as it is here) HelloWorld! renders on my page, but if I uncomment it, then my page no longer loads and I get the following error in my Chrome Debugger:

Uncaught TypeError: Cannot read properties of null (reading 'useState')

I'm not understanding why I am getting this error, since I provide a default value to useState. Any assistance the team could provide in helping me understand this would be greatly appreciated.

Thanks. ReactWebComponent.create(<MyFullCalendar />, 'my-full_calendar');

This message is for the benefit of anyone who might be viewing this in the future and experiencing the same issue. Two things:

One, I was able to get my page functioning by replacing the functional React approach outlined above with the more traditional React class-based approach. In this I used the more traditional state property approach and made ny shared data available via class properties, thereby eliminating the need for a useState hook. (If you take this approach, don't forget to include a constructor in your react component that calls Super() and that initializes the state and any other shared properties.) Second, I ended up removing the use of react-web-component and going back to implementing my custom html web component from scratch myself (by having my custom component override HTMLElement rather than React.Component. The reason for this is that although react-web-component is available as an npm package in the Velo environment, the accompanying react-web-component-style-loader package is not. So I needed to get at the guts of the web component implementation in order to add CSS styling properly.

This is just for anyone who happens to be trying what I am trying.