Uniswap Widget and Next.js – widgets.js not supported

I created a fresh Next.js project and followed the Uniswap Widget guideline.

// create next app
npx create-next-app@latest

// add Uniswap widget dependency
yarn add @uniswap/widgets

// add Uniswap widget code
<div className="Uniswap">
  <SwapWidget
    provider={provider}
    jsonRpcEndpoint={jsonRpcEndpoint} />
</div>

However, I get this error suggesting I should change React or Uniswap code to make it compatible with Next.js setup.

Is there anyway I can make this work without changing React or Uniswap libraries, as suggested by the error message?

error - Error [ERR_REQUIRE_ESM]: require() of ES Module /home/pomatti/pjs/uniswap/uniswap-widget/node_modules/@uniswap/widgets/node_modules/@web3-react/core/dist/cjs/index.js from /home/pomatti/pjs/uniswap/uniswap-widget/node_modules/@uniswap/widgets/dist/widgets.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/pomatti/pjs/uniswap/uniswap-widget/node_modules/@uniswap/widgets/node_modules/@web3-react/core/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).