0

I am developing a React app with NodeJS. I am currently working on being able to log out a user after some minutes of inactivity, and I'm following this tutorial: https://www.youtube.com/watch?v=_wgCPufTAYI. I didn't get too far, because I get this error when I'm importing IdleTimer. Also, I did 'npm install react-idle-timer', so that shouldn't be the cause. I couldn't figure out why that is, so any help is much appreciated! Thank you

This is where the error happens

import React, { useRef } from 'react';
import IdleTimer from 'react-idle-timer';

function SessionTimeout() {
    const idleTimerRef = useRef(null);

    const onIdle = () => {
        console.log('User is idle');
    }

  return (
    <div>
        <IdleTimer ref={idleTimerRef} timeout={5 * 1000} onIdle={onIdle}></IdleTimer>
    </div>
  )
}

export default SessionTimeout

And this is the error

ERROR in ./src/pages/SessionTimeout.js 20:35-44
export 'default' (imported as 'IdleTimer') was not found in 'react-idle-timer' (possible exports: IdleTimerConsumer, IdleTimerContext, IdleTimerProvider, createMocks, useIdleTimer, useIdleTimerContext, withIdleTimer, workerTimers)
 @ ./src/App.js 21:0-52
 @ ./src/index.js 7:0-24 11:33-36

webpack 5.70.0 compiled with 1 error and 1 warning in 266 ms
Victor
  • 15
  • 1
  • 6

3 Answers3

0

change

import IIdleTimer  from 'react-idle-timer'

into

import { IIdleTimer } from 'react-idle-timer'

The library doesn't export a default value

It seems that they change their api in v5 so now you have to import the hook like this

import {useIdleTimer} from 'react-idle-timer'
....
// Hook
const idleTimer = useIdleTimer({
  crossTab: true
})

// Higher Order Component Wrapped 
<IdleTimer crossTab />
R4ncid
  • 6,944
  • 1
  • 4
  • 18
  • I did, the error changed into this: `ERROR in ./src/pages/SessionTimeout.js 20:35-44 export 'IdleTimer' (imported as 'IdleTimer') was not found in 'react-idle-timer' (possible exports: IdleTimerConsumer, IdleTimerContext, IdleTimerProvider, createMocks, useIdleTimer, useIdleTimerContext, withIdleTimer, workerTimers) @ ./src/App.js 21:0-52 @ ./src/index.js 7:0-24 11:33-36 webpack 5.70.0 compiled with 1 error and 1 warning in 480 ms` – Victor Apr 25 '22 at 16:07
  • Could you please guide me in how to edit my code with the new modifications? I have tried this, but I don't get the message in the console: ```import React, { useRef } from 'react'; import { useIdleTimer } from 'react-idle-timer'; function SessionTimeout() { const idleTimer = useIdleTimer({ crossTab: true }) const onIdle = () => { console.log('User is idle'); } return (
    ) } export default SessionTimeout```     – Victor Apr 25 '22 at 16:12
0
`import { useIdleTimer } from 'react-idle-timer';`
export default function IdleComponent() {
const idleTimeRef = useRef(null);
const onIdle = () => {
console.log('Log Out');)};
const idleTimer = useIdleTimer({
crossTab: true,
ref: idleTimeRef,
timeout: 60 * 3 * 1000,
onIdle: onIdle})
return (<div idleTimer={idleTimer}></div>);
}
Mithlesh Kumar
  • 1
  • 1
  • 2
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 08 '22 at 15:51
0

Formatting Mithlesh Kumar's code snippet:

import { useRef } from "react";
import { useIdleTimer } from "react-idle-timer";
export default function IdleComponent() {
  const idleTimeRef = useRef(null);
  const onIdle = () => {
    console.log("Log Out");
  };
  const idleTimer = useIdleTimer({
    crossTab: true,
    ref: idleTimeRef,
    timeout: 60 * 3 * 1000,
    onIdle: onIdle,
  });
  return <div idleTimer={idleTimer}></div>;
}

Refer to the documentation for more details

Shaheer Kochai
  • 1
  • 2