Error with sha3.js when deploying to vercel?

[illogicsNFT]

Ethers Version

^5.7.1

Search Terms

sha3.js, lib.esm

Describe the Problem

No errors occur when developing locally, however the follow error occurs when trying to deploy my site using vercel.

Code Snippet

No response

Contract ABI

No response

Errors

'default' is not exported by node_modules/js-sha3/src/sha3.js, imported by node_modules/@ethersproject/keccak256/lib.esm/index.js
file: /vercel/path0/node_modules/@ethersproject/keccak256/lib.esm/index.js:2:7
1: "use strict";
2: import sha3 from "js-sha3";
          ^
3: import { arrayify } from "@ethersproject/bytes";
4: export function keccak256(data) {
error during build:
Error: 'default' is not exported by node_modules/js-sha3/src/sha3.js, imported by node_modules/@ethersproject/keccak256/lib.esm/index.js
    at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:1858:30)

Environment

No response

Environment (Other)

No response

[ricmoo]

Is Vercel a bundler? For legacy libraries (which looks like js-sha3 may be, you may have to provide additional config to your bundler to include it.

In v6, the dependency libraries selected are all modern JS libraries, so bundling works much more smoothly. ;)

[denisjazbec]

I've solved the same problem by adding the rollup commonjs plugin. I'm using Vite, and this is how to add it:

// vite.config.ts
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig({
  plugins: [
    commonjs(),
  ],
});

I'm also using rollup node polyfills, and it's crucial to define commonjs plugin before the node polyfills plugin. Example:

// vite.config.ts
import commonjs from '@rollup/plugin-commonjs';
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    commonjs(),
    rollupNodePolyFill(),
  ],
});