0

I'm trying to build a simple smart contract deployment app with Vue and truffle, BUT numerous compile errors are on my way.Each of these packages(web3, solc and truffle) has caused compile error mainly consistin something along the lines of:

Uncaught ReferenceError: global is not defined

My project setup is as follows: Vue3 - Vite - truffle/hdwallet-provider2.0.3 - solc 0.8.11 - web3 1.7.0

i have been able to remove solc and web3 related errors by transferring my solidity compilation logic to a backend node js server but Truffle is still bugging me.

Here is an example: \App.vue

<script setup lang="ts">
import HDWalletProvider from "@truffle/hdwallet-provider";
import { onMounted } from "@vue/runtime-core";

onMounted(() => {
  setTimeout(() => {
    if (1 > 0) {
      const provider = new HDWalletProvider("mnemonic", "infura url");
    }
  }, 5000);
});
</script>

<template>
  <div>Hello World</div>
</template>

Which results in the mentioned global is not defined error

removing the const provider = new HDWalletProvider("mnemonic", "infura url"); line from the code above removes the error which is weird because the library is still being imported.

I event tried using nuxtjs and forcing the app to perform only on client side browser but still no luck.

My whole understanding of the problem is that these libraries require browser-specific value such as window and process that are not being initialized in compile time. Any solutions?

1 Answer 1

0

You must config vite:

  1. install GlobalsPolyfills from @esbuild-plugins/node-globals-polyfill
  2. according to https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = {...process.env, ...loadEnv(mode, process.cwd(), '')}
  return {
    plugins: [vue()],
    server: {
      host: "0.0.0.0",
      port: Number(env.VITE_PORT)
    },
    // vite config
    define: {
      __APP_ENV__: env.APP_ENV
    },
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)), 
        http: "http-browserify",
        https: "https-browserify",
      }
    },
    optimizeDeps: {
      esbuildOptions: {
        plugins: [
          GlobalsPolyfills({
            process: true,
            buffer: true
          })
        ],
        define: {
          global: 'globalThis'
        }
      }
    }
  }
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.