Сan't integrate widget

Question

Сan't integrate widget

Opened this issue 2 years ago · 29 comments

Doberman2029 commented 2 years ago

Bug Description
Dependency (modules) error when using widget

Steps to Reproduce

Create next project using next@12.1.5
Install latest @uniswap/widgets and react-redux
Integrate SwapWiget to page
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

celsosa commented 2 years ago

same here

10xdegen commented 2 years ago

same

Gabalyno commented 2 years ago

same

Answer 1 · 2023-04-25T22:45:42.000Z

Getting the same issue

Answer 2 · 2023-05-11T16:33:42.000Z

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']
};

Answer 3 · 2023-05-11T16:35:11.000Z

Seeing this same issue in a React app using webpack

Answer 4 · 2023-05-11T17:09:28.000Z

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

Answer 5 · 2023-05-12T12:49:06.000Z

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.

Answer 6 · 2023-05-16T05:18:33.000Z

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.

Answer 7 · 2023-05-16T08:55:52.000Z

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

It all refers to this code

Answer 8 · 2023-05-20T17:40:19.000Z

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

Answer 9 · 2023-05-20T17:49:18.000Z

Anyone know the equivalent of this for webpack projects?

Answer 10 · 2023-05-21T06:01:32.000Z

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

Answer 11 · 2023-05-31T03:48:24.000Z

Unfortunately, not using nextJS for a project that's using the widget, and the webpack alias did not resolve the issue. So I created a fork branch with the functions of @uniswap/conedison just moved into this repos utils folder, and the issue was resolved. I also ran into the the Cannot read properties of null (reading 'useState') when using yarn link to reference my local branch, but when referencing the branch from github the error appears to be gone.

Since it's not a long term solution to keep a fork updated with conedison functions copied over, to this repo, I looked more into what other repos are using @uniswap/conedison, and aside from the forks of this repo it doesn't seem that it's being used by any other uniswap hosted repo? At least the ones publically available. There is one other project, Wido that is also a fork of this repo, but just a repurposed version of this repo.

Repos using @uniswap/conedison

If there aren't any other repos using the utils in conedison for a purpose other than forks of this widget, can the util functions just be pulled into the utils folder in this repo?

Created this tentative PR for the changes:
#589

Answer 12 · 2023-08-25T00:44:32.000Z

If adding both transpiles, get the following

./node_modules/@uniswap/widgets/node_modules/@web3-react/core/dist/index.js
Module parse failed: Cannot use 'import.meta' outside a module (58:16)
|                 // still a Refresh Boundary later.
|                 // @ts-ignore importMeta is replaced in the loader
>                 import.meta.webpackHot.accept();
|                 // This field is set when the previous version of this module was a
|                 // Refresh Boundary, letting us know we need to check for invalidation or

Answer 13 · 2023-10-05T07:28:14.000Z

I have forked this package published it under the name @nftearth/uniswap-widget and make it work for NextJS
also you don't need to install react-redux, I have reworked it so it will use React Context Instead

I hope it helps

https://github.com/NFTEarth/uniswap-widgets
https://www.npmjs.com/package/@nftearth/uniswap-widgets

Answer 14 · 2023-11-21T05:36:13.000Z

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.

This is the only thing that worked for me, thanks!

Answer 15 · 2024-02-02T13:47:59.000Z

For those here using nextjs v13 and pulling their hairs.
After installing the widget I was getting:

./node_modules/brotli/build/encode.js:2:134
Module not found: Can't resolve 'fs'

This was resolved by adding this to my nest config:

    config.resolve.fallback = {
    ...config.resolve.fallback,
        fs: false, // needed for uniswap widget
    }

The resolve option allows you to specify replacements for built-in Node.js modules that are not available or do not work in the browser environment. This is necessary because the fs module is not available in the browser enviroment. So anything in uniswap that tries to import the fs module will receive an empty module instead.

After that the only way to get the widget to render is to disable SSR for the it. You can load it like this:

const Widget = dynamic(() => {
  return import('@uniswap/widgets').then((mod) => mod.SwapWidget)
}, { ssr: false })

Answer 16 · 2024-03-12T11:25:43.000Z

@compojoom i am using next.js 14. I followed the instrunctions you gave but i'm getting the following error

Error: failed to fetch list: https://gateway.ipfs.io/ipns/tokens.uniswap.org

Answer 17 · 2024-03-27T04:04:11.000Z

If adding both transpiles, get the following

./node_modules/@uniswap/widgets/node_modules/@web3-react/core/dist/index.js
Module parse failed: Cannot use 'import.meta' outside a module (58:16)
|                 // still a Refresh Boundary later.
|                 // @ts-ignore importMeta is replaced in the loader
>                 import.meta.webpackHot.accept();
|                 // This field is set when the previous version of this module was a
|                 // Refresh Boundary, letting us know we need to check for invalidation or

Has anyone found a way to fix this?

Answer 18 · 2024-03-27T06:58:49.000Z

any ideas for this issue? (next 14 without ts)
Module not found: Can't resolve 'fs'

Answer 19 · 2024-04-16T18:40:11.000Z

any ideas for this issue? (next 14 without ts) Module not found: Can't resolve 'fs'

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};
export default nextConfig;

That fixed it for me

Answer 20 · 2024-04-27T14:48:56.000Z

Error: failed to fetch list: https://gateway.ipfs.io/ipns/tokens.uniswap.org

How can I fix it? ☹️

My part of package.json:

