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

Question

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

gameuser1982 opened this issue 7 months ago · 3 comments

gameuser1982 commented 7 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:

Go to: packages/starter/create-react-app-starter
Type pnpm install
Type pnpm start
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.

Answer 1 · 2024-05-09T03:00:07.000Z

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 |

Answer 2 · 2024-05-09T12:30:25.000Z

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

Answer 3 · 2024-07-04T13:15:36.000Z

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.