Module not found: Error: Package path

#1

Hello morais team, when building the Web3 Dex from your video (https://www.youtube.com/watch?v=t8U7GRrlYW8) im having an error with wagmi module.

import React from "react";

import ReactDOM from "react-dom/client";

import "./index.css";

import App from "./App";

import { BrowserRouter } from "react-router-dom";

import { configureChains, mainnet, WagmiConfig, createClient } from "wagmi";

import { publicProvider } from "wagmi/providers/public";

const { provider, webSocketProvider } = configureChains(

  [mainnet],

  [publicProvider()]

);

const client = createClient({

  autoConnect: true,

  provider,

  webSocketProvider,

});

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <React.StrictMode>

    <WagmiConfig client={client}>

      <BrowserRouter>

        <App />

      </BrowserRouter>

    </WagmiConfig>

  </React.StrictMode>

);

ERROR in ./src/index.js 10:0-56

Module not found: Error: Package path ./providers/public is not exported from package C:\Users\acala\Desktop\Adamante\dexStarter\dex\node_modules\wagmi (see exports field in C:\Users\acala\Desktop\Adamante\dexStarter\dex\node_modules\wagmi\package.json)

ERROR in ./src/index.js 15:4-19
export ‘configureChains’ (imported as ‘configureChains’) was not found in ‘wagmi’

ERROR in ./src/index.js 15:21-28
export ‘mainnet’ (imported as ‘mainnet’) was not found in ‘wagmi’

ERROR in ./src/index.js 16:15-27
export ‘createClient’ (imported as ‘createClient’) was not found in ‘wagmi’

Could you please help me out solving this error. Thanks.

#2

Hi @Antonios1

The error might be due to the old wagmi sdk. Please have a look at the below docs for an example on how to setup authentication with latest wagmi sdk

You can also take a look at the latest wagmi docs for more details

#3

hello John, So i have looked into the wagmi docs and found out that the wagmiConfig was deprecated into wagmiProvider. i changed WagmiConfig into WagmiProvider, but still have some errors with the modules. I dont have much experience building dapps. thanks for all the help.

import React from "react";

import ReactDOM from "react-dom/client";

import "./index.css";

import App from "./App";

import { BrowserRouter } from "react-router-dom";

import { configureChains, mainnet, WagmiProvider, createClient } from "wagmi";

import { publicProvider } from "wagmi/providers/public";

const { provider, webSocketProvider } = configureChains(

  [mainnet],

  [publicProvider()]

);

const client = createClient({

  autoConnect: true,

  provider,

  webSocketProvider,

});

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <React.StrictMode>

    <WagmiProvider client={client}>

      <BrowserRouter>

        <App />

      </BrowserRouter>

    </WagmiProvider>

  </React.StrictMode>

);

ERROR in ./src/index.js 10:0-56

Module not found: Error: Package path ./providers/public is not exported from package C:\Users\acala\Desktop\Adamante\dexStarter\dex\node_modules\wagmi (see exports field in C:\Users\acala\Desktop\Adamante\dexStarter\dex\node_modules\wagmi\package.json)

#4

publicProvider is not available now. You can remove it.

#5

Hello again John, how are you? i hope you are having a good day, without stress!. I read the wagmi documentation, tried to solve the errors and i got to this code, i am not sure what i am doing.
There is something wrong with the frontend appearance, i no longer see the interface (buttons, the swap square, etc…), it only shows the background.

Also im not sure what should i put in the transports.

import React from "react";

import ReactDOM from "react-dom/client";

import "./index.css";

import App from "./App";

import { BrowserRouter } from "react-router-dom";

import { WagmiProvider } from "wagmi";

import { createConfig, http } from '@wagmi/core'

import { mainnet, sepolia } from '@wagmi/core/chains'

import { createClient } from 'viem'

const config = createConfig({

  chains: [mainnet, sepolia],

  client({ chain }) {

    return createClient({ chain, transport: http() })

  },

  transports: {

    [mainnet.id]: http('https://mainnet.example.com'),

    [sepolia.id]: http('https://sepolia.example.com'),

  },

})

const client = createClient({

  autoConnect: true,

  provider,

  webSocketProvider,

});

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <React.StrictMode>

    <WagmiProvider client={client}>

      <BrowserRouter>

        <App />

      </BrowserRouter>

    </WagmiProvider>

  </React.StrictMode>

);
#6

Transports are the rpc urls of nodes. If you have rpc node urls from any providers you can add them in place of the url.

And also look for errors in the browser console or code editor console. The UI issue could be unrelated to the transports.