'BitKeepWalletAdapter' from non EcmaScript module error

[Sunnyjson]

Hi，I got the error message
./node_modules/@solana/wallet-adapter-wallets/lib/esm/adapters.mjs Can't import the named export 'BitKeepWalletAdapter' from non EcmaScript module (only default export is available)

Sorry I looked at #241 didn't find the right solution，Tried the upgrade version to no avail， Can someone tell me how to fix it， thanks

[Sunnyjson]

this is my package.json content

{
  "name": "",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "ionic serve",
    "build": "ionic build",
    "test": "react-scripts test --transformIgnorePatterns"
  },
  "dependencies": {
    "@awesome-cordova-plugins/file-path": "^5.39.1",
    "@awesome-cordova-plugins/image-picker": "^5.39.1",
    "@awesome-cordova-plugins/splash-screen": "^5.38.0",
    "@bonfida/spl-name-service": "^0.1.24",
    "@capacitor/android": "3.4.0",
    "@capacitor/app": "1.0.5",
    "@capacitor/core": "^3.2.5",
    "@capacitor/haptics": "1.1.2",
    "@capacitor/ios": "^3.4.0",
    "@capacitor/keyboard": "1.1.2",
    "@capacitor/splash-screen": "^1.1.5",
    "@capacitor/status-bar": "1.0.5",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/image-picker": "^5.36.0",
    "@ionic-native/splash-screen": "^5.36.0",
    "@ionic/react": "^5.5.0",
    "@ionic/react-router": "^5.5.0",
    "@metaplex/js": "^4.4.2",
    "@mui/material": "^5.2.4",
    "@project-serum/anchor": "^0.18.0",
    "@project-serum/common": "0.0.1-beta.3",
    "@project-serum/serum": "0.13.38",
    "@solana/wallet-adapter-base": "^0.9.3",
    "@solana/wallet-adapter-ledger": "^0.9.8",
    "@solana/wallet-adapter-react": "^0.15.3",
    "@solana/wallet-adapter-react-ui": "^0.9.5",
    "@solana/wallet-adapter-torus": "^0.11.10",
    "@solana/wallet-adapter-wallets": "^0.15.4",
    "@solana/web3.js": "^1.35.1",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "bs58": "^4.0.1",
    "capacitor-ios-app-tracking": "^1.0.5-rc1",
    "clsx": "^1.1.1",
    "cordova-plugin-filepath": "^1.6.0",
    "cordova-plugin-splashscreen": "^6.0.0",
    "cordova-plugin-telerik-imagepicker": "^2.3.6",
    "dayjs": "^1.10.7",
    "ionicons": "^5.4.0",
    "moment": "^2.29.1",
    "node-sass": "^6.0.1",
    "react": "^17.0.1",
    "react-bootstrap": "^2.0.3",
    "react-debounce-input": "^3.2.5",
    "react-dom": "^17.0.1",
    "react-ga": "^3.3.0",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.21.0",
    "react-redux": "^7.2.6",
    "react-responsive": "*",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-share": "^4.4.0",
    "recharts": "^2.0.6",
    "swiper": "^6.8.4",
    "video-react": "^0.14.1",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.4",
    "workbox-broadcast-update": "^5.1.4",
    "workbox-cacheable-response": "^5.1.4",
    "workbox-core": "^5.1.4",
    "workbox-expiration": "^5.1.4",
    "workbox-google-analytics": "^5.1.4",
    "workbox-navigation-preload": "^5.1.4",
    "workbox-precaching": "^5.1.4",
    "workbox-range-requests": "^5.1.4",
    "workbox-routing": "^5.1.4",
    "workbox-strategies": "^5.1.4",
    "workbox-streams": "^5.1.4"
  },
  "devDependencies": {
    "@capacitor/cli": "3.2.5",
    "@ionic/cli": "6.17.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "react-scripts": "^4.0.3",
    "typescript": "^4.1.3"
  },
  "resolutions": {
    "//": "See https://github.com/facebook/create-react-app/issues/11773",
    "react-error-overlay": "6.0.9"
  },
  "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"
    ]
  },
  "description": "An Ionic project"
}

[mikejhale]

I am getting the same thing, here is my package.json:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@project-serum/anchor": "^0.22.0",
    "@solana/wallet-adapter-react": "^0.15.3",
    "@solana/wallet-adapter-react-ui": "^0.9.5",
    "@solana/wallet-adapter-wallets": "^0.15.4",
    "@solana/web3.js": "^1.35.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "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"
    ]
  }
}

[Sunnyjson]

@mikejhale Hi，Have you found a working solution so far，Can you share it with me？

[steveluscher]

I see you're using Ionic @Sunnyjson. Are you building a mobile app? This might be the difference between your setup and the examples we have in packages/starter/.

Your problem sounds similar to ionic-team/ionic-framework#20357. Are you able to repro the problem on a blank Ionic starter project? I don't know what Ionic's build system is like (ie. what actually happens when you run ionic serve but I suspect the configuration problem is in there.

If you're comfortable sharing your code I can take a look, or if you are able to repro the problem on a brand-new Ionic 6 starter app then I'd be happy to look at that too!

[Sunnyjson]

@steveluscher
Thank you for your help, this is a blank project and successfully reproduced the error ionic-sol-dome

[mikejhale]

@steveluscher I am getting the exact same error and not using Ionic. I'm using the code from this repo:

https://github.com/dabit3/complete-guide-to-full-stack-solana-development/tree/main/example2

[jordaaash]

@mikejhale it looks like you're using CRA 4, which is not supported. However, there is a CRA5 starter project which uses react-app-rewired to properly configure the polyfills needed by Webpack 5.

[jordaaash]

@Sunnyjson I would recommend checking out the CRA5 starter project as well. I don't know how Ionic projects are built, but this error is ultimately caused by a build tool, usually Webpack, not handling ESM imports and Node API polyfills.

[jordaaash]

Oh, that's definitely it. Both of your package.json files are declaring react-scripts v4 (CRA 4) which is not supported. Please try the config in the starter project.