Error instantiating class Metaplex

[aeaa1998]

[aeaa1998]

Package.json config file

{
  "name": "iam-gt",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-brands-svg-icons": "^6.1.2",
    "@fortawesome/free-regular-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/vue-fontawesome": "^3.0.1",
    "@kyvg/vue3-notification": "^2.3.5",
    "@metaplex-foundation/js": "0.14.0",
    "@metaplex-foundation/mpl-token-metadata": "2.2.3",
    "@solana/spl-token": "^0.3.0",
    "@solana/wallet-adapter-phantom": "^0.9.9",
    "@solana/web3.js": "^1.52.0",
    "@vee-validate/rules": "^4.6.5",
    "@vueuse/core": "^9.1.0",
    "autoprefixer": "^10.4.7",
    "buffer": "^6.0.3",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "postcss": "^8.4.14",
    "react": "^18.2.0",
    "sass-loader": "^13.0.0",
    "solana-wallets-vue": "^0.4.2",
    "tailwindcss": "^3.1.3",
    "vee-validate": "^4.6.5",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "resolutions": {
    "@metaplex-foundation/mpl-candy-machine": "4.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "no-unused-vars": "off",
      "prettier/prettier": 0,
      "vue/multi-word-component-names": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

[lorisleiva]

My guess is that you're trying to import the library as a CJS module inside an ESM module.

[aeaa1998]

I am importing like this and using it like this

import { Metaplex } from '@metaplex-foundation/js'
const { connection } = useWorkspace()
const metaplex = Metaplex.make(connection)

I updated my package json to fix it with "type": "module" added at the top but still it does not work i am using webpack 5 . Do you have an idea why it is not working?

[lorisleiva]

Did you check this guide for Webpack 5? https://github.com/metaplex-foundation/js-examples/tree/main/getting-started-react-cra5

[aeaa1998]

Yes!! It did not worked but moved to vite and it worked. Im pretty sure there is something I did not configure correctly but thanks for the support @lorisleiva 🙌🏻.

[gxxcastillo]

I'm getting the same error after trying to migrate my existing, working app to use this new library. I've followed the webpack 5 instructions in the docs but still no go.