# JavaScript SDK Troubleshooting

## Vite Build Errors

### "Module 'buffer' has been externalized for browser compatibility" warning

This issue is caused by missing Node polyfills in your bundled web application. To resolve it:

1. Install `vite-plugin-node-polyfills`:
   ```bash
   npm i --save-dev vite-plugin-node-polyfills
   # or
   yarn add --dev vite-plugin-node-polyfills
   ```

2. Update your `vite.config.js` or `vite.config.ts`:
   ```javascript
   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import { nodePolyfills } from 'vite-plugin-node-polyfills'

   export default defineConfig({
     plugins: [
       react(), 
       nodePolyfills()
     ],
   })
   ```

3. Restart your development server.

### "Cannot read properties of undefined (reading 'from')" error in hdkey-without-crypto.js

This error is related to the `ethereum-cryptography` package. To fix it:

1. Install the `buffer` package:
   ```bash
   npm install buffer
   # or
   yarn add buffer
   ```

2. Update your `vite.config.ts`:
   ```javascript
   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import { nodePolyfills } from 'vite-plugin-node-polyfills'

   export default defineConfig({
     plugins: [
       react(),
       nodePolyfills({
         globals: {
           Buffer: false
         }
       })
     ],
     define: { 
       global: {},
     },
   })
   ```

3. Restart your Vite dev server.

### "require is not defined" error when using `vite preview`

Add the following to your `vite.config.ts` file:

```javascript
export default defineConfig({
  // ... your existing config
  build: {
    commonjsOptions: {
      transformMixedEsModules: true
    }
  },
})
```

Then rebuild your project before running `vite preview`.

## Webpack Build Errors

### "Module not found" errors for Node.js core modules when using create-react-app

This is due to Webpack 5 not including Node.js polyfills by default. To fix it:

1. Install required packages:
   ```bash
   npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
   # or
   yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
   ```

2. Create a `config-overrides.js` file in your project root:
   ```javascript
   const webpack = require('webpack');
   module.exports = function override(config) {
     const fallback = config.resolve.fallback || {};
     Object.assign(fallback, {
       crypto: require.resolve('crypto-browserify'),
       stream: require.resolve('stream-browserify'),
       assert: require.resolve('assert'),
       http: require.resolve('stream-http'),
       https: require.resolve('https-browserify'),
       os: require.resolve('os-browserify'),
       url: require.resolve('url'),
     });
     config.resolve.fallback = fallback;
     config.plugins = (config.plugins || []).concat([
       new webpack.ProvidePlugin({
         process: 'process/browser',
         Buffer: ['buffer', 'Buffer'],
       }),
     ]);
     config.module.rules.push({
       test: /\.m?js/,
       resolve: {
         fullySpecified: false,
       },
     });
     return config;
   };
   ```

3. Update your `package.json` scripts:
   ```json
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   ```

### "failed to parse source map" warnings

Disable these warnings by adding `GENERATE_SOURCEMAP=false` to your start script in `package.json`:

```json
"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
    // ...
},
```

## Next.js Build Errors

### "Named export 'curves' not found" error with the elliptic package in Next.js 13/14

Add the following to your `next.config.js`:

```javascript
const nextConfig = {
  // ... other next config
  experimental: {
    esmExternals: false,
  },
};
```

### SDK module import issues in Next.js 13 with the App Router

Use the named import for the SDK:

```typescript
import { Openfort } from '@openfort/openfort-js';
```

### "Cannot read properties of undefined (reading 'fromMasterSeed')" error in Next.js 12

Add the following to your `next.config.js`:

```javascript
const nextConfig = {
  // ... other next config
  experimental: {
    esmExternals: false,
  },
};
```

### "Could not detect network" error on Next.js 14 API endpoint with JsonRpcProvider

You have three options:

1. Downgrade to Next.js 13
2. Upgrade to Ethers v6
3. Use the solution provided [in this GitHub issue discussion](https://github.com/ethers-io/ethers.js/issues/3952#issuecomment-1698913553)