1

It looks like someone previously asked the question and deleted it - sadly I can see the question in search engines but can't see the answer!

When I import Metaplex:

import { Metaplex } from "@metaplex-foundation/js";

I get the error:

client.ts:113 
        
       ReferenceError: process is not defined
    at ../node_modules/util/util.js (util.js:109:1)
    at __require2 (chunk-S5KM4IGW.js?v=be48f729:18:50)
    at ../node_modules/avsc/lib/utils.js (types.js:11:12)
    at __require2 (chunk-S5KM4IGW.js?v=be48f729:18:50)
    at ../node_modules/avsc/lib/types.js (avsc-types.js:17:13)
    at __require2 (chunk-S5KM4IGW.js?v=be48f729:18:50)
    at ../node_modules/avsc/etc/browser/avsc-types.js (services.js:11:13)
    at __require2 (chunk-S5KM4IGW.js?v=be48f729:18:50)
    at ../node_modules/avsc/etc/browser/avsc-services.js (browser-external:zlib:11:17)
    at __require2 (chunk-S5KM4IGW.js?v=be48f729:18:50)

Uncommenting the import makes the error go away, which is why I'm sure it's Metaplex. I understand the error - it looks like Metaplex wants to use process from node. which isn't availabl in the browser - but I can't understand why metaplex wants to use process or how to make metaplex not require process.

This is a front end project using Svelte and vite.

2
  • were you able to solve it? Commented Oct 4, 2022 at 20:22
  • @ArjunSingh Yes, thanks for the reminder, I've added my solution below for you.
    – mikemaccana
    Commented Oct 5, 2022 at 7:39

1 Answer 1

2

I eventually solved this adding a polyfill for process into my vite.config.ts

define: {
  "process.env": process.env ?? {},
},

Here's my full vite.config.ts for reference:

// https://vitejs.dev/config/
import { defineConfig } from "vite";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import nodePolyfills from "rollup-plugin-node-polyfills";
import { svelte } from "@sveltejs/vite-plugin-svelte";

// Config is based on metaplex + vite example from:
// https://github.com/metaplex-foundation/js-examples/tree/main/getting-started-vite

// es2020 Needed for BigNumbers
// See https://github.com/sveltejs/kit/issues/859

export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      stream: "rollup-plugin-node-polyfills/polyfills/stream",
      events: "rollup-plugin-node-polyfills/polyfills/events",
      assert: "assert",
      crypto: "crypto-browserify",
      util: "util",
    },
  },
  define: {
    "process.env": process.env ?? {},
  },
  build: {
    target: "es2020",
    rollupOptions: {
      plugins: [nodePolyfills({ crypto: true })],
    },
    // From https://github.com/vitejs/vite/issues/9703#issuecomment-1216662109
    commonjsOptions: {
      include: [],
    },
  },
  optimizeDeps: {
    // From https://github.com/vitejs/vite/issues/9703#issuecomment-1216662109
    disabled: false,
    esbuildOptions: {
      define: {
        global: "globalThis",
      },
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
      target: "es2020",
    },
  },
});

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.