Usage with ReactJS/Jest: TypeError: Cannot read property 'base16' of undefined

[D4nte]

• Version: 0.32.1
• Platform: Linux 5.10.49-1-MANJARO We are renaming the prefix of our JavaScript modules from 'node-' to 'js-' #1 SMP PREEMPT Sun Jul 11 12:59:43 UTC 2021 x86_64 GNU/Linux

Severity: High

Description:

It does not seem possible to react-scripts to run testws when using libp2p in a ReactJS app.
The following error systematically appears: TypeError: Cannot read property 'base16' of undefined.

See steps below.

Steps to reproduce the error:

npx create-react-app react-libp2p --use-npm
cd react-libp2p
npm i libp2p
echo "import Libp2p from 'libp2p';" >> src/App.js
npm run test # Press 'a'

Error:

  ● Test suite failed to run

    TypeError: Cannot read property 'base16' of undefined

      24 |
      25 | export default App;
    > 26 | import Libp2p from 'libp2p';
         | ^
      27 |

      at Object.<anonymous> (node_modules/uint8arrays/util/bases.js:67:16)
      at Object.<anonymous> (node_modules/uint8arrays/from-string.js:3:15)
      at Object.<anonymous> (node_modules/libp2p-crypto/src/keys/index.js:8:30)
      at Object.<anonymous> (node_modules/peer-id/src/index.js:16:20)
      at Object.<anonymous> (node_modules/libp2p/src/index.js:10:16)
      at Object.<anonymous> (src/App.js:26:1)
      at Object.<anonymous> (src/App.test.js:2:1)

Edit: The same issue happens with yarn:

yarn create react-app yarn-react-libp2p
cd yarn-react-libp2p
yarn add libp2p
echo "import Libp2p from 'libp2p';" >> src/App.js
yarn test

[D4nte]

Some relevant versions:

▶ npm ls uint8arrays
react-libp2p@0.1.0 /home/froyer/src/react-libp2p
└─┬ libp2p@0.32.1
  ├─┬ interface-datastore@5.1.1
  │ └── uint8arrays@2.1.8
  ├─┬ libp2p-crypto@0.19.6
  │ └── uint8arrays@2.1.8 deduped
  ├─┬ libp2p-interfaces@1.0.1
  │ └── uint8arrays@2.1.8 deduped
  ├─┬ multiaddr@10.0.0
  │ └── uint8arrays@2.1.8 deduped
  ├─┬ multistream-select@2.0.0
  │ └── uint8arrays@2.1.8 deduped
  └─┬ peer-id@0.15.2
    └── uint8arrays@2.1.8 deduped
▶ npm ls multiformats
react-libp2p@0.1.0 /home/froyer/src/react-libp2p
└─┬ libp2p@0.32.1
  ├─┬ interface-datastore@5.1.1
  │ └─┬ uint8arrays@2.1.8
  │   └── multiformats@9.4.3 deduped
  ├─┬ libp2p-crypto@0.19.6
  │ └── multiformats@9.4.3 deduped
  ├─┬ libp2p-interfaces@1.0.1
  │ └── multiformats@9.4.3 deduped
  ├─┬ multiaddr@10.0.0
  │ └── multiformats@9.4.3 deduped
  ├── multiformats@9.4.3
  └─┬ peer-id@0.15.2
    └── multiformats@9.4.3 deduped

[vasco-santos]

Hey @D4nte

I think this is because react-scripts is using webpack4. And I noticed a few days that it does not support package.json export maps, which means this kind of https://github.com/multiformats/js-multiformats/blob/master/package.json#L38-L96 is not working with webpack4, and is just supported from webpack5 onwards.

[D4nte]

Thanks for the investigation.
Webpack 5 support is merged in react-scripts, just pending a new release: facebook/create-react-app#11201

They mention alpha releases, I'll investigate there. Happy to close this for now.