search

anza-xyz / wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.
https://anza-xyz.github.io/wallet-adapter/
Apache License 2.0
1.44k stars 906 forks source link

Module not found errors when trying to run packages/starter/create-react-app-starter #955

Closed gameuser1982 closed 3 days ago

gameuser1982 commented 2 months ago

Describe the bug

I am trying to run the starter app template at: packages/starter/create-react-app-starter

I attempted to use npm install but got the following error:

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:^

As a workaround attempt I ended up using pnpm install which installed everything fine, but I ran into trouble when I used pnpm start

At first it seemed like everything was going to work which got me excited, as it was spawning a web browser for localhost only to display a ton of module errors in the browser and terminal: 

Failed to compile.

Module not found: Error: Can't resolve '@solana/wallet-adapter-base' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'
ERROR in ./src/App.tsx 5:0-67
Module not found: Error: Can't resolve '@solana/wallet-adapter-base' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'

ERROR in ./src/App.tsx 6:0-82
Module not found: Error: Can't resolve '@solana/wallet-adapter-react' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'

ERROR in ./src/App.tsx 7:0-89
Module not found: Error: Can't resolve '@solana/wallet-adapter-react-ui' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'

ERROR in ./src/App.tsx 8:0-75
Module not found: Error: Can't resolve '@solana/wallet-adapter-wallets' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'

webpack compiled with 4 errors
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
ERROR in src/App.tsx:1:38
TS2307: Cannot find module '@solana/wallet-adapter-base' or its corresponding type declarations.
  > 1 | import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
      |                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
    3 | import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
    4 | import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';

ERROR in src/App.tsx:2:52
TS2307: Cannot find module '@solana/wallet-adapter-react' or its corresponding type declarations.
    1 | import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
  > 2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
      |                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 | import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
    4 | import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
    5 | import { clusterApiUrl } from '@solana/web3.js';

ERROR in src/App.tsx:3:56
TS2307: Cannot find module '@solana/wallet-adapter-react-ui' or its corresponding type declarations.
    1 | import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
    2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
  > 3 | import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
      |                                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 | import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
    5 | import { clusterApiUrl } from '@solana/web3.js';
    6 | import React, { FC, ReactNode, useMemo } from 'react';

ERROR in src/App.tsx:4:43
TS2307: Cannot find module '@solana/wallet-adapter-wallets' or its corresponding type declarations.
    2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
    3 | import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
  > 4 | import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
      |                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 | import { clusterApiUrl } from '@solana/web3.js';
    6 | import React, { FC, ReactNode, useMemo } from 'react';

To Reproduce Steps to reproduce the behavior:

  1. Go to: packages/starter/create-react-app-starter
  2. Type pnpm install
  3. Type pnpm start
  4. See error

Expected behavior

Localhost web app that requests connection with my phantom wallet.

Desktop (please complete the following information):

Additional context

I'm more comfortable with back end work and the smart contract side went smoother for me. I am total newb to front end, but I really want to be able to make something that interacts with smart contracts using browser and phantom wallet.

I tried installing some of the missing modules with the following command: pnpm install @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets

But when I tried to rerun using pnpm start it didn't fix the problem.

gameuser1982 commented 2 months ago

I've been trying to get this working for two weeks now. I fixed all of the the module errors above, but I still have a missing function TransportRaceCondition in ./node_modules/@solana/wallet-adapter-ledger/node_modules/@ledgerhq/hw-transport/lib-es/Transport.jsbecause it has been renamed to TransportPendingOperation.

I tried following this fix:

https://github.com/anza-xyz/wallet-adapter/pull/949

But it doesn't work if I use Yarn. I need to use Yarn because NPM and PNPM does not installing the missing dependencies, resulting in this:

Failed to compile.

Module not found: Error: Can't resolve '@solana/wallet-adapter-base' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'
ERROR in ./src/App.tsx 5:0-67
Module not found: Error: Can't resolve '@solana/wallet-adapter-base' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'

ERROR in ./src/App.tsx 6:0-82
Module not found: Error: Can't resolve '@solana/wallet-adapter-react' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'

ERROR in ./src/App.tsx 7:0-89
Module not found: Error: Can't resolve '@solana/wallet-adapter-react-ui' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'

ERROR in ./src/App.tsx 8:0-75
Module not found: Error: Can't resolve '@solana/wallet-adapter-wallets' in '/home/candid/wallet-adapter/packages/starter/create-react-app-starter/src'

webpack compiled with 4 errors
ERROR in src/App.tsx:1:38
TS2307: Cannot find module '@solana/wallet-adapter-base' or its corresponding type declarations.
  > 1 | import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
      |                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
    3 | import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
    4 | import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';

ERROR in src/App.tsx:2:52
TS2307: Cannot find module '@solana/wallet-adapter-react' or its corresponding type declarations.
    1 | import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
  > 2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
      |                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 | import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
    4 | import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
    5 | import { clusterApiUrl } from '@solana/web3.js';

ERROR in src/App.tsx:3:56
TS2307: Cannot find module '@solana/wallet-adapter-react-ui' or its corresponding type declarations.
    1 | import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
    2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
  > 3 | import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
      |                                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 | import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
    5 | import { clusterApiUrl } from '@solana/web3.js';
    6 | import React, { FC, ReactNode, useMemo } from 'react';

ERROR in src/App.tsx:4:43
TS2307: Cannot find module '@solana/wallet-adapter-wallets' or its corresponding type declarations.
    2 | import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
    3 | import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
  > 4 | import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
      |                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 | import { clusterApiUrl } from '@solana/web3.js';
    6 | import React, { FC, ReactNode, useMemo } from 'react';
    7 |
mcintyre94 commented 1 month ago

Please try:

mcintyre94 commented 3 days ago

I'm going to close this for now because all the errors look like you hadn't run pnpm build. If you've tried the above instructions and still get an error please open a new issue.