I've found some posts that talk about this error in regards to Redux (where the issue is that Redux isn't supported with React 18), but not Recoil.
I'm able to add the RecoilRoot tag in and get everything to run properly, until I add useRecoilValue or useRecoilState, then I get this error:
Here's my button.js
import React from "react";
import { useRecoilValue } from "recoil";
import { buttonActiveState, buttonDisabledState } from "../atoms";
function Button(props) {
const isButtonDisabled = useRecoilValue(buttonDisabledState);
const isButtonActive = useRecoilValue(buttonActiveState);
return (
<button
className={getClassName(props, isButtonActive)}
type="button"
disabled={isButtonDisabled}
>
{props.copy}
</button>
);
}
function getClassName(props, buttonActiveState) {
let className = "btn btn-primary ";
if (props.className) {
className += props.className;
}
if (buttonActiveState) {
className += " active";
}
return className;
}
export default Button;
and the atoms.js
import { atom } from "recoil";
export const buttonActiveState = atom({
key: "buttonActiveState",
value: false,
});
export const buttonDisabledState = atom({
key: "buttonDisabledState",
value: false,
});
(RecoilRoot is wrapped around the content in the return statement for my main component)
I can't find anything about this online. How can I fix it?