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:
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?
I have solved the issue. It seems like node-fetch packages that have higher versions than [email protected]
are not compatible with React. So I downgraded the node-fetch package into [email protected]
. Now the app runs well without any issue!
I found the solution at https://github.com/vercel/next.js/discussions/33982.