ModuleNotFoundError: Module not found: Error: Can't resolve 'dgram' in [...] about osc-js

[tschnz]

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 }
       },
    

[felixroos]

This also happens with webpack in the browser, as osc-js thinks its node when __dirname is set, see

osc-js/src/plugin/dgram.js

Line 1 in d5693c6

const dgram = typeof __dirname !== 'undefined' ? require('dgram') : undefined

.

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

[adzialocha]

An easy fix would be to use window or global to differentiate between node and browser,

Thank you for this hint @felixroos, I'll look into it now! 😃

[adzialocha]

That didn't work for me unfortunately. It works if a try-catch is added

Alright, I've made some experiments and think the best solution is to tackle the problem during the build process by:

1. Introducing a browser field in package.json which points at the special browser build osc.min.js
2. Replace dgram and ws with custom files during browser builds to have better control than just checking global contexts

It works for me with Webpack / simple static html websites and in Node 👍

See PR here: #63 I'll do some more testing and merge, release this soon!

[yaxu]

That didn't work for me unfortunately. It works if a try-catch is added, like:

  var dgram;
  try {
    dgram = require('dgram');
  } catch(error) {
    if (typeof window === 'undefined') {
      throw(error);
    }
  }

... and the same for dgram$1.

However, it doesn't seem to be working for @felixroos even then..

[adzialocha]

This should be fixed now in v2.3.2. Let me know if the problem still persists, then I'll re-open this issue 👍

[adzialocha]

I've published a fix in release v2.3.1, could you tell me if this works for you @felixroos and @schlenger?

[yaxu]

Brilliant, thanks!