Module not found: Can't resolve 'fs'

[julien51]

• I'm submitting a ... [X] bug report [ ] feature request [ ] question about the decisions made in the repository [ ] question about how to use this project

• Summary

We used 3.17.4 without any issue. Recently we tried to upgrade to 3.27.2 in a nextjs application but we're now seeing the following error:

Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../node_modules/brotli/compress.js
../node_modules/brotli/index.js
../node_modules/@uniswap/smart-order-router/build/module/util/gas-factory-helpers.js
../node_modules/@uniswap/smart-order-router/build/module/providers/eth-estimate-gas-provider.js
../node_modules/@uniswap/smart-order-router/build/module/providers/index.js
../node_modules/@uniswap/smart-order-router/build/module/index.js
../packages/unlock-js/dist/index.mjs
./src/components/interface/Authenticate.jsx
./src/components/interface/GlobalWrapper.tsx
./src/pages/_app.tsx
   automatically enabled Fast Refresh for 1 custom loader
   automatically enabled Fast Refresh for 1 custom loader
 ⨯ ../node_modules/brotli/build/encode.js:2:134

[gio-XD]

I encountered this issue too, and I had to move the routing logic into the next API.

[julien51]

On our end we want to keep it on the front-end...

[julien51]

Event when adding the following to our next.js config:

  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module (uniswap-router)
    if (!isServer) {
      config.resolve.fallback = {
        fs: false, // Exclude 'fs' module
      }
    }

we end up with a different error:

It looks like for some reason this dependency assumes the library is used on the backend.

Is there a way to make sure smart-order-router can also be used on front-end apps?

[julien51]

It looks like the issue was introduced with https://github.com/Uniswap/smart-order-router/commit/293b21e8e0d3db3ec0fe23563eaf4d6dc7d5c0c5 (which introduces brotli as a dep)

[julien51]

@jsy1218 do you think you would accep a PR that replaces brotli with https://www.npmjs.com/package/brotli-wasm ?

[julien51]

Or maybe @mikeki ?

[jsy1218]

@julien51 will take a look. sorry for the trouble.

[julien51]

@jsy1218 Thanks! Happy to help in any way I can! Thank you so much!

[yaseenmustapha]

@jsy1218 Running into this issue which seems to be related (was also introduced with https://github.com/Uniswap/smart-order-router/commit/293b21e8e0d3db3ec0fe23563eaf4d6dc7d5c0c5):

Preventing me from fetching Arbitrum prices in my project frontend. Using React + Vite.

[soupydolph]

Experiencing the same issue.

NextJs app, error occurs when calling this:

const router = new AlphaRouter({
    chainId: 123 as ChainId,
    provider,
  });

Issue occurs whether I try to render client or server side.

Please fix, going to rollback to an earlier version and see if that resolves it.

[huntertdiamond]

Running into this issue which seems to be related (was also introduced with https://github.com/Uniswap/smart-order-router/commit/293b21e8e0d3db3ec0fe23563eaf4d6dc7d5c0c5):

yep, i downgraded to 3.20.1 and the issue was resolved in my next.js project.

Only problem now is that there is the gas issue on optimsim / base from #518

[julien51]

@jsy1218 Is there anything we can do to help here?

[HugaidaS]

This is a real problem, it is just not compatible with modern tech stack, it is either a problem with ethers v6 or with this brotli issue, how we supposed to use this on the frontend...

[ScreenTechnicals]

Experiencing the same issue.

NextJs app, error occurs when calling this:

const router = new AlphaRouter({
    chainId: 123 as ChainId,
    provider,
  });

Issue occurs whether I try to render client or server side.

Please fix, going to rollback to an earlier version and see if that resolves it.

try to use this as AlphaRouterParams['chainId'] works fine:

const router = new AlphaRouter({
    chainId: 123 as AlphaRouterParams['chainId'],
    provider,
  });

[ScreenTechnicals]

• I'm submitting a ... [X] bug report [ ] feature request [ ] question about the decisions made in the repository [ ] question about how to use this project
• Summary

We used 3.17.4 without any issue. Recently we tried to upgrade to 3.27.2 in a nextjs application but we're now seeing the following error:

Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../node_modules/brotli/compress.js
../node_modules/brotli/index.js
../node_modules/@uniswap/smart-order-router/build/module/util/gas-factory-helpers.js
../node_modules/@uniswap/smart-order-router/build/module/providers/eth-estimate-gas-provider.js
../node_modules/@uniswap/smart-order-router/build/module/providers/index.js
../node_modules/@uniswap/smart-order-router/build/module/index.js
../packages/unlock-js/dist/index.mjs
./src/components/interface/Authenticate.jsx
./src/components/interface/GlobalWrapper.tsx
./src/pages/_app.tsx
   automatically enabled Fast Refresh for 1 custom loader
   automatically enabled Fast Refresh for 1 custom loader
 ⨯ ../node_modules/brotli/build/encode.js:2:134

define this function in the server side, in my case I'm using next js pages dir v14.x.x, so I defined this inside src/pages/api/swap/route.api.ts file and it works!