Repository navigation
Support for React 18? #213
Description
Activity
Same issue here :/
Reacted by Jordan Davis and M1019171same issue here
Yep welp... hasn't been updated to work with React 18... You can see the
peerDependencyin thepackage.json"peerDependencies": { "react": ">=16.8.4", "prop-types": ">=15.5.8", "oidc-client": ">=1.6.1" },
Temporary Solution:
Extend the
OidcProviderProps<TState>interface to include the children property:import React from 'react'; import { OidcProviderProps } from 'redux-oidc'; import { IApplicationState } from './where/ever/your/redux/store/interface/is/defined'; interface OidcProviderHOC<TState> extends OidcProviderProps<TState> { children?: React.ReactNode; }
Create a HOC functional component which takes in that interface returning
props.children:const OidcProviderHOC: React.FC<OidcProviderHOC<IApplicationState>> = (props) => { return props.children; }; ReactDOM.render( <Provider store={store}> <OidcProviderHOC userManager={userManager} store={store}> <App /> </OidcProviderHOC> </Provider>, document.getElementById('app') );
@maxmantz I was going to fix this issue and put out a PR but it looks like it has already been fixed by @ryanzhangau in this commit refactor: add children type to OidcProvder for reactjs 18
export interface OidcProviderProps<TSTate> { readonly userManager: UserManager; readonly store: Store<TSTate>; children?: React.ReactNode; }
It was merged in as well by @drod21 and I do see the change reflected on the master branch:
However when pulling the down the latest from npm
npm i redux-oidc@latestthe change isn't reflected, when looking at the package code on NPM it doesn't show the change either, any idea what's going on? thanks!export interface OidcProviderProps<TSTate> { readonly userManager: UserManager; readonly store: Store<TSTate>; }
Most projects, you have to publish your libraries to NPM. This library has not been published to NPM in 4 years.
Reacted by Jordan Davis@ryan-sandy yeah I guess that's what needs to happen @drod21.
After including the temporary changes as stated above by @jdavis-software jdavis-software , Still the Error exists for me for
CallbackComponentProps!
below is the code snippetimport React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import { Provider } from "react-redux";
import { store } from "./store/store";
import { TranslationsProvider } from "./translations/TranslationsProvider";
import { OidcProviderProps } from "redux-oidc";
import { RootState } from "./store/store";
import { userManager } from "./utils/UserManager";interface OidcProviderHOC extends OidcProviderProps {
children?: React.ReactNode;
}const OidcProviderHOC: React.FC<OidcProviderHOC<. RootState> > = (props) => {
return props.children;
};ReactDOM.render(
<. Provider store={store}>
<. OidcProviderHOC userManager={userManager} store={store}>
<. TranslationsProvider>
<. App />
</. TranslationsProvider>
</. OidcProviderHOC>,
document.getElementById("root")
);However , I did the following changes as temporary changes.
interface CallBackProvider extends CallbackComponentProps {
children?: React.ReactNode;
}const CallBackProviderHOC: React.FC = (props) => {
return props.children;
};and used as below.
<.CallBackProviderHOC
userManager={userManager}
successCallback={() => {}}
errorCallback= {()=> {} }<. Spinner/>
<./CallBackProviderHOC>
now the successCallback is not being executedReacted by M1019171successCallback is not triggered in. callback component.
herez my code.
interface CallBackProvider extends CallbackComponentProps {
children?: React.ReactNode;
}const CallBackProviderHOC: React.FC = (props) => {
return props.children;
};export function Callback() {
const navigate = useNavigate();
const dispatch = useDispatch();return (
<>
<CallBackProviderHOC
userManager={userManager}
successCallback={() => {userManager .getUser() .then((user) => { console.log("success callback"); if (user) { console.log("i was here inside success callback"); const userStatus = getAuthenticationStatus(user); if (userStatus.isAuthenticated) { dispatch(setUserRole(userStatus.userRole)); } } navigate("/"); }) .catch((error) => { navigate("/"); console.error(error); }); }} // successCallback={() => navigate("/")} errorCallback={(error) => { console.log("i was in error"); navigate("/"); console.error(error); }} > <StyledDiv> <p>i am in callback component</p> <ClipLoader /> </StyledDiv> </CallBackProviderHOC> </>);
}Hey, so I created a fork of this library and merged in @drod21 upstream changes. It's compatible with React 18, but since I'm a dinosaur, I didn't test it with TypeScript. If you have issues with TS, open an issue or PR in my fork and I'll update it.
You can install my fork using
npm install redux-oidc-2 oidc-client-ts. You will need to change your import references fromredux-oidctoredux-oidc-2.I'll point the
redux-oidc-2at this library if it's ever updated.Reacted by Jordan DavisReacted by Jordan DavisReacted by Barry Michael Doyle and Jordan Davis@ryan-sandy running into a import issue, other than that looking at the code it looks good!
node_modules/redux-oidc-2/index.d.ts' is not a module.
Here is the import code
import { CallbackComponent } from "redux-oidc-2";
Am I missing something with the configuration of it? I am using CRA just FYI
@jdavis-software Even i am facing the same now after using the new import statement as below
import { CallbackComponent } from "redux-oidc-2";
@ryan-sandy this is the error
node_modules/redux-oidc-2/index.d.ts' is not a module.ts
@M1019171 Please head over to redux-oidc-2 and open an issue there. I think in v1.1.1, I've solved the typescript issues.
The issue @dclayton77 describes is ultimately an issue with React 18 typescript definitions. it seems its not with the actual runtime functioning of this library. React 18's new default definition for functional components does not include children, which is definitely annoying while working with 3rd party libraries like this, but not a deal breaker. This worked for me:
root.render( <Provider store={store}> {/* @ts-expect-error Official support for React 18 Typescript not yet available */} <OidcProvider userManager={userManager} store={store}> <App /> </OidcProvider> </Provider>, document.getElementById("root") );
While doing this will irritate your sense of typescript OCD, it gets things working as they were prior to upgrading to react 18. You'll have to do the same thing the
CallbackComponent. This is a workaround until @ryan-sandy's fork gets all the kinks worked out.In another issue @drod21 has mentioned that he got promoted as a maintainer and he has a fork of this repo @ https://github.com/drod21/redux-oidc/ and @ryan-sandy has also mentioned about his fork @ https://github.com/ryan-sandy/redux-oidc.
Can this repo point to the forked repo that is more active and will provide support.
@CarreraPHP I believe this repo is dead. I'm not a maintainer and cannot change what points where. I do not believe anyone has access to the NPM publish side of the repo.
Raised a new PR 215 for React 18 support along with replacing Webpack & Mocha and all legacy tech except immutable.
Yet to test the package in my current application.
Package is available in npm as well @ @founding-partner/redux-oidc
Does this package support React 18? I have upgraded my project but am facing an issue with the registration of the OidcProvider. Using the new root.render syntax, I get the below errors.
I cannot see anything in the documentation about using root.render, only the old syntax. Has anyone else faced/solved this issue?