Can't import the named export 'Connection' from non EcmaScript module (only default export is available)

[springrainroni]

import React, { FC, useMemo } from 'react'; import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'; import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'; import { GlowWalletAdapter, PhantomWalletAdapter, SlopeWalletAdapter, SolflareWalletAdapter, SolletExtensionWalletAdapter, SolletWalletAdapter, TorusWalletAdapter, } from '@solana/wallet-adapter-wallets'; import { WalletModalProvider, WalletDisconnectButton, WalletMultiButton } from '@solana/wallet-adapter-react-ui'; import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app require('@solana/wallet-adapter-react-ui/styles.css'); const PhanthomLogin = props => { // const Wallet: FC = () => { // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'. const network = WalletAdapterNetwork.Devnet;

// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);

// @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking and lazy loading --
// Only the wallets you configure here will be compiled into your application, and only the dependencies
// of wallets that your users connect to will be loaded.
const wallets = useMemo(
    () => [
        new PhantomWalletAdapter(),
        new GlowWalletAdapter(),
        new SlopeWalletAdapter(),
        new SolflareWalletAdapter({ network }),
        new TorusWalletAdapter(),
    ],
    [network]
);

return (
    <ConnectionProvider endpoint={endpoint}>
        <WalletProvider wallets={wallets} autoConnect>
            <WalletModalProvider>
                <WalletMultiButton />
                <WalletDisconnectButton />
                { /* Your app's components go here, nested within the context providers. */ }
            </WalletModalProvider>
        </WalletProvider>
    </ConnectionProvider>
);

}; export default PhanthomLogin; it shows me error Can't import the named export 'Connection' from non EcmaScript module (only default export is available)

[ghost]

I'm having the exact same issue as of now

[krobinsmith]

I am also have same issue

[yuloskov]

I was able to fix this error with the following piece in craco config

webpack: {
    configure: {
      module: {
        rules: [
          {
            type: 'javascript/auto',
            test: /\.mjs$/,
            use: [],
          },
        ],
      },
    },
  },

However, then I get the error

You have tried to  read "publicKey" on a WalletContext without providing one. Make sure to render a WalletProvider as an ancestor of the component that uses WalletContext

[yuloskov]

Btw, I'm using React 17. However in the docs it requires Reac 18, I think. I was able to make the library work with React 18.

[andychoww]

@yuloskov can you share your package.json? I'm encountering the same error. I tried to upgrade to react 18 but not working

    "react": "18.1.0",
    "react-dom": "18.1.0",

[Joan1590]

I was able to fix this error with the following piece in craco config

webpack: {
    configure: {
      module: {
        rules: [
          {
            type: 'javascript/auto',
            test: /\.mjs$/,
            use: [],
          },
        ],
      },
    },
  },

However, then I get the error

You have tried to  read "publicKey" on a WalletContext without providing one. Make sure to render a WalletProvider as an ancestor of the component that uses WalletContext

You error is with Context, you need add Provider Context to app.js for use it

[markgalang]

Found a way to fix this following this answer issue#265

[jordaaash]

Closing since this issue can be avoided using any of the React starter projects

https://github.com/solana-labs/wallet-adapter#starter-projects