"Module not found:" compilation error for modules (stream, http, https, constants, zlib_bindings)

Describe the bug I wanted to make use of an npm package “ccxt”. When importing it in a component/module or anywhere in the project I get the following errors:

Codepen/jsFiddle/Codesandbox (required)

• not sure if this is possible with an error relaed to webpack5 and 3rd party library.

To Reproduce Steps to reproduce the behavior:

1. initialize project

  quasar create my_new_app
  yarn add ccxt

1. add import 'ccxt' or var ccxt = require ('ccxt') to any javascript/vue file
2. quasar dev
3. See error:

quasar dev

 Dev mode.......... spa
 Pkg quasar........ v2.0.0
 Pkg @quasar/app... v3.0.0
 Pkg webpack....... v5
 Debugging......... enabled

 Configured browser support (>= 87.60% of global marketshare):
 · Chrome for Android >= 91
 · Firefox for Android >= 89
 · Android >= 91
 · Chrome >= 81
 · Edge >= 88
 · Firefox >= 80
 · iOS >= 11.0-11.2
 · Opera >= 72
 · Safari >= 11.1


 App • ⚠️  ️️Setting port to closest one available: 8081

 App • Chaining "UI" Webpack config
 App •  WAIT  • Compiling of "UI" in progress...
 App •  DONE  • "UI" compiled with errors • 10403ms



 App •  ERROR  •  UI  in ./node_modules/ccxt/js/static_dependencies/node-fetch/index.js

Module not found: Can't resolve imported dependency "stream"
Did you forget to install it? You can run: yarn add stream

 App •  ERROR  •  UI  in ./node_modules/ccxt/js/static_dependencies/node-fetch/index.js

Module not found: Can't resolve imported dependency "http"
Did you forget to install it? You can run: yarn add http

 App •  ERROR  •  UI  in ./node_modules/ccxt/js/static_dependencies/node-fetch/index.js

Module not found: Can't resolve imported dependency "https"
Did you forget to install it? You can run: yarn add https

 App •  ERROR  •  UI  in ./node_modules/ccxt/js/static_dependencies/node-rsa/schemes/pkcs1.js

Module not found: Can't resolve imported dependency "constants"
Did you forget to install it? You can run: yarn add constants

 App •  ERROR  •  UI  in ./node_modules/zlib/lib/zlib.js

Module not found: Can't resolve imported dependency "./zlib_bindings"


 App •  COMPILATION FAILED  • Please check the log above for details.

Issues checking in progress...
No issues found.

Expected behavior App should compile,

Platform (please complete the following information): Quasar Version: @quasar/app Version: v2.0.0

Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: Ubuntu 20.04 Node: v14.17.1 NPM: 6.14.13 Yarn: 1.22.5

Additional context

I think this is a quasar/webpack5 issue, as there are other projects which can make use of ccxt through yarn/npm + vue. I successfully compiled this one here for example:

https://github.com/MoiOcanas/vue-ccxt

I suspect its something in the webpack configuration. Here are some possibly related issues

https://github.com/ethers-io/ethers.js/issues/998 https://jahed.dev/2021/02/06/upgrading-to-webpack-5/

The last one sounds like it has something to do with webpack v4 automatic polyfills?

I am not an expert on this. But any help on how to configure quasar/webpack5 in order to get rid of the above errors would be appreciated!

[yeus]

@hawkeye64 thx, that helped, finally got it compiling. FOr those who have a similar problem, I had to extend the chainWebPack in quasar.conf.js like this:

  chainWebpack (chain) {
    // this is in order to support the not-updated version of ccxt:
    // also needs: 
    //    yarn add --dev node-polyfill-webpack-plugin browserify-zlib
    const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
    chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
    chain.resolve.alias.set('zlib', 'browserify-zlib')
  },

[rstoenescu]

This is due to Webpack 5 not shipping with nodejs polyfills anymore. Explanation is found on the upgrade guide (along with a solution): https://quasar.dev/start/upgrade-guide#nodejs-polyfills