Сan't integrate widget #580

Doberman2029 · 2023-04-24T16:37:05Z

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

WyattMufson · 2023-04-25T22:45:42Z

Getting the same issue

celsosa · 2023-04-28T09:43:53Z

same here

10xdegen · 2023-04-29T16:28:05Z

same

Gabalyno · 2023-04-29T19:39:44Z

same

cawabunga · 2023-05-11T16:33:42Z

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 · 2023-05-11T16:35:11Z

Seeing this same issue in a React app using webpack

Doberman2029 · 2023-05-11T17:09:28Z

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 · 2023-05-12T12:49:06Z

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 · 2023-05-16T05:18:33Z

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 · 2023-05-16T08:55:52Z

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

It all refers to this code

cawabunga · 2023-05-20T17:40:19Z

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

WyattMufson · 2023-05-20T17:49:18Z

Anyone know the equivalent of this for webpack projects?

Doberman2029 · 2023-05-21T06:01:32Z

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

nickfujita · 2023-05-31T03:48:24Z

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

lbennett-stacki · 2023-08-25T00:44:32Z

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

ryuzaki01 · 2023-10-05T07:28:14Z

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

wojakpepechad · 2023-11-21T05:36:13Z

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!

compojoom · 2024-02-02T13:47:59Z

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 })

M-Afzaal-Afzal · 2024-03-12T11:25:43Z

@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

fabdarice · 2024-03-27T04:04:11Z

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?

vladimirperju · 2024-03-27T06:58:49Z

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

daniiba · 2024-04-16T18:40:11Z

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

TwilightLogic · 2024-04-27T14:48:56Z

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"
  }
}

SonOfCrypto · 2024-04-30T17:20:38Z

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'} />

terry-daviass · 2024-05-02T08:46:11Z

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?

KoneeVibes · 2024-05-20T13:36:48Z

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.

KoneeVibes · 2024-05-20T14:29:56Z

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.

Doberman2029 added the bug Something isn't working label Apr 24, 2023

WyattMufson mentioned this issue May 3, 2023

v2.25: Cannot find module @uniswap/conedison/dist/format #404

Open

nickfujita mentioned this issue May 31, 2023

Fix conedison dependency issue #589

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Сan't integrate widget #580

Сan't integrate widget #580

Doberman2029 commented Apr 24, 2023

WyattMufson commented Apr 25, 2023

celsosa commented Apr 28, 2023

10xdegen commented Apr 29, 2023

Gabalyno commented Apr 29, 2023

cawabunga commented May 11, 2023

WyattMufson commented May 11, 2023

Doberman2029 commented May 11, 2023

cawabunga commented May 12, 2023 •

edited

intertwine commented May 16, 2023

Doberman2029 commented May 16, 2023

cawabunga commented May 20, 2023

WyattMufson commented May 20, 2023

Doberman2029 commented May 21, 2023

nickfujita commented May 31, 2023 •

edited

lbennett-stacki commented Aug 25, 2023

ryuzaki01 commented Oct 5, 2023

wojakpepechad commented Nov 21, 2023

compojoom commented Feb 2, 2024 •

edited

M-Afzaal-Afzal commented Mar 12, 2024

fabdarice commented Mar 27, 2024

vladimirperju commented Mar 27, 2024

daniiba commented Apr 16, 2024

TwilightLogic commented Apr 27, 2024 •

edited

SonOfCrypto commented Apr 30, 2024

terry-daviass commented May 2, 2024 •

edited

KoneeVibes commented May 20, 2024

KoneeVibes commented May 20, 2024

Сan't integrate widget #580

Сan't integrate widget #580

Comments

Doberman2029 commented Apr 24, 2023

WyattMufson commented Apr 25, 2023

celsosa commented Apr 28, 2023

10xdegen commented Apr 29, 2023

Gabalyno commented Apr 29, 2023

cawabunga commented May 11, 2023

WyattMufson commented May 11, 2023

Doberman2029 commented May 11, 2023

cawabunga commented May 12, 2023 • edited

intertwine commented May 16, 2023

Doberman2029 commented May 16, 2023

cawabunga commented May 20, 2023

WyattMufson commented May 20, 2023

Doberman2029 commented May 21, 2023

nickfujita commented May 31, 2023 • edited

lbennett-stacki commented Aug 25, 2023

ryuzaki01 commented Oct 5, 2023

wojakpepechad commented Nov 21, 2023

compojoom commented Feb 2, 2024 • edited

M-Afzaal-Afzal commented Mar 12, 2024

fabdarice commented Mar 27, 2024

vladimirperju commented Mar 27, 2024

daniiba commented Apr 16, 2024

TwilightLogic commented Apr 27, 2024 • edited

SonOfCrypto commented Apr 30, 2024

terry-daviass commented May 2, 2024 • edited

KoneeVibes commented May 20, 2024

KoneeVibes commented May 20, 2024

cawabunga commented May 12, 2023 •

edited

nickfujita commented May 31, 2023 •

edited

compojoom commented Feb 2, 2024 •

edited

TwilightLogic commented Apr 27, 2024 •

edited

terry-daviass commented May 2, 2024 •

edited