Issues with webpack 5

[ImTheCodeFarmer]

I am facing an issue with web pack v5 and buffer. I am getting the following error:

Uncaught ReferenceError: Buffer is not defined
    at ./node_modules/@ledgerhq/devices/lib/hid-framing.js

Based on some good ol' Googling, I came across this suggestion but it did not seem to help.

-> webpack.config.js

const webpack = require('webpack');

module.exports = {
    resolve: {
        fallback: {
            util: require.resolve('util/'),
            assert: require.resolve('assert/'),
            stream: require.resolve('stream-browserify'),
            zlib: require.resolve('browserify-zlib'),
        },
    },
    plugins: [
        new webpack.ProvidePlugin({
             Buffer: ['buffer', 'Buffer'],
             process: 'process/browser',
        }),
    ],
}

[kujtimprenkuSQA]

Hey, @jhammond2012 thank you for raising this issue.

The error seems to be thrown from the dependencies related to the Ledger package we have.
You will need to install Buffer as a dependency and provide it as a fallback plugin if you're using webpack 5.

Starting from webpack 5 some of the node.js modules are not imported by default that's why on your website you will need to add a fallback or polyfill.

The way to add this fallback is different in all major Frameworks,

Which framework are you using?
Would it be possible for you to share a "demo" where you can reproduce the error?

[felixniemeyer]

I have a similar problem.
I'm trying to integrate NEAR wallet-selector into a vite/vue poject.

First buffer is missing. If I supply it by adding a polyfill in the vite config, there is a "redeclaration of import process" error.

I noticed these 2 lines in @near-wallet-selector_ledger.js

init_virtual_process_polyfill();
init_buffer();

Seems like process and buffer are treated differently.

[kujtimprenkuSQA]

As mentioned above these new versions of popular bundlers (webpack 5, rollup, vite etc) don't import by default server-side node.js modules into SPA or in browser (client-side) for example there's no process in the browser so you will need to add it via a polyfill.

init_virtual_process_polyfill();
init_buffer();

Where did you see these lines we don't have such code in the source code of the @near-wallet-selector/ledger package ?

The process for adding the polyfill depends on the bundler and/or the framework you use.

Could you provide us with a demo where you can reproduce this error?

[felixniemeyer]

@kujtimprenkuSQA
Oh, I realized the aforementioned lines are from some vite specific file in
node_modules/.vite/deps/@near-wallet-selector_ledger.js

Maybe the vite plugin (@esbuild-plugins/node-globals-polyfill) has already interfered there and produced these lines.

Damn, for me that's a real hurdle on my way of integrating wallet-selector. I'm stuck for a few days.

[felixniemeyer]

The thing is, polyfilling buffer seems to work fine. I'm achieving this by adding the following to my vite.config.ts

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
...
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis'
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true, 
        })
      ]
    }
  }

But then, the the "redeclaration of import process" comes along.

Ha, I'll try to reproduce this situation in a minimal example.
Shall I create a new issue for that then? I guess so because I'm feeling like I'm pulling away from the original topic a bit.

[kujtimprenkuSQA]

Hey, @felixniemeyer I have created a “demo” copy of guest-book with NEAR Wallet Selector support this demo I solve these issues:

• Buffer undefined
• Process undefined
• Window and globalThis undefined on build

The demo is in my personal github account:
https://github.com/kujtimprenkuSQA/guest-book-vue

I haven’t written Vue apps in almost 2 years so forgive me if the code looks not that good i tried to keep it clean though.

Please check the commits history on that demo I separated commits in places I fix issues.

Later on the day I will figure it out on how to properly deploy this demo in gh-pages.

[felixniemeyer]

Awesome, thanks for your support, I'll try it out on my system in a minute.

In the meantime, I have created a new vite project with yarn create vite and added dependencies and the near-wallet.js file as described in the near docs https://docs.near.org/develop/integrate/frontend.

I ran into the same polyfill problems as described above. You can see it in this reo https://github.com/felixniemeyer/vite-near-wallet-vite-error-reproduction/commits/main

I will now start comparing our repos and see what's the difference in order to fix the issue in my original project.

Thanks for the support 👍

[felixniemeyer]

Ok, great, I managed to provide buffer and process in a Vite project (not Webpack 5) by:

1. Installing buffer and process as dev dependencies with yarn:

yarn add -D buffer process

2. And then importing these things into the global scope in the index.html file like this

<html lang="en">
  <head>
    <script type="module">
      import { Buffer } from "buffer";
      import process from "process";
      window.Buffer = Buffer;
      window.process = process; 
    </script>   
   ...

[kujtimprenkuSQA]

@felixniemeyer, you're right the above demo is created with Vue + Vite I assume the same solution applies in any app created with npm/yarn create vite

I am not sure about the original issue related to webpack 5 because I don't have enough info on which framework @jhammond2012 is using.

[kujtimprenkuSQA]

Just a quick update, I finally managed to successfully publish the above demo via gh-pages:

https://kujtimprenkusqa.github.io/guest-book-vue/

For some reason, with Vite 3 the build would run just fine but when deployed or run in the preview it would throw an error:
TypeError: Class extends value undefined is not a constructor or null this error was caused by near-api-js somehow.

The solution/workaround was found here:
vitejs/vite#9703

This is the commit in which I fixed this kind of issue (check vite.config,ts):
kujtimprenkuSQA/guest-book-vue@6da5a8b