Class extends value undefined is not a constructor or null

[marcogiachin]

Following the Metaplex guide (https://docs.metaplex.com/programs/candy-machine/getting-started) this error occour in the first step of the getting started:

errors.ts:3 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at ./node_modules/@metaplex-foundation/mpl-token-metadata/dist/src/errors.js (errors.ts:3:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@metaplex-foundation/mpl-token-metadata/dist/src/hooked/metadataDelegateRoleSeed.js (metadataDelegateRoleSeed.ts:2:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@metaplex-foundation/mpl-token-metadata/dist/src/hooked/index.js (index.ts:1:1)
    at options.factory (react refresh:6:1)
.

Specifically the function that generates the error is:

const umi = createUmi("https://metaplex.devnet.rpcpool.com/").use(mplCandyMachine());
Without the ".use" the error goes away but all functions called after on the umi instance return the same error.

[lorisleiva]

Hi there 👋

I've just followed the same steps again and I can't reproduce the issue. Can you please share your package.json dependencies to see what versions you are using?

[marcogiachin]

Hi, i just created a react app from npx create-react-app and installed the dependencies as seen in the docs:

`npm install
@metaplex-foundation/umi
@metaplex-foundation/umi-bundle-defaults
@solana/web3.js
@metaplex-foundation/mpl-candy-machine@alpha

`

Package.json is:

{ "name": "react-metaplex-umi", "version": "0.1.0", "private": true, "dependencies": { "@metaplex-foundation/mpl-candy-machine": "^6.0.0-alpha.11", "@metaplex-foundation/umi": "^0.7.2", "@metaplex-foundation/umi-bundle-defaults": "^0.7.2", "@solana/web3.js": "^1.75.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

node version used is 18.16.0

When i run the application with npm start (npm version 9.5.1) i get the error. This seem to appear every time i recallmsomething from "mpl-candy-machine" package

[lorisleiva]

Thanks for that, I'm now able to reproduce. Stack Overflow says this is likely caused by a class circular dependency but I've checked all the errors classes inside mpl-token-metadata and umi and there aren't any circular dependencies there. I'll continue to investigate.

[lorisleiva]

Okay the issue is not related to circular dependencies but to interop issues with ESM and CJS modules. Create-react-app (CRA) imports Umi as an ESM module and mpl-candy-machine as a CJS module which itself tries to loadumi as a CJS which fails.

One way to fix this would be for us to export all Umi-compatible libraries (such as mpl-candy-machine) as dual packages (both ESM and CJS as opposed to just CJS for now) and I suspect that would make CRA happy.

That being said, most modern web frameworks will resolve dual package imports properly for you. In fact, I tried with NextJS and it works out of the box. If I remember correctly, the latest major version of CRA removed all dual package resolvers at build time and simply assumes that everything uses pure ESM which causes the issue here.

I'll close this since umi itself already exports both ESM and CJS but I've made note to do the same for the other Umi-compatible libraries.

In the meantime, I suggest using NextJS for your React app, or extend your CRA's webpack configs.

[kobyle69]

Hi @lorisleiva
Quite puzzled why is this issue closed? this been happening for quite some time now, with no clear solution on the horizon.
Some of us don't wish to change to nextjs and needs UMI to be functional which isn't the case.
Would be nice to have a workaround or a way to get this to work besides just marking this issue as closed, which is clearly fully opened.

[zpalmtree]

Hi @lorisleiva Quite puzzled why is this issue closed? this been happening for quite some time now, with no clear solution on the horizon. Some of us don't wish to change to nextjs and needs UMI to be functional which isn't the case. Would be nice to have a workaround or a way to get this to work besides just marking this issue as closed, which is clearly fully opened.

Hey, I also had this issue with create-react-app, I was able to solve it with this comment: facebook/create-react-app#12700 (comment)

[h0tgril]

Agree that this shouldn't be closed. This lib is the only time I've ever seen this issue with a regular React app, the error message was confusing, and the workaround is pretty intense.

I went the craco route, and it caused issues with the polyfills: https://stackoverflow.com/questions/74738438/add-polyfill-to-craco-issue-add-a-fallback-resolve-fallback