Quasar Framework + Moralis Fix

Technical Issue Reporting
#1

Hey,

So this is not really an issue. I just want to leave this in case anyone who works with Quasar had the issue using Moralis API. Because it took me like 5 hours to manage to find a fix. And if you don’t have much experience with webpack you might be very much confused about the errors when compiling the quasar app.

Besically you will get a lot of errors saying that some packages are missing “crypto”, “stream” and even “assert” but many many more… Besically it turns out its webpack v5 issues of the 3rd party libraries.

So either go back to webpack v4, or read more here: https://quasar.dev/quasar-cli/handling-webpack#webpack-v5-compatibility-issues

Hope this saves you some time!

3 Likes
#2

Thanks for the info, im sure this will save a lot of time for others!!

1 Like
#3

I’m using Quasar PWA and SSR with Moralis for while, in case anybody has some questions.

To use Moralis with latest Quasar ^2 and Webpack 5 like normal, do this:

  1. add node-polyfill-webpack-plugin with Yarn or NPM to dependencies.

  2. import the polyfill in quasar.conf.js on the top and add it to Webpack build chain:

// maybe remove in future updates? https://github.com/quasarframework/quasar/issues/9175
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = configure(function (ctx) {
  return {
    boot: [
      'moralis',
    ],

    build: {
      chainWebpack (chain) {
        chain.plugin('node-polyfill-webpack-plugin')
          .use(NodePolyfillPlugin, [{}])
      },
    },

To import Moralis so it will also work with SSR, use a boot file placed in src/boot/moralis.js and reference it in the quasar config (see above) :

import { Moralis } from 'moralis'

Moralis.start({
  serverUrl: process.env.VUE_APP_MORALIS_SERVER_URL,
  appId: process.env.VUE_APP_MORALIS_APP_ID,
});

export { Moralis }

enjoy building :woman_mage:

2 Likes