ModuleNotFoundError: Module not found: Error: Can't resolve 'dgram' in [...]

This also happens with webpack in the browser, as osc-js thinks its node when __dirname is set, see https://github.com/adzialocha/osc-js/blob/d5693c6cc4013fe39658a233ca37f44ff3e4b03a/src/plugin/dgram.js#L1 .

The Problem: webpack will set __dirname in the browser too, which results in webpack trying to resolve dgram in the browser, which fails.

Yes, the problem can be avoided with a custom webpack config, but thats not a perfect solution, because sometimes, you will not have direct access to the webpack config. For example in create-react-app (on of the most widely used ways to create frontend projects), you will only get to configure webpack after ejecting, which you would want to avoid.

An easy fix would be to use window or global to differentiate between node and browser, see https://stackoverflow.com/questions/4224606/how-to-check-whether-a-script-is-running-under-node-js

This happens when using node.js with webpack due to breaking changes upgrading webpack from v4 to v5. In short: When it comes to polyfills, v4 automatically sets all requires of node.js internals (fs, path, dgram, …) to false packing for the browser. In v5 we explicitly have to state that there is NO polyfill, otherwise it triggers a warning, leaving osc-js useless.

Solutions

• Use webpack < v5
• Use a fallback:
  • In webpack.config.js:

    module.exports = {
      //...
      resolve: {
        fallback: {
         "dgram": false, // do not include a polyfill for dgram,
        },
      },
    };
    

  • or when using the API in a build script:

     const webpackCompiler = webpack({
       // ...
       resolve: {
         fallback: { "dgram": false }
       },