ReferenceError: browser is not defined

Questions General
1

Hey guys, i am unable to get this to work. any idea what i need to do? I am trying to integrate web3 and wallet connect “@walletconnect/web3-provider” in my ember app

Here is the error i am getting

sha3.js:8 Uncaught (in promise) ReferenceError: browser is not defined
    at eval (sha3.js:8:343)
    at eval (sha3.js:9:104)
    at Object../node_modules/js-sha3/src/sha3.js (chunk.vendors-node_modules_walletconnect_web3-provider_dist_esm_index_js.cf9b7ec87bddf1c2045a.js:2629:1)
    at __webpack_require__ (chunk.app.95131fd67af3d919a0d5.js:53:42)
    at eval (ethereum.js:8:65)
    at Module../node_modules/@walletconnect/utils/dist/esm/ethereum.js (chunk.vendors-node_modules_walletconnect_web3-provider_dist_esm_index_js.cf9b7ec87bddf1c2045a.js:652:1)
    at __webpack_require__ (chunk.app.95131fd67af3d919a0d5.js:53:42)
    at eval (index.js:104:67)
    at Module../node_modules/@walletconnect/utils/dist/esm/index.js (chunk.vendors-node_modules_walletconnect_web3-provider_dist_esm_index_js.cf9b7ec87bddf1c2045a.js:663:1)
    at __webpack_require__ (chunk.app.95131fd67af3d919a0d5.js:53:42)

Here is my ember-cli-build configs for auto import

    'ember-cli-babel': {
      includePolyfill: true,
    },
    babel: {
      plugins: [
        'transform-object-rest-spread',
        require.resolve('ember-auto-import/babel-plugin')
      ]
    },
    autoImport: {
      pubicAssetURL: isProductionLike ? cdnPath + 'assets/' : '',
      //exclude: [],
      webpack: {
        resolve: {
          fallback: {
            "crypto": require.resolve("crypto-browserify"),
            "stream": require.resolve("stream-browserify"),
            "assert": require.resolve("assert"),
            "http": require.resolve("stream-http"),
            "https": require.resolve("https-browserify"),
            "os": require.resolve("os-browserify"),
            "url": require.resolve("url"),
            "buffer": require.resolve("buffer"),
            "path": require.resolve("path-browserify")
          }
        },
        plugins: [
          new webpack.DefinePlugin({
            process: "process/browser",
            stream: "stream-browserify",
            zlib: "browserify-zlib",
            util: 'util',
            Buffer: ['buffer', 'Buffer']
          })
        ],
        node: {
          global: true
        }
      }
    },
2

I confirmed that ember-auto-import can bring web3 and @walletconnect/web3-provider into an ember app with this config:

let app = new EmberApp(defaults, {
    autoImport: {
      webpack: {
        resolve: {
          fallback: {
            stream: require.resolve('stream-browserify'),
            http: false,
            https: false,
            os: false,
            crypto: false,
            vm: false,
          },
        },
        plugins: [
          new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
          }),
          new webpack.ProvidePlugin({
            process: 'process/browser',
          }),
        ],
        node: {
          global: true,
        },
      },
    },
});

I was able to put this together quickly because I know of an open-source ember app that consumes both those dependencies, although it uses embroider so the config is in a slightly different place. But the handling of third-party dependencies via webpack would be the same.

1 Like
3

Thanks much for the suggestion. setting the fallback as false seems to have worked, and i took some reference from the repo you shared :).

Much appreciate your help!