I'm trying to make website authentication. I tried to pass props to lazy loading modules but suddenly i encountered error "Uncaught (in promise) TypeError: w is not a function"
I'm using react with apollo client, react router and graphql query is perfectly working and lazy component's rendering too but i can't pass props to lazy loading component
// App.js
const SignIn = lazy(() => import('pages/signin'));
function App(props) {
// state to represent user signed in to the site
let [auth, setAuth] = useState(false);
function handleAuth (boolean) {
setAuth(boolean);
}
return (
<>
<main>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={HomePage} />
<Route
path="/signin"
auth={auth}
handleAuth={handleAuth}
render={props => (<SignIn {...props} /> )}
/>
// signin.js
let auth = props.auth;
let handleAuth = props.handleAuth;
return (
<ApolloConsumer>
{client => {
return (
<>
<div className="signin-div">
<h1>Sign in</h1>
<form
onSubmit={async e => {
e.preventDefault();
const { data } = await client.query({
query: SIGNIN_ACCOUNT,
variables: { email, password }
});
if (data.signin) {
handleAuth(true);
}
}}
className="signin-form"
>
I expected that handleAuth(true) will perfectly work but I took error that handleAuth(true) is not a function. below is the error message "Uncaught (in promise) TypeError: w is not a function"
How should I pass props to lazy loading modules?