Сan't integrate widget

[Doberman2029]

Bug Description
Dependency (modules) error when using widget

Steps to Reproduce

1. Create next project using next@12.1.5
2. Install latest @uniswap/widgets and react-redux
3. Integrate SwapWiget to page
4. An error has occurred

Expected Behavior
The widget must be on the page, the project must be compiled successfully

Additional Context

Problem with module \node_modules@uniswap\conedison\dist\provider\signing

[WyattMufson]

Getting the same issue

[celsosa]

same here

[10xdegen]

same

[Gabalyno]

same

[cawabunga]

You need to transpile @uniswap/widgets, I'm not sure how to do it in 12 version, but in 13 version there is an option in next.config.js file (link to doc):

 module.exports = {
   ...
   transpilePackages: ['@uniswap/widgets']
};

[WyattMufson]

Seeing this same issue in a React app using webpack

[Doberman2029]

You need to transpile @uniswap/widgets, I'm not sure how to do it in 12 version, but in 13 version there is an option in next.config.js file (link to doc):

 module.exports = {
   ...
   transpilePackages: ['@uniswap/widgets']
};

Unfortunately after transpile the package still shows the same error

[cawabunga]

You need to transpile @uniswap/widgets, I'm not sure how to do it in 12 version, but in 13 version there is an option in next.config.js file (link to doc):

 module.exports = {
   ...
   transpilePackages: ['@uniswap/widgets']
};

Unfortunately after transpile the package still shows the same error

That's unfortunate. I bumped into the same issue that transpiling @uniswap/widgets does not help, so I had to transpile problematic @uniswap/conedison too. Hope it will help you as well.

[intertwine]

To make the above comment from @cawabunga explicit, what worked for me was:

In next.config.js:

module.exports = {
    ...
    transpilePackages: ['@uniswap/widgets', '@uniswap/conedison'],
};

(Using nextjs@13.4, @uniswap/widgets@2.51.2 & node@18)

Before applying the fix above, @uniswap/widgets@2.24.0 was the latest version I could use to build without the @uniswap/conedison errors.

[Doberman2029]

@intertwine @cawabunga Thanks, this solved the problem with @uniswap/conedison. But after that another error appeared.

It all refers to this code

[cawabunga]

@Doberman2029 Not sure if it is still relevant. But it looks like you call react hook outside a render function.

[WyattMufson]

Anyone know the equivalent of this for webpack projects?

[Doberman2029]

@cawabunga Yeah it's relevant. Problem happen only when widget integrated. So it's problem with hooks inside the package