Management API Reference

JavaScript SDK Troubleshooting

Table of Contents#

  1. Vite Build Errors
  2. Webpack Build Errors
  3. Next.js Build Errors
  4. Support

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:

  1. Install vite-plugin-node-polyfills:


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

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


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

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

  1. Install the buffer package:


    _10
    npm install buffer
    _10
    # or
    _10
    yarn add buffer

  2. Update your vite.config.ts:


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

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


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

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:

  1. Install required packages:


    _10
    npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
    _10
    # or
    _10
    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:


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

  3. Update your package.json scripts:


    _10
    "scripts": {
    _10
    "start": "react-app-rewired start",
    _10
    "build": "react-app-rewired build",
    _10
    "test": "react-app-rewired test",
    _10
    "eject": "react-scripts eject"
    _10
    }

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:


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

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:


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

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:


_10
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?#

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


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

Q: I'm getting a "Could not detect network" error on Next.js 14 API endpoint with JsonRpcProvider. How do I fix this?#

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