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

[BTT21000]

Following up on this issue ethereum-attestation-service/eas-sdk#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 # Runtime Error: (0 , superstruct_1.boolean) is not a function when using EAS SDK in React application ethereum-attestation-service/eas-sdk#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

{
  "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.