DEV: Dapp not recognizing Alchemy & Infura providers via wagmi.

Gm!

Having a problem with a Next.js app.

Anyone familiar with wagmi library for React know why my dapp is defaulting to the defaultProvider()? Even after removing the default from the chain configuration completely.

Browser debug doesn't seem to be properly reading my API keys from my environment variables. I've never had this problem when initializing from create-react-app, so I'm wondering if since I started from an npx create-next-app if I'm missing something. Environment variables are in .env.local in the main directory.

Here's my _app.tsx

import '../styles/globals.css'; import type { AppProps } from 'next/app'; import '@rainbow-me/rainbowkit/styles.css'; import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'; import { chain, configureChains, createClient, WagmiConfig } from 'wagmi'; import { alchemyProvider } from 'wagmi/providers/alchemy'; import { infuraProvider } from 'wagmi/providers/infura'; const { chains, provider } = 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, provider, }); function App({ Component, pageProps }: AppProps) { return ( <WagmiConfig client={wagmiClient}> <RainbowKitProvider chains={chains}> <Component {...pageProps} /> </RainbowKitProvider> </WagmiConfig> ); } export default App; 

This is the error that I'm getting on the browser side. No recognition of my API keys and then spamming the default mainnet endpoint:

Browser-side errors.