Dapp not recognizing Alchemy & Infura suppliers by way of wagmi. : ethereum

Gm!

Having an issue with a Subsequent.js app.

Anybody aware of wagmi library for React know why my dapp is defaulting to the defaultProvider()? Even after eradicating the default from the chain configuration fully.

Browser debug does not appear to be correctly studying my API keys from my setting variables. I’ve by no means had this downside when initializing from create-react-app, so I am questioning if since I began from an npx create-next-app if I am lacking one thing. Setting variables are in .env.native in the principle listing.

This is my _app.tsx

import '../kinds/globals.css';
import kind { AppProps } from 'subsequent/app';
import '@rainbow-me/rainbowkit/kinds.css';
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { alchemyProvider } from 'wagmi/suppliers/alchemy';
import { infuraProvider } from 'wagmi/suppliers/infura';

const { chains, supplier } = configureChains(
  [chain.mainnet],
  [
    alchemyProvider({
      apiKey: process.env.ALCHEMY_API!,
    }),
    infuraProvider({
      apiKey: process.env.INFURA_API!,
    }),
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'Testing Mint DApp',
  chains,
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  supplier,
});

perform App({ Part, pageProps }: AppProps) {
  return (
    <WagmiConfig shopper={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Part {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

export default App;

That is the error that I am getting on the browser aspect. No recognition of my API keys after which spamming the default mainnet endpoint:

Browser-side errors.