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

[gameuser1982]

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):

• OS: Windows 10 (Dev environment is using Ubuntu via WSL2)
• Browser: Chrome
• Version: 124.0.6367.63

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]

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:

#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]

Please try:

• pnpm install in the root of the wallet-adapter directory
• pnpm build in the root, this will compile all of the packages
• pnpm start in the starter directory

[mcintyre94]

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.