Errors concerning new versions of wallet-adapter and create-react-app

[rde9]

In the commit anza-xyz/wallet-adapter@0c474c6 , getter functions like getPhantomWallet had been changed to adapters like PhantomWalletAdapter. However, as I modifying these pieces of code to the latest style and running npm start, it showed that:

ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in '/root/p/solana-boilerplate/node_modules/cipher-base'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
resolve 'stream' in '/root/p/solana-boilerplate/node_modules/cipher-base'
  Parsed request is a module
  using description file: /root/p/solana-boilerplate/node_modules/cipher-base/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /root/p/solana-boilerplate/node_modules/cipher-base/node_modules doesn't exist or is not a directory
      /root/p/solana-boilerplate/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /root/p/solana-boilerplate/node_modules
        single file module
          using description file: /root/p/solana-boilerplate/package.json (relative path: ./node_modules/stream)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.jsx doesn't exist
        /root/p/solana-boilerplate/node_modules/stream doesn't exist
      /root/p/node_modules doesn't exist or is not a directory
      /root/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /root/p/solana-boilerplate/node_modules
        single file module
          using description file: /root/p/solana-boilerplate/package.json (relative path: ./node_modules/stream)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.web.mjs doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.mjs doesn't exist
            .web.js
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.web.js doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.json doesn't exist
            .web.jsx
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.web.jsx doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /root/p/solana-boilerplate/node_modules/stream.jsx doesn't exist
        /root/p/solana-boilerplate/node_modules/stream doesn't exist
 @ ./node_modules/create-hash/browser.js 11:11-33
 @ ./node_modules/ethereumjs-util/dist.browser/hash.js 10:17-39
 @ ./node_modules/ethereumjs-util/dist.browser/index.js 46:13-30
 @ ./node_modules/@toruslabs/base-controllers/dist/baseControllers.esm.js 5:0-142 939:15-25 940:15-25 941:15-26 942:29-39 943:29-39 944:15-29 945:9-21 1034:13-32 1040:18-32 1041:17-23 1042:30-41
 @ ./node_modules/@toruslabs/solana-embed/dist/solanaEmbed.esm.js 3:0-173 362:19-41 614:21-62 624:28-69 631:28-68 633:28-70 639:28-71 686:16-61 730:14-54 739:16-56 802:14-54 1029:21-60 1031:28-71 1033:28-64 1065:16-56 1411:38-77 1586:14-47 1634:14-53 1642:14-59 1667:14-50 1680:14-46
 @ ./node_modules/@solana/wallet-adapter-torus/lib/esm/adapter.mjs 50:18-51
 @ ./node_modules/@solana/wallet-adapter-torus/lib/esm/index.mjs 1:0-30 1:0-30
 @ ./node_modules/@solana/wallet-adapter-wallets/lib/esm/index.mjs 17:0-45 17:0-45
 @ ./src/App.js 13:0-17:135 213:6-26 213:34-55 213:63-82 215:10-38
 @ ./src/index.js 7:0-24 16:33-36

I refered this thread, changed react-scripts to ^4.0.3 and npm install again (Btw this major update seems happened here facebook/create-react-app@0c72a32)
Then another error emerged:

./node_modules/@solana/wallet-adapter-wallets/lib/esm/adapters.mjs Can't import the named export 'BitKeepWalletAdapter' from non EcmaScript module (only default export is available)

This was mentioned in anza-xyz/wallet-adapter#330 . But the solution is to change CRA4 to CRA5? Does it mean to change the react-scripts back? The situation looks hard for me as a beginner🤯... I need some help.

[kanav99]

Hello @rde9 ! Thanks for the issue and mail. I just did a fresh clone of repository, ran npm install and then npm run start and the frontend ran as expected! Are you deleting or modifying the package-lock.json file by updating the dependencies? Please check if it is modified. People usually commit the package-lock.json file when they expect some breaking changes in future and I did the same for it.

But if you are trying to update the dependencies, I would need some time to fix. I will message you back once I am ready with a fix.

[rde9]

Just successfully completed the rest of steps with this repository. So npx create-react-app solana-boilerplate --template @chakra-ui command which by default pulls the latest codes does have some conflicts with the latest wallet-adapter. I tried to diff their package-lock.json between two folders but there are too many changes to determine the cause of the problem. Thanks again for the tutorial and looking forward to the update!

[s-bilic]

@rde9 Maybe a bit late, but had the same problem with the, stream + crypto webpack issue.

Quick fix for me was: node_modules > react-scripts > config > webpack.config.js

Add this as a fallback in the resolve object:

resolve: { fallback: { "crypto": false, "stream": false }, }

[s-bilic]

Managed to completely solve this issue (for people using react-app, also if you do not have a custom webpack config):

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

^ this issue is due webpack going to v5 and it breaks some modules. But we can override the default webpack config by following these steps:

1. npm install react-app-rewired / yarn add react-app-rewired
2. In package.json: Replace 'react-scripts' with 'react-app-rewired' in your scripts.. => "start": "react-app-rewired start"
3. In the root of the project add a config-overrides.js file:

module.exports = function override(config, env) {
        config.resolve.fallback = {
            crypto: false,
            stream: false,
            ...config.resolve.fallback
        };  
        return config
    }

4. Make sure to restart your app or even do a fresh node_modules install