We are facing this issue while running this from the app (Attempted import error: 'Struct' is not exported from '@metamask/superstruct)

Help - Plug n Play
1

We are facing this issue while running
this from the app

./node_modules/@metamask/utils/dist/json.mjs
Attempted import error: ‘Struct’ is not exported from '@metamask/superstruct

Our node version is 16.13.0 and we are using on react version 18 and javascript(no typescript)

Issue is generated when we try to import the following from your libraries

import { Web3Auth } from “@web3auth/modal”;
import { CHAIN_NAMESPACES, IProvider, WEB3AUTH_NETWORK } from “@web3auth/base”;
import { EthereumPrivateKeyProvider } from “@web3auth/ethereum-provider”;

2

Hey @awaisargontech welcome aboard, can you share some more details about your implementation and packages. Can you share content of your package.json file?

3

“dependencies”: {
“@ emotion/cache”: “^11.4.0”,
“@ emotion/react”: “^11.4.0”,
“@ emotion/styled”: “^11.3.0”,
“@ fontsource/poppins”: “^4.5.10”,
“@ fontsource/public-sans”: “^4.5.12”,
“@ fontsource/source-sans-pro”: “^4.5.11”,
“@ iconify-icon/react”: “^1.0.1”,
“@ iconify-icons/eva”: “^1.2.3”,
“@ iconify/icons-eva”: “^1.2.3”,
“@ iconify/react”: “^4.0.0”,
“@ material-ui/core”: “^4.12.4”,
“@ material-ui/icons”: “^4.11.3”,
“@ metamask/detect-provider”: “^2.0.0”,
“@ mui/base”: “^5.0.0-beta.21”,
“@ mui/icons-material”: “^5.10.14”,
“@ mui/lab”: “^5.0.0-alpha.50”,
“@ mui/material”: “^5.0.3”,
“@ mui/styles”: “^5.0.1”,
“@ mui/system”: “^5.0.3”,
“@ mui/utils”: “^5.0.1”,
“@ mui/x-data-grid”: “^5.0.0-beta.3”,
“@ mui/x-date-pickers”: “^6.18.6”,
“@ nexeraid/identity-sdk”: “^1.1.223”,
“@ react-oauth/google”: “^0.5.1”,
“@react-three/drei”: “^9.85.0”,
“@ react-three/fiber”: “^8.14.3”,
“@ tabler/icons”: “^1.39.1”,
“axios”: “^0.21.1”,
“axios-mock-adapter”: “^1.19.0”,
“clsx”: “^1.2.1”,
“country-data”: “0.0.31”,
“country-state-city”: “^3.1.4”,
“dayjs”: “^1.11.10”,
“eslint-webpack-plugin”: “^3.2.0”,
“ethers”: “^5.7.1”,
“formik”: “^2.2.6”,
“framer-motion”: “^4.1.17”,
“google-map-react”: “^2.2.0”,
“history”: “^5.0.0”,
“ipfs-http-client”: “^56.0.1”,
“jsonwebtoken”: “^8.5.1”,
“jss”: “^10.7.1”,
“jss-rtl”: “^0.3.0”,
“jwt-decode”: “^3.1.2”,
“libphonenumber-js”: “^1.10.53”,
“lodash”: “^4.17.21”,
“moment”: “^2.29.4”,
“numeral”: “^2.0.6”,
“prop-types”: “^15.7.2”,
“public-sans”: “^0.1.7-1”,
“react”: “^18.2.0”,
“react-circular-progressbar”: “^2.1.0”,
“react-datepicker”: “^4.11.0”,
“react-device-detect”: “^1.17.0”,
“react-dom”: “^18.2.0”,
“react-dropzone”: “^14.2.3”,
“react-dropzone-uploader”: “^2.11.0”,
“react-error-overlay”: “6.0.9”,
“react-facebook-login”: “^4.1.1”,
“react-ga4”: “^2.1.0”,
“react-helmet”: “^6.1.0”,
“react-infinite-scroll-component”: “^6.1.0”,
“react-intl”: “^5.14.0”,
“react-loader-spinner”: “^5.3.4”,
“react-multi-carousel”: “^2.8.2”,
“react-perfect-scrollbar”: “^1.5.8”,
“react-redux”: “^7.1.0-rc.1”,
“react-router-dom”: “^6.0.0-beta.5”,
“react-scripts”: “^4.0.3”,
“react-select”: “^5.7.3”,
“react-slick”: “^0.28.1”,
“react-toastify”: “^8.1.0”,
“redux”: “^4.0.5”,
“redux-persist”: “^6.0.0”,
“redux-saga”: “^1.1.3”,
“slick-carousel”: “^1.8.1”,
“socket.io-client”: “^4.7.2”,
“stylis-plugin-rtl”: “^2.0.2”,
“three”: “^0.156.1”,
“use-places-autocomplete”: “^4.0.1”,
“uuid”: “^8.3.2”,
“video-react”: “^0.16.0”,
“wallet-address-validator”: “^0.2.4”,
“webpack”: “4.44.2”,
“xlsx”: “^0.18.5”,
“yup”: “^0.32.9”
},

1 Like
4

Can you share the Web3Auth packages you are using and their version. I can’t see the web3auth packages in your package.json.

5

any updates here. I am also facing same error when upgrading the existing application for web3auth from 6.1.7 to 8.6.2. I am using these packages

 "@web3auth/base": "^8.6.2",
"@web3auth/ethereum-provider": "^8.6.2",
"@web3auth/modal": "^8.6.2",
"@web3auth/no-modal": "^8.6.2",
"@web3auth/openlogin-adapter": "^8.6.2",
6

Hey, I’m not able to reproduce the issue. Can you please delete the lock file and node modules, and do npm install?

7

Hey @gourav.paliwal can you please update the SDKs to the latest version and try if it solves the issue?

8

@Ayush here is the code repo https://github.com/mailgourav/Web3Auth/tree/dev/w3a-example where in I am facing this issue.
Node version I am trying with is v20.11.1.
Also note that webpack version is 4.44.2
It is the web3auth sample application only from web3auth github repo.
Apart from web3auth packages, it has references of other packages that we need in our application.

9

I think the hyperlink is missing in the message. Can you share the repo?

10

@Ayush updated in the message above

11

Hey, looks like invalid url.

Screenshot 2024-07-15 at 6.56.25 PM
Screenshot 2024-07-15 at 6.56.25 PM1920×1069 83.4 KB

12

try now, you should be able to access it.

13

any updates on this thread ?

14

Hey @gourav.paliwal,

It’s been some time since create-react-app was deprecated, and I would urge you to move your app to using Vite. We are also gradually moving our examples to use Vite.

While checking out your repo, I migrated it to Vite for you. Since I didn’t have write access to your repo, I created a fork and raised a PR to be merged into your dev branch. Here’s the link.

Please have a look and let me know if this works for you.

15

Thanks @maharshi , will try it out.
I got it working last week by overriding metamask util package to older version.

1 Like