Module not found: Package path . is not exported from package

[ptdatta]

I'm trying to use the webui3kit popup notification functionality but it gives me the error in Next.js.
Error:

./components/LotteryEntrance.jsx
Module not found: Package path . is not exported from package /home/parthib/Desktop/hardhat/hardhat-smartcontract-lottery/frontend/node_modules/web3uikit (see exports field in /home/parthib/Desktop/hardhat/hardhat-smartcontract-lottery/frontend/node_modules/web3uikit/package.json)

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/pages/index.js

It happens when I'm trying to use useNotification hook

import { useWeb3Contract } from "react-moralis";
import { abi, contractAddresses } from "../constants";
import { useMoralis } from "react-moralis";
import { useEffect, useState } from "react";
import { ethers } from "ethers";
import { useNotification } from "web3uikit";

const LotteryEntrance = () => {
  const { chainId: chainIdHex, isWeb3Enabled } = useMoralis();
  const chainId = parseInt(chainIdHex);
  const dispatch = useNotification();
  const raffleAddress =
    chainId in contractAddresses ? contractAddresses[chainId][0] : null;
  const [entranceFee, setEntranceFee] = useState("0");
  const { runContractFunction: enterRaffle } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "enterRaffle",
    params: {},
    msgValue: entranceFee,
  });

  const { runContractFunction: getEntranceFee } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress,
    functionName: "getEntranceFee",
    params: {},
  });

  useEffect(() => {
    if (isWeb3Enabled) {
      const updateUi = async () => {
        setEntranceFee((await getEntranceFee()).toString());
      };
      updateUi();
    }
  }, [isWeb3Enabled]);

  const handleSuccess = async (tx) => {
    await tx.wait(1);
    handleNewNotification();
  };

  const handleNewNotification = ()=>{
    dispatch({
      type: "success",
      message: "Transaction Complete",
      title: "Tx Notification",
      position: "topR",
      icon: "bell",
    })
  }

  return (
    <div>
      {raffleAddress ? (
        <div>
          <button
            onClick={async () => {
              await enterRaffle({
                onSuccess: handleSuccess,
                onError: (error = console.log(error)),
              });
            }}
          >
            Enter Ruffle
          </button>
          Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")}
        </div>
      ) : (
        <div>No raffle Address Detected</div>
      )}
    </div>
  );
};

module.exports = LotteryEntrance;

Anyone please tell me how to resolve it.

[ptdatta]

I solved it