# Runtime Error: `(0 , superstruct_1.boolean) is not a function` in browser environment
- 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