-
Notifications
You must be signed in to change notification settings - Fork 1
Description
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.