Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
FabijanC opened this issue Sep 30, 2024 · 0 comments · Fixed by #27
Closed
Assignees
Labels
bug Something isn't working

Comments

@FabijanC
Copy link
Contributor

FabijanC commented Sep 30, 2024

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.

@FabijanC FabijanC added the bug Something isn't working label Sep 30, 2024
@FabijanC FabijanC self-assigned this Sep 30, 2024
@FabijanC FabijanC mentioned this issue Oct 1, 2024
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant