MetaMask / MetaMask/abi-utils

# Runtime Error: `(0 , superstruct_1.boolean) is not a function` in browser environment

Open
#95 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
24
Forks
8
PR merge metrics
No merged PRs in 30d

Description

Following up on this issue https://github.com/ethereum-attestation-service/eas-sdk/issues/125

When using `@metamask/abi-utils` in a React application (Create React App with CRACO), we encounter a runtime error related the superstruct's boolean function.

## Error Details Browser console error:

```
bundle.js:3328 Uncaught TypeError: (0 , superstruct_1.boolean) is not a function
at ./node_modules/@metamask/abi-utils/dist/parsers/bool.js (bundle.js:3328:76)
at options.factory (bundle.js:167452:30)
at __webpack_require__ (bundle.js:166819:32)
at fn (bundle.js:167080:21)
at hotRequire (bundle.js:167435:47)
at ./node_modules/@metamask/abi-utils/dist/parsers/index.js (bundle.js:3752:14)
at options.factory (bundle.js:167452:30)
at __webpack_require__ (bundle.js:166819:32)
at fn (bundle.js:167080:21)
at hotRequire (bundle.js:167435:47)
```

## Steps to Reproduce
1. Create a new React application using Create React App
2. Install CRACO: `yarn add @craco/craco`
3. Install `@openzeppelin/merkle-tree` (or `@ethereum-attestation-service/eas-sdk@2.7.0` as per this issue https://github.com/ethereum-attestation-service/eas-sdk/issues/125) which depends on `@metamask/abi-utils`
4. Add basic CRACO configuration for webpack
5. Start the development server: `yarn start`
6. The error appears in the browser console immediately upon loading

## Environment
- React version: 18.3.1
- Node.js version: 20.18
- Yarn version: 1.22.17
- Create React App with CRACO

## Dependencies
```json
{
"dependencies": {
"@openzeppelin/merkle-tree": "^1.0.8"
}
}
```

## Attempted Solutions
1. Added webpack configuration to handle ESM/CommonJS conversion
2. Cleared node_modules and yarn cache
3. Added specific babel-loader configuration for MetaMask packages

## Additional Context
The error occurs specifically in the browser environment and seems to be related to how the superstruct exports are being handled during bundling. The issue appears to be a module resolution problem where the `boolean` function from is not being properly imported/exported.

## Questions
1. Is there a recommended way to use `@metamask/abi-utils` in a browser environment?
2. Are there specific webpack/bundler configurations that should be used?
3. Is this a known issue with the package's browser compatibility?

Thank you for your help in resolving this issue.

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the failure with a Create React App using CRACO and the listed @openzeppelin/merkle-tree dependency. Start by inspecting @metamask/abi-utils/dist/parsers/bool.js and the bundled handling of superstruct.boolean. Done means the browser application loads without this runtime error and the affected ABI utilities remain usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.