Got an issue where a stompJS-lib was not found, upon which I got the following error message:
Module not found: Error: Can't resolve 'net' in '/../../../.../../../angular-app/node_modules/stompjs/lib'
The following command (which installs the missing dependencies):
npm i net -S
This does not install random packages as assumed below. If you want the frontend to have some level of non-authoritative processing to be done on the client-side of those required dependencies, then this is the option to consider.
To avoid installing random packages, you could add this into your Webpack configuration.
node: {
net: 'empty',
},
The issue is caused by expecting the net package which is a package from Node.JS and does not exist in the browser.
If you want more information and explanations you can find it here.
To expand a bit on Arthur Costa answer, if you're using NextJS, you can add a configuration in your configuration file to prevent this issue for specific imports.
Add those lines in a file named next.config.js
in your root project folder:
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.node = {
net: 'empty'
};
}
return config;
}
}
In case the problem appears with other built-in modules, you can add those alongside net
too.
Source: https://github.com/vercel/next.js/issues/7755#issuecomment-508633125
/pages/api/my-endpoint-service.ts
) and treat it like a proxy API. It comes with the benefit of the API calls I have being much more secure as well, because then you can't see the API URLs or API keys in the browser.
Apr 6, 2021 at 17:56
webpack v5 (add to webpack.config.js in module.exports):
resolve: {
fallback: {
net: false
}
},
If you are using Laravel, do this:
Install:
npm install util browserify-fs tls-browserify net-browserify stream-http https-browserify path-browserify crypto-browserify stream-browserify browserify-zlib os-browserify
Include this in Webpack.mix.js:
mix.webpackConfig({ resolve: { fallback: { "child_process": 'empty', "fs": require.resolve("browserify-fs"), "util": require.resolve("util"), "http": require.resolve("stream-http"), "https": require.resolve("https-browserify"), "tls": require.resolve("tls-browserify"), "net": require.resolve("net-browserify"), "crypto": require.resolve("crypto-browserify"), "path": require.resolve("path-browserify"), "os": require.resolve("os-browserify"), "stream": require.resolve("stream-browserify"), "zlib": require.resolve("browserify-zlib") } } });
If you don't use Laravel, include this in: Webpack.config.js or in your Webpack configuration file.
resolve: {
fallback: {
"child_process": 'empty',
"fs": require.resolve("browserify-fs"),
"util": require.resolve("util"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"tls": require.resolve("tls-browserify"),
"net": require.resolve("net-browserify"),
"crypto": require.resolve("crypto-browserify"),
"path": require.resolve("path-browserify"),
"os": require.resolve("os-browserify"),
"stream": require.resolve("stream-browserify"),
"zlib": require.resolve("browserify-zlib")
}
}
Why that?
Don't be mad at him, all he wants to know is how to deal with it, you need to indicate the respective module or set it to 'false'.
If you understand that this does not resolve, you can roll back the installations:
npm remove util browserify-fs tls-browserify net-browserify stream-http https-browserify path-browserify crypto-browserify stream-browserify browserify-zlib os-browserify
Alternative
resolve: {
fallback: {
"child_process": false,
"process": false,
"fs": false,
"util": false,
"http": false,
"https": false,
"tls": false,
"net": false,
"crypto": false,
"path": false,
"os": false,
"stream": false,
"zlib": false
}
}
That's because Net
is part of NodeJS, so it doesn't exist in the browser.
https://nodejs.org/api/net.html#net_net
Better update your Webpack configuration with
node: {
net: 'empty',
},
To expand on existing answers, and in particular for stompjs
, if you only need it in a browser environment, then you can use the base stomp.js
- it'll run just fine in-browser. It is located in /node_modules/stompjs/lib/stomp.js
.
So, adding this alias to your webpack config would solve it, without needing to blacklist a specific node dependency.
resolve: {
alias: {
'stompjs': __dirname + '/node_modules' + '/stompjs/lib/stomp.js',
}
}
It's not the direct answer to the original question but for those who came here with similar problem from search and are packing server-side (or userland) apps that are running with Node. The correct solution is to use Node target parameter:
-t, --target <value...> Sets the build target e.g. node.
ERROR in ./node_modules/@google/maps/node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\.....\...\node_modules\@google\maps\node_modules\https-proxy-agent'
ERROR in ./node_modules/@google/maps/node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\...\....\node_modules\@google\maps\node_modules\https-proxy-agent'
This is resolved by installing: npm i tls -S and then install npm i net -S