4

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.

enter image description here

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.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Saydur Rahman Nayeem
  • 61
  • 1
  • 4
  • https://stackoverflow.com/questions/67082806/when-updating-next-js-v10-1-13-to-webpack5-getting-warnings-cant-resolve-fsev this one helped me – Elagin Vladislav May 17 '21 at 04:20

1 Answers1

2

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,
  },
}
Anders Kitson
  • 1,413
  • 6
  • 38
  • 98