{
  "dependencies": {
    "@headlessui/react": "^1.7.19",
    "@headlessui/tailwindcss": "^0.2.0",
    "@uniswap/sdk-core": "^4.2.1",
    "@uniswap/v2-sdk": "^4.3.0",
    "@uniswap/v3-sdk": "^3.11.0",
    "@uniswap/widgets": "^2.59.0",
    "@web3-react/core": "^8.2.3",
    "next": "14.2.2",
    "react": "^18",
    "react-dom": "^18",
    "react-redux": "^8.1.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Answer 21 · 2024-04-30T17:20:38.000Z

Error: failed to fetch list: https://gateway.ipfs.io/ipns/tokens.uniswap.org

How can I fix it? ☹️

My part of package.json:

{
  "dependencies": {
    "@headlessui/react": "^1.7.19",
    "@headlessui/tailwindcss": "^0.2.0",
    "@uniswap/sdk-core": "^4.2.1",
    "@uniswap/v2-sdk": "^4.3.0",
    "@uniswap/v3-sdk": "^3.11.0",
    "@uniswap/widgets": "^2.59.0",
    "@web3-react/core": "^8.2.3",
    "next": "14.2.2",
    "react": "^18",
    "react-dom": "^18",
    "react-redux": "^8.1.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

when you open https://gateway.ipfs.io/ipns/tokens.uniswap.org in the browser you will be redirected to https://ipfs.io/ipns/tokens.uniswap.org

for me the new url works

<SwapWidget tokenList={'https://ipfs.io/ipns/tokens.uniswap.org'} />

Answer 22 · 2024-05-02T08:46:11.000Z

Good day!
I have and issue with polyfills and fs as mentioned in this post with create-react-app:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }

ERROR in ./node_modules/@uniswap/smart-order-router/build/module/providers/tenderly-simulation-provider.js 2:0-26
Module not found: Error: Can't resolve 'https' in '/home/qt/Projects/Crypto/uniswap-test/node_modules/@uniswap/smart-order-router/build/module/providers'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }

ERROR in ./node_modules/brotli/build/encode.js 23:11-24
Module not found: Error: Can't resolve 'fs' in '/home/qt/Projects/Crypto/uniswap-test/node_modules/brotli/build'

webpack compiled with 3 errors and 202 warnings

So I have tried to follow the instructions and created webpack.config.js like that:

module.exports = {
    resolve: {
        fallback: {
            "fs": false,
            "http": require.resolve("stream-http"),
            "https": require.resolve("https-browserify"),
        }
    }
};

In root directory of my project, but nothing helped. Anyone faced with this issue before? What actually helped is this case?

Answer 23 · 2024-05-20T13:36:48.000Z

Good day! I have and issue with polyfills and fs as mentioned in this post with create-react-app:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:

add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'

install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
ERROR in ./node_modules/@uniswap/smart-order-router/build/module/providers/tenderly-simulation-provider.js 2:0-26
Module not found: Error: Can't resolve 'https' in '/home/qt/Projects/Crypto/uniswap-test/node_modules/@uniswap/smart-order-router/build/module/providers'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:

add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'

install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }
ERROR in ./node_modules/brotli/build/encode.js 23:11-24
Module not found: Error: Can't resolve 'fs' in '/home/qt/Projects/Crypto/uniswap-test/node_modules/brotli/build'
webpack compiled with 3 errors and 202 warnings

So I have tried to follow the instructions and created webpack.config.js like that:
module.exports = {
    resolve: {
        fallback: {
            "fs": false,
            "http": require.resolve("stream-http"),
            "https": require.resolve("https-browserify"),
        }
    }
};
In root directory of my project, but nothing helped. Anyone faced with this issue before? What actually helped is this case?

So you can scroll to the reply by Investor in this link - Follow all the instructions and you would be ahead. It worked for me and my app works fine now.

Answer 24 · 2024-05-20T14:29:56.000Z

Error: failed to fetch list: https://gateway.ipfs.io/ipns/tokens.uniswap.org
How can I fix it? ☹️
My part of package.json:

{
  "dependencies": {
    "@headlessui/react": "^1.7.19",
    "@headlessui/tailwindcss": "^0.2.0",
    "@uniswap/sdk-core": "^4.2.1",
    "@uniswap/v2-sdk": "^4.3.0",
    "@uniswap/v3-sdk": "^3.11.0",
    "@uniswap/widgets": "^2.59.0",
    "@web3-react/core": "^8.2.3",
    "next": "14.2.2",
    "react": "^18",
    "react-dom": "^18",
    "react-redux": "^8.1.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

when you open https://gateway.ipfs.io/ipns/tokens.uniswap.org in the browser you will be redirected to https://ipfs.io/ipns/tokens.uniswap.org

for me the new url works

<SwapWidget tokenList={'https://ipfs.io/ipns/tokens.uniswap.org'} />

Thanks for sharing this. I couldn't have thought of this solution. Now my widget works.

Answer 25 · 2024-11-28T13:20:03.000Z

It's so bad that every official example of Uniswap, every project, and even the officially maintained wallet components are reporting errors. It's hard to believe what kind of team they are

Answer 26 · 2025-01-20T04:37:17.000Z

For people looking to get it working on Next.js v15 (Webpack), ensure you do the following

Pass updated token list URL in props <SwapWidget tokenList={'https://ipfs.io/ipns/tokens.uniswap.org'} /> as mentioned by @SonOfCrypto
In next.config.js, add an entry transpilePackages: ['@uniswap/widgets', '@uniswap/conedison'], @intertwine
In next.config.js add another entry @daniiba

  webpack: (config) => {
    config.resolve.fallback = {
      fs: false,
    }
    return config
  },

Performing the above 3 additions, renders the widget correctly.