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:

Install vite-plugin-node-polyfills:

npm i --save-dev vite-plugin-node-polyfills
# or
yarn add --dev vite-plugin-node-polyfills

Update your vite.config.js or vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
export default defineConfig({
  plugins: [
    react(), 
    nodePolyfills()
  ],
})

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:

Install the buffer package:

npm install buffer
# or
yarn add buffer

Update your vite.config.ts:

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: {},
  },
})

Restart your Vite dev server.

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

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

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:

Install required packages:

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

Create a config-overrides.js file in your project root:

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;
};

Update your package.json scripts:

"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:

"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:

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:

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

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