[help]: Updating @metamask/snaps packages from v1 to v3

[martines3000]

Hi.

I'm trying to update the snaps packages (types, ui and cli) to v3.0.1, but I'm experiencing quite a lot of issues.

I want to update them to try the new snap_getFile method.

Issues:

• Broken import of OnRpcRequestHandler (tsc doesn't recognize the type import and handles it as any). We are using Typescript v5, but I also tested with 4.8.4 and it also didn't work.
• snap and ethereum global objects are not recognized (show up as any). I think this is related to the above issue
• We are getting an [SyntaxError: Possible HTML comment rejected at <unknown>:36345. (SES_HTML_COMMENT_REJECTED) error. Looking into it, I found out it is coming from this code in the bundle const endIndex = findClosingIndex(xmlData, "-->", i3 + 4, "Comment is not closed.");. This code is part of the parseXml function inside fast-xml-parser used inside the is-svg library, which is used in couple of snaps libraries.

For building, we are using ESBuild.

I also tested it with mm-snap build, but I am getting a JavaScript heap out of memory error. This error and slow build times, is also the reason we are using ESBuild. I also don't think it is causing the above mentioned issues.

Testable example can be found here

I appreciate your help.

[Montoya]

Hi @martines3000, what version of Node.js are you running?

[martines3000]

I'm using node version v18.16.0.

EDIT: Tested with v18.18.2 and v20.8.1 and still had the same issues.

I think the first 2 issues are related to some import/export issues of types and resolving of ESM/CJS packages. I was trying to find which version broke it and also tested it with snaps v2 packages and had the same issues. Currently we are using v1.0.2 of the snaps packages and it works fine.

The last issue is maybe related to a false positive detection of a HTML_COMMENT, as it fails during mm-snap eval. I'm just guessing here and I could be wron.

[Montoya]

OK I will follow up with the team. If you are trying to use snap_getFile, I don't think this is supported in Flask yet. You would probably have to get a custom build from the branch where it's being worked on.

[FrederikBolding]

@martines3000 Regarding the SES error, we don't currently have an ESBuild plugin for building snaps, so you may have to DIY a little bit here. The reason we have the plugins is that SES (and thereby also the Snaps platform) has certain rules that it enforces for the JS bundles, one of which is to disallow HTML comments. We have a post-processing step built-in to all of the plugins that mitigates a bunch of these problems automatically for snap developers. You can find the code here. It is exported as part of @metamask/snaps-utils. You could try running your bundle through that after it has been built by ESBuild, I will also make a note that we should look into maintaining a plugin ourselves.

With regards to the typing + ESM/CJS issues, I am not sure yet what could be causing this 🤔

[martines3000]

Thanks for the help.

I will look at the code you provided and try to resolve the html comment issue.

Regarding the type issues, I am also a little bit lost. The imports work, but the OnRpcRequestHandler shows as any.

Thanks for the help.

If I find out anything that could help others, I will post it here.

[martines3000]

Quick update regarding the problem number 3.

It was easily resolved by adding the code you linked to our post-process.js file, which we already used to do some post-processing on the output bundle.

Just for reference, I added it like this:

[martines3000]

@FrederikBolding

Another update regarding the types issue.
I tried to import the OnRpcRequestHandler from snaps-utils now instead of snaps-types and I get this error now:

Do you maybe have an idea ?

[martines3000]

I fixed the types issues by adding "types": "./dist/types/index.d.ts" here:

snaps/packages/snaps-utils/package.json

Line 16 in 3c968a2

"require": "./dist/cjs/index.js"

Now it loks like this:

To be honest, I'm not sure why it works now, and it didn't before. Tried understanding it using this, but still lost 🤣 .

[martines3000]

Closing this issue as we updated to the @metamask/snaps-sdk package, where the issue is not present anymore.