Properly declare "main" and "browser" entrypoints in package.json

Instead of only exposing a main entry point in package.json, there should be a browser entrypoint for web bundlers to use.

E.g. instead of (or in addition for) doing this https://github.com/WalletConnect/walletconnect-monorepo/blob/next/packages/helpers/qrcode-modal/src/index.ts there should be a browser.ts entrypoint that simply doesn’t import any node dependencies in its entire dependency hierarchy whatsoever.

Modern bundlers are starting to drop the out-of-the-box polyfilling of node dependencies for good reason and e.g. with Snowpack, Vite or esbuidler this is currently failing by default.

In fact, in addition to main and browser it would be good to also expose the build output of the packages in this monorepo as esm modules using the module field in package.json.

I see that you are currently using webpack for bundling the libraries. Instead, I’d recommend to use something like rollup.js as it’s much better suited to package libraries (webpack is a bundler and hence more suited for applications, not for libraries).

[Nuzzlet]

Hey guys. I found another solution to this problem. I simply import wallet connect via: import WalletConnectProvider from '@walletconnect/web3-provider/dist/umd/index.min.js'; and to get the types working, I made a d.ts file with: declare module '@walletconnect/web3-provider/dist/umd/index.min.js' { import WalletConnectProvider from '@walletconnect/web3-provider/dist/esm/index'; export default WalletConnectProvider }

[ShravanSunder]

@mfw78 @thekevinbrown If you’re using vite and vite build this rollup option solves the issue

commonjsOptions: {
      transformMixedEsModules: true,
    },

here’s the whole config if you need it:

export default defineConfig({
  plugins: [nodePolyfills(), reactRefresh(), macrosPlugin(), tsconfigPaths()],
  build: {
    sourcemap: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: `import {jsx, css} from '@emotion/react'`,
  },
  define: {},
  optimizeDeps: {
    exclude: ['@apollo/client', `graphql`],
    include: ['*/@portis/**'],
  },
  resolve: {
    alias: {
      '~~': resolve(__dirname, 'src'),
      /** browserify for web3 components */
      stream: 'stream-browserify',
      http: 'http-browserify',
      https: 'http-browserify',
      timers: 'timers-browserify',
      process: 'process',
    },
  },
});