Skip to content

v0.1.0 and later by default only works in node.js (no browser support without polyfill) #26

@FabijanC

Description

@FabijanC

This is the error logged for a user using next.js (project link):

Import trace for requested module:
./node_modules/yauzl/index.js
./node_modules/decompress-unzip/index.js
./node_modules/decompress/index.js
./node_modules/starknet-devnet/dist/version-handler.js
./node_modules/starknet-devnet/dist/devnet.js
./node_modules/starknet-devnet/dist/index.js
./src/app/(site)/components/client/SelectNetwork.tsx
./src/app/(site)/components/client/LedgerWallet.tsx

./node_modules/graceful-fs/graceful-fs.js
Module not found: Can't resolve 'fs'

1. Polyfill solutions (temporary) - suggested by ChatGPT

1a. Implementing Polyfills in Next.js

Add a Custom Webpack Configuration (next.config.js):

By default, Next.js uses a custom Webpack configuration, so you can modify the configuration to include polyfills.

Add the following to your next.config.js:

Copy code
// next.config.js
module.exports = {
  webpack: (config) => {
    // Configure fallbacks for server-only modules
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false, // Set `fs` to `false` to avoid bundling
      path: require.resolve('path-browserify'), // Use browser polyfill for `path`
      os: require.resolve('os-browserify/browser'), // Use browser polyfill for `os`
    };
    return config;
  },
};

Explanation

fs: false tells Webpack to ignore the fs module in the browser environment.
path and os are replaced with browser-compatible polyfills like path-browserify and os-browserify.

1b. Install Browser-Compatible Polyfills:

If you want to use polyfills for specific modules, install them via npm

Long term solution

Use a decompression library for .tar.gz files, not relying on fs. The decompress library, currently used, does rely on it. If fs issues are still present due to direct imports in starknet-devnet-js code, consider using dynamic imports of fs.

EDIT

Also net and child_process need to be set to false in the webpack-config approach.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions