Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't import as esm module in vite project.

See original GitHub issue

Describe the bug @ethersproject/bignumber package is using bn.js as a dependency. While bn.js is coding with umd way. So in vite project it throw error like this:

Uncaught SyntaxError: The requested module '/node_modules/bn.js/lib/bn.js' does not provide an export named 'default'

Reproduction steps

Create a new vite project then add @walletconnect/ethereum-provider@2.0.0-beta.14 and ethers@5.4.1 deps.
Coding import WalletConnectProvider from '@walletconnect/ethereum-provider' in vue file.

The error occur. I don’t think this error is caused by @walletconnect/ethereum-provider package as it doesn’t depend on it and it’s really not correct to import umd module in vite way.

Environment: MacOS 11.1 yarn 1.22.10 node v14.17.1 npm 7.19.0

Issue Analytics

State:
Created 2 years ago
Comments:9 (1 by maintainers)

Top GitHub Comments

11reactions

mahapocommented, Dec 25, 2021

+1 Same issue with nuxt 3 and ethersjs 5.5.2. Any updates?

3reactions

mahapocommented, Feb 28, 2022

Here a working nuxt config with right vite settings

import {
  defineNuxtConfig
} from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  css: ['assets/css/main.css'],
  buildModules: [
    '@vueuse/nuxt',
    '@pinia/nuxt',
    'nuxt-windicss',
  ],
  nitro: {
    preset: "lambda",
  },
  vite: {
    optimizeDeps: {
      include: [
        'bn.js',
        'js-sha3',
        'hash.js',
        'eth-rpc-errors',
        'web3-eth-contract',
      ]
    }
  },
  build: {
    transpile: ['@ethersproject', '@toruslabs/*', '@walletconnect/*', '@snapshot-labs/lock'],
  }
})