Help configuring Vite

Moralis General
#1

Hi, has anyone had success configuring Vite to work with Moralis?

I have had extreme problems, one after another.

I have found some work-arounds on the internet to solve:

  • Process (env vars)
  • Buffer
  • Global

I installed Moralis via npm

My main.js looks like this:

import { createApp } from 'vue'
import App from './App.vue'
import Moralis from './moralis'

createApp(App)
    .provide('$moralis', Moralis)
    .mount('#app')

And the imported ./moralis.js file from above looks like this:

import Moralis from "moralis";

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

export default Moralis;

My vite.config.js now looks something like this:

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import path from 'path';
import inject from '@rollup/plugin-inject';

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/],
    }),
  ],
  resolve: {
    alias: {
      '/@src/': `/src/`,
      process: 'process/browser',
      stream: 'stream-browserify',
      zlib: 'browserify-zlib',
      util: 'util',
      web3: path.resolve(__dirname, './node_modules/web3/dist/web3.min.js'),
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        inject({ Buffer: ['Buffer', 'Buffer'] }),
        inject({ Buffer: ['process', 'process'] }),
      ],
    },
  },
});

But now I get this error:

image
image1592×856 131 KB

Any suggestions would be appreciated.

Thanks

#2

Hello,

I tested it and I have no errors in DEV but in prod.

In vite.config.js I have removed stream: 'stream-browserify', because I don’t need it.

Then into .env and moralis.js I changed the env variables from VUE_APP to VITE_APP env-variables documentation

I’m getting issues in build now, but dev works as aspected.

#3

Hello I have the same issue with vite app -> works in dev but not in prod! Did you manage to handle your error?