frontend: react adapter error

[caoyang2002]

PLATFORM

Ubuntu

caoyang@simons-yannis:~/aptos/test-wallet$ uname -a
Linux simons-yannis 6.8.0-39-generic #39-Ubuntu SMP PREEMPT_DYNAMIC Fri Jul  5 21:49:14 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

Mac

caoyang@cccy next-wallet % uname -a
Darwin cccy.lan 23.5.0 Darwin Kernel Version 23.5.0: Wed May  1 20:16:51 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8103 arm64

PROJECT

buliding:

• yarn create vite
• npx create-react-app
• npx create-next-app

package manager: yarn

FILE

mian.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { AptosWalletAdapterProvider } from '@aptos-labs/wallet-adapter-react'
import { Network } from '@aptos-labs/ts-sdk'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AptosWalletAdapterProvider
      plugins={[]}
      autoConnect={true}
      dappConfig={{ network: Network.MAINNET }}
      onError={(error) => {
        console.log('error', error)
      }}
    >
      <App />
    </AptosWalletAdapterProvider>
  </StrictMode>
)

PACKAGE

package.json

{
  "name": "wallet-react-adapter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@aptos-labs/ts-sdk": "^1.27.1",
    "@aptos-labs/wallet-adapter-react": "^3.6.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}

ERROR

caoyang@cccy wallet-react-adapter % yarn dev
yarn run v1.22.22
$ vite

  VITE v5.4.2  ready in 1037 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "aptos"

    node_modules/@aptos-labs/wallet-adapter-core/dist/index.mjs:5:65:
      5 │ import { TxnBuilderTypes as TxnBuilderTypes4, BCS as BCS2 } from "aptos";
        ╵                                                                  ~~~~~~~

  You can mark the path "aptos" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@mizuwallet-sdk/core"

    node_modules/@mizuwallet-sdk/aptos-wallet-adapter/dist/index.js:5:27:
      5 │ import { Mizu as be } from "@mizuwallet-sdk/core";
        ╵                            ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@mizuwallet-sdk/core" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "aptos"

    node_modules/@aptos-connect/wallet-adapter-plugin/dist/index.mjs:357:32:
      357 │ import { TxnBuilderTypes } from "aptos";
          ╵                                 ~~~~~~~

  You can mark the path "aptos" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "aptos"

    node_modules/@identity-connect/wallet-api/dist/index.mjs:3:20:
      3 │ import { BCS } from "aptos";
        ╵                     ~~~~~~~

  You can mark the path "aptos" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

BUT

npx create-aptos-dapp -- OK

[Rezanmonis]

We are looking for frontend and backend developers as our teammates for our edtech project [email protected]

[0xaptosj]

hey can you try creating a project using create-aptos-dapp? it should help you set up all the environment and tool for you

https://aptos.dev/en/build/create-aptos-dapp