JavaScript SDK Troubleshooting

Vite Build Errors

Q: I'm getting warnings like "Module "buffer" has been externalized for browser compatibility" when building with Vite. How do I fix this?

A: 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.

Q: I'm getting a "Cannot read properties of undefined (reading 'from')" error in hdkey-without-crypto.js. How do I fix this?

A: 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.

Q: I'm getting a "require is not defined" error when using `vite preview`. How do I fix this?

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

Q: I'm getting "Module not found" errors for Node.js core modules when using create-react-app. How do I fix this?

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

Q: How do I deal with 'failed to parse source map' warnings?

A: You can 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

Q: I'm getting a "Named export 'curves' not found" error with the elliptic package in Next.js 13/14. How do I fix this?

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

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

Q: I'm having issues importing SDK modules in Next.js 13 with the App Router. What should I do?

A: Use the SDK Code Splitting method for imports:

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

Q: I'm getting a "Cannot read properties of undefined (reading 'fromMasterSeed')" error in Next.js 12. How do I fix this?