Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Next.js 14 can't be runned with the package; "Module not found: Can't resolve 'aptos'. #419

Open
estellechoi opened this issue Sep 13, 2024 · 0 comments
Open

Next.js 14 can't be runned with the package; "Module not found: Can't resolve 'aptos'. #419

estellechoi opened this issue Sep 13, 2024 · 0 comments

Comments

@estellechoi
Copy link

estellechoi commented Sep 13, 2024 •
edited
Loading

// package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "dev:main": "env-cmd -e main next dev",
    "build:main": "env-cmd -e main next build",
    "start:main": "env-cmd -e main next start",
    "dev:develop": "env-cmd -e develop next dev",
    "build:develop": "env-cmd -e develop next build",
    "start:develop": "env-cmd -e develop next start",
    "lint": "next lint",
    "lint:fix": "eslint --fix \"*/**/*.{js,jsx,ts,tsx}\" --cache --cache-location \"./node_modules/.cache/.eslintcache\" --debug"
  },
  "dependencies": {
    "@aptos-labs/ts-sdk": "1.27.1",
    "@aptos-labs/wallet-adapter-react": "^3.6.2",
    "@clerk/clerk-sdk-node": "5.0.32",
    "@clerk/nextjs": "5.3.5",
    "@floating-ui/react": "0.26.23",
    "@headlessui/react": "2.1.5",
    "@react-oauth/google": "0.12.1",
    "@supabase/supabase-js": "2.45.3",
    "@tanstack/react-form": "0.31.0",
    "@tanstack/react-query": "5.53.3",
    "axios": "1.7.5",
    "bignumber.js": "9.1.2",
    "copy-to-clipboard": "^3.3.3",
    "jotai": "2.9.3",
    "jwt-decode": "4.0.0",
    "next": "14.2.6",
    "react": "18",
    "react-countup": "6.5.3",
    "react-dom": "18",
    "react-icons": "5.3.0",
    "react-intersection-observer": "9.13.0",
    "react-toastify": "10.0.5",
    "uuid": "10.0.0"
  },
  "devDependencies": {
    "@types/node": "20",
    "@types/react": "18",
    "@types/react-dom": "18",
    "@types/uuid": "10.0.0",
    "@typescript-eslint/eslint-plugin": "7.7.1",
    "@typescript-eslint/parser": "7.7.1",
    "env-cmd": "10.1.0",
    "eslint": "8",
    "eslint-config-next": "14.2.6",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-json": "3.1.0",
    "eslint-plugin-prettier": "5.1.3",
    "postcss": "8",
    "prettier": "3.2.5",
    "supabase": "1.191.3",
    "tailwindcss": "3.4.1",
    "type-fest": "4.26.0",
    "typescript": "5"
  }
}

// WalletAdapter.tsx

import aptosConfig from "@/aptosConfig";
import { ToastMessage } from "@/constants";
import useToast from "@/hooks/useToast";
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
import { ReactNode, useCallback } from "react";

/** 
 * 
 * @description Aptos Connect is auto-added 
 * @see https://aptosconnect.app/docs/quick-start/
 */
const WalletAdapter = ({ children }: { children: ReactNode }) => {
    const { toastError } = useToast();

    const handleToastError = useCallback(() => {
        toastError(ToastMessage.APTOS_ACCOUNT_CONNECT_FAIL);
    }, [toastError]);

    return (
        <AptosWalletAdapterProvider 
          autoConnect={true}
          dappConfig={{ network: aptosConfig.network }}
          onError={handleToastError}
        >{children}</AptosWalletAdapterProvider>
    );
}

export default WalletAdapter;

// layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="pt-app_header_height">
        <WalletAdapter>
          <DataProvider>
            <AccountAutoConnector />
            <AppHeader className="fixed inset-x-0 top-0 z-header" />
              {children}
            <AppFooter />
            <Toast />
          </DataProvider>
        </WalletAdapter>
      </body>
    </html>
  );
}

// error log

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@aptos-labs/wallet-adapter-react/dist/index.mjs
./connect/WalletAdapter.tsx
./app/layout.tsx
 ⨯ ./node_modules/@aptos-labs/wallet-adapter-core/dist/index.mjs:5:1
Module not found: Can't resolve 'aptos'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@estellechoi