React returns several errors when I import fetch

I am building a simple app using React. The app works fine without any issue until I import fetch.

Here is the code I ran:

App.js

import CountryBtn from './components/CountryBtn.js'
import WeatherIcon from './components/WeatherIcon.js'
import fetch from 'node-fetch'


const App = () => {
  return (
  <>
  <div id='WeatherForm'>
    <div id='CountryBtnGroup'>
    <CountryBtn name='Seoul' />
    <CountryBtn name='Moscow' />
    </div>
    <div id='WeatherToday'>
      <h2>Today</h2>
      <div id='TemperatureToday'><WeatherIcon type='Today' /><h2>15℃</h2></div>
    </div>
    <div id='WeatherOtherDay'>
      <div id='Today+1' className='AnotherDay'>
        <h2>AnotherDay</h2>
        <div className='TemperatureAnother'><WeatherIcon type='AnotherDay' /><h2>14℃</h2></div>
      </div>
      <div id='Today+2' className='AnotherDay'>
        <h2>AnotherDay</h2>
        <div className='TemperatureAnother'><WeatherIcon type='AnotherDay' /><h2>14℃</h2></div>
      </div>
      <div id='Today+3' className='AnotherDay'>
        <h2>AnotherDay</h2>
        <div className='TemperatureAnother'><WeatherIcon type='AnotherDay' /><h2>14℃</h2></div>
      </div>
      <div id='Today+4' className='AnotherDay'>
        <h2>AnotherDay</h2>
        <div className='TemperatureAnother'><WeatherIcon type='AnotherDay' /><h2>14℃</h2></div>
      </div>
    </div>
  </div>
  </>
  )
}

export default App

Some of the errors returned are:

What I tried to resolve the errors are:

Trying to substitute fetch with axios. But it seems to return the same errors.
Adding experiments: { topLevelAwait: true } to the module.exports object in webpack.config.js file.

I made a research in google but I could not find any solution to fix this issue. How can I fix this issue?

Answer

I have solved the issue. It seems like node-fetch packages that have higher versions than node-fetch@2.x.x are not compatible with React. So I downgraded the node-fetch package into node-fetch@2.6.1. Now the app runs well without any issue!

I found the solution at https://github.com/vercel/next.js/discussions/33982.

Advertisement

Answer