Unable to resolve "@socket.io/component-emitter"

[jpgorman]

Describe the bug
Using socket.io-client in react native causes a build error

Web Bundling failed 5906ms
Unable to resolve "@socket.io/component-emitter" from "node_modules/socket.io-client/build/esm/manager.js"

To Reproduce

Please fill the following code example:

Socket.io-client version: ^4.7.2

Client

import io from "socket.io-client"; 
...

Expected behavior
To resolve Socket.io-client library modules

Platform:

• React Native: 0.72.6
• Metro bundler: 0.76.8
• Expo: ~49.0.15
• OS: [e.g. Mac OS 9.2]

Additional context
I did find a work around via the metro bundler config using the following

  const { getDefaultConfig } = require('expo/metro-config');
   /** @type {import('expo/metro-config').MetroConfig} */
   const config = getDefaultConfig(__dirname, {
    ...
   });
   
   
   module.exports = (async () => {
    // add support to implicitly resolve modules with .(c|m)js extensions
    config.resolver.sourceExts.push('cjs');
    config.resolver.sourceExts.push('mjs');
    return config;
   })();

[123zarif]

I am getting this error. Did anyone found any solution?

[darrachequesne]

This is weird. The @socket.io/component-emitter package does exist and is listed in the dependencies, so it seems like the bundler is not happy with scoped packages (@socket.io/...).

Is it resolved in newer versions of React Native (0.73.4 currently)?

Possibly related: facebook/react-native#29489

[darrachequesne]

Source of the @socket.io/component-emitter package: https://github.com/socketio/emitter

[123zarif]

Did anyone found any solution?

[darrachequesne]

This should be fixed by socketio/emitter@ba6b56d, included in @socket.io/component-emitter@3.1.1.

@jpgorman @123zarif could you please check?

[jpgorman]

@darrachequesne Thanks for the udpate, yes this does fix the issue with the socket.io-client import for me.

For clarity though it's worth noting that I was also getting similar import issues with other dependencies.

With a little more digging the fix is documented in the metro bundler docs which is demonstrated in the following snippet:

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname, {
...
});
 
module.exports = (async () => {
  // add support to resolve modules with .(c|m)js extensions
  config.watcher.additionalExts = ['cjs', 'mjs']
  return config;
})();

[darrachequesne]

@jpgorman awesome, thanks for the update 👍