getting webpack warning during npm run dev and first load in Next.js

Question

I am getting warning in Next.js from webpack. It's just showing warning but cause not any error. The warning is like this:

[webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Node.js doesn't offer a (nice) 
 way to introspect the ESM dependency graph yet.

I'm using

• Next.js 10.1.3 with typescript (webpack 5 is enabled)
• react-query 3.13.11
• some basic api routes
  
  my index.tsx file is like this:

const User = ({ userList }) => {

  const [ userId, setUserId] = useState('1');

  const { data, status } = useQuery(['user', userId], async ()=> {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    return res.json();
  }, {
    staleTime: Infinity,
    cacheTime: Infinity
  } );

  return (
      <input type="number" onChange={e=>setUserId(e.target.value)} />
  )
};

export const getStaticProps = async (ctx) => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/users');
  return {
    props: {
      userList: data
    }
  }
}

and _app.tsx file like this:

const queryClient = new QueryClient()

function MyApp({ Component, pageProps }) {
  return(
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  )
}

Please help me to understand this error.

Answer 1

I was able to add a next.config.js file with the following and it suppressed the message. See next docs https://nextjs.org/docs/messages/webpack5

module.exports = {
  future: {
    webpack5: true,
  },
}