[React Native] Cannot read property 'decode' of undefined

[LouisWT]

This error is located at apg-conv-api/transformers.js line 801.

[LouisWT]

#12 fix this, please check. @ldthomas

[ldthomas]

Thanks for your interest in apg.js and pointing out this problem with React Native. As I've mentioned in other issues, I haven't worked with apg.js for a couple of years now and I'm a little rusty with it. Also, I have never worked with React Native. I am completely unfamiliar with it. That said, it does look interesting and I may come back to apg.js and fix it to work with RN sometime in the future. Unfortunately, I'm "out of the office" for a few months and likely won't get back to this until later this year. In the meantime you appear to have a private fix you can work with.

Regarding your pull request: I can't accept a pull request until 1) I understand all of the changes personally and 2) I have convinced myself that the changes will not break other applications. Also, since all of the "...bundle.js" files are generated from the source files the correct procedure would be to fix the source files and regenerate the bundle files.

So, again, thanks for pointing this problem out to me and piquing my interest in React Native.

[w4ll3]

Hello, sorry for revisiting this. I'm one of the maintainers of a library that uses apg-js (thanks for your work here, really impressive) and a similar issue appeared but a solution that seems to address the problem with a way simpler solution that should not impact apg-js. Perhaps a PR with this method could be acceptable?

spruceid/siwe#165

[ldthomas]

Well, this is interesting. I have noticed for some time that the siwe project was responsible for a large percentage of the downloads reported on npm. In fact, it was mainly siwe that I was thinking of when I declined the previous PR for fear of breaking existing projects. So I really do want to cooperate and help out here. Unfortunately, I'm looking at 1) a learning curve to get back up to speed with JS and my own project and 2) no time to do it right now. I'm in transition and it will probably not be until late July or August before I have my development environment set up again. If you can wait I'm willing to help out. If not, I'm open to suggestions.

[w4ll3]

Sure thing, this only popped up for us recently. There was another PR that wanted to add safe-buffer as a dependency and I was very happy that you stood by your principle of not adding dependencies, that's also very important for us.

[stretch1414]

Don't want to pile on, but this popped up for us recently as well. For additional context, we are not using ReactNative, but rather the Vite build tool (just swapped over from Create-React-App). No amount of polyfilling would do the trick, so I had to dive in pretty deep to finally stumble upon this project/package as the partial culprit. From all of my debugging and attempting various solutions, it seems that Vite was treating the this reference as the globalThis/window from the browser, rather than the individual file's module export. I've gone ahead and forked a version to update with exports instead of this, as outlined in the siwe project issue linked (which is actually what we are using that was causing our issues).

No rush on the fix, but wanted to add another example scenario. Also happy to help out with chatting through possible solutions and or testing any findings

[ldthomas]

Thanks. Will be happy to keep you in the loop and discussions when I get back to this. I would like to get a version that works for everybody, if that's possible.

[donaldinho]

I have also ran into this issue and made a PR with changes that I'm using with npm link in my build system to fix the dependency issue.

As noted in the PR I believe that changing to exports will keep compatibility with users who are using this package as a commonjs module but will allow it to be converted to an ES module for people that need that.

Also for context I came across this issue as I'm using SIWE and Vite

[ldthomas]

I think (hope) you are right on this. I'll give it a try when I can. As I've mentioned above, I'm in transition - as in moving - and I will not be relocated and have my development environment back up and running until July or August. I hope I can make these changes then and we can all work together to confirm that everyone is happy with the updated apg-js in their application or environment. Sorry I can't jump on this sooner but life happens.

[donaldinho]

Sure thing. Thanks for your attention

[ldthomas]

So, I've spent the last two weeks or so trying to get my head back into JavaScript and apg-js. I've updated all my working tools and the dev modules. I understand the problem with thisThis vs exports and I have made all the changes suggested in PR #14. I see the new Node.js documentation and I've updated the Buffer usage to

const { Buffer } = require('node:buffer');

along with all the other related node: items I could find. And I've updated "devDependencies" and fixed their usage so that they are all used from local installations. No global installations required. And I've verified that all (well, almost all) my examples in apg-js-examples still work. So far, so good. I could probably, at this point publish a new version of apg-js that would solve all of the problems that have been raised here (issue #13, issue #16, PR #14 and PR #15) except for one issue that I have not been able to resolve in spite of several days of effort.

apg-js also includes bundled versions of all of its libraries for usage in web pages. apg-js-examples has several examples of web pages that use the bundles. I have scripts that generate the bundles using browserify, minify and less. However, the new node:buffer usage seems to break the bundling process. browserify no longer works. I get an error that in essence says "no such file or directory …../apg-js/node:buffer". I've tried everything I can think of including switching to webpack which gives essentially the same error message.

So I'm open to suggestions. I'm basically ready to publish a new version of apg-js that should address your concerns. But it breaks my bundling procedure and I really don't want to publish without that working.

[donaldinho]

I'm not clear to me that you will be able to use require('node:buffer') when building for the browser. Essentially the node: prefix indicates that you want to use the buffer provided by the node runtime but the runtime in the browser doesn't provide a buffer implementation. This is why we need to polyfill buffer when bundling for the browser and it's not clear to me if the node: prefix will allow us to polyfill. It might do but I've not tried before.
Does it work if you just require('buffer'). That might indicate whether it's an issue with the prefix or a general polyfill issue.

Also can you push what you've got so far and we can have a play to see what's possible?

[ldthomas]

Let me spend a day or two experimenting with that and maybe a couple of other things. If I can't get something working then I will consider pushing a version with broken web bundles (or just without the bundles) and let you experiment with it in your applications. I have no experience with ReactNative or Vite. Are you saying that node:buffer causes no problems with those tools? Issue #16 is saying that it is a problem not to use it.

[donaldinho]

To use buffer in the browser it has to be polyfilled. For Vite I'm using rollup-plugin-node-polyfills to do this.

So with my react vite setup there are some packages that require or import buffer - not node:buffer. I just changed one of the imports to node:buffer and I got it to work with adding a resolve alias.

This is not a full vite config but I think these are the relevant parts from my config that relate to getting buffer included correctly

import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

{
  resolve: {
      alias: {
        'node:buffer': 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
        buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
      }
    },
  build: {
      sourcemap: false,
      rollupOptions: {
        plugins: [
          // Enable rollup polyfills plugin
          // used during production bundling
          rollupNodePolyFill()
        ]
      },
      assetsDir: "build-assets"
    },
}

[donaldinho]

Also I think the issue that the user in #16 is experiencing is because they are using cloudflare workers which polyfills buffer to node:buffer but this would not be common compared to the way that buffer is normally polyfilled to the browser even if it is more technically correct in the way it mirrors how nodejs is now encouraging users to include buffer server side.

[ldthomas]

Thanks for your comments and suggestions. Removing the node: from node:buffer (and node:fs, etc.) fixed my problems with browserify. For some reason minify now clobbers the results, but switching to terser fixed that. So right now I have a version of apg-js that doesn't break any of my examples and bundles so that my web page examples work also. I need to clean up my workspace a little and update some documentation. Then I'll be ready to publish a new version soon and we'll hope it fixes all of these issues.

[ldthomas]

Ok. Try it now. I've published apg-js version 4.2.0 on npm and GitHub.

[ldthomas]

I'm closing this for now. If apg-js continues to be a problem you can reopen this issue or open a new one.

[donaldinho]

Just to let you know this is now working for us. Thanks for your attention.

[ldthomas]

Thanks for letting me know. I was just assuming that no news was good news but thank you. It was fun getting back into JavaScript and npm.