TypeError: _message_rpc_js__WEBPACK_IMPORTED_MODULE_8__.RPC is undefined

[fryorcraken]

This is a bug report/

Problem

When using js-waku 0.25-rc.0 in ReactJS:

 libp2p:gossipsub:error createOutboundStream error +0ms TypeError: _message_rpc_js__WEBPACK_IMPORTED_MODULE_8__.RPC is undefined
    sendRpc index.ts:2121
    sendSubscriptions index.ts:1151
    createOutboundStream index.ts:712

I am guessing it's because RPC is imported from a CJS module and the default webpack config of react scripts is not handling it properly:

https://github.com/ChainSafe/js-libp2p-gossipsub/blob/master/src/message/rpc.js

Proposed Solutions

Need to check what is the best way to import CJS in an ESM package in the browser to ideally not have to touch the react scripts webpack config.

Note that this would also be resolved if protons was used instead: ChainSafe/js-libp2p-gossipsub#318

[fryorcraken]

@filoozom are you using Waku Relay? Do you face this issue or is Vite properly handling CJS imports ?

[filoozom]

@filoozom are you using Waku Relay? Do you face this issue or is Vite properly handling CJS imports ?

I've used waku.relay.send(message) successfully with 0.25.0-rc.0 and Vite 3.0.4 and haven't encountered any such error.

[fryorcraken]

Found the issue: babel does not process files with .cjs extension when processing dependencies.

As @chainsafe/libp2p is an ESM application that has one commonjs file for the RPC rpc.cjs this file does not get loaded by babel and hence is missing from the bundle.

React babel config in webpack: https://github.com/facebook/create-react-app/blob/9802941ff049a28da2682801bc182a29761b71f4/packages/react-scripts/config/webpack.config.js#L469 (the one with babel-preset-react-app/dependencies).

To fix it, one can eject their react app and modify the test property for the babel dependencies processins to include cjs:

from

{  
  test: /\.(js|cjs)$/,  
  exclude: /@babel(?:\/|\\{1,2})runtime/,  
  loader: require.resolve('babel-loader'),  
  options: {  
    babelrc: false,  
    configFile: false,  
    compact: false,  
    presets: [  
      [  
        require.resolve('babel-preset-react-app/dependencies'),  
        { helpers: true },  
      ],  
    ],  
    cacheDirectory: true,  
    // See #6846 for context on why cacheCompression is disabled  
    cacheCompression: false,  
  
    // Babel sourcemaps are needed for debugging into node_modules  
    // code.  Without the options below, debuggers like VSCode    // show incorrect code and set breakpoints on the wrong lines.    sourceMaps: shouldUseSourceMap,  
    inputSourceMap: shouldUseSourceMap,  
  },  
},

to

{  
  test: /\.(js|cjs|mjs)$/,  
  exclude: /@babel(?:\/|\\{1,2})runtime/,  
  loader: require.resolve('babel-loader'),  
  options: {  
    babelrc: false,  
    configFile: false,  
    compact: false,  
    presets: [  
      [  
        require.resolve('babel-preset-react-app/dependencies'),  
        { helpers: true },  
      ],  
    ],  
    cacheDirectory: true,  
    // See #6846 for context on why cacheCompression is disabled  
    cacheCompression: false,  
  
    // Babel sourcemaps are needed for debugging into node_modules  
    // code.  Without the options below, debuggers like VSCode    // show incorrect code and set breakpoints on the wrong lines.    sourceMaps: shouldUseSourceMap,  
    inputSourceMap: shouldUseSourceMap,  
  },  
},

(note if you use TypeScript then the test property will also include ts and tsx, do not remove them.

[fryorcraken]

An upstream PR is already open: https://github.com/facebook/create-react-app/pull/12605/files

[fryorcraken]

This is only specific to ReactJS that does not include .cjs file in babel processing.

Can be mitigating using craco: https://github.com/waku-org/js-waku-examples/blob/upgrade-js-waku/relay-reactjs-chat/craco.config.js

[fryorcraken]

I tried to open a master issue on react repo: facebook/create-react-app#12700