Unhandled Runtime Error: TypeError: __webpack_require__.t is not a function, in **live server** but not in **localhost**

Question

I am developing a e-commerce site. everything works fine in localhost. but after deployment in live server this error pops up. After reloading the page again the error goes away.

Code:

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  getProducts as fetchProducts,
  selectProductList,
} from "../store/reducers/Products";
import { Rings } from "react-loader-spinner";
import { AppDispatch } from "../store/store";
import Layout from "../components/Layout";
import ProductListTable from "../components/product/ProductList";
import { selectUserInfo } from "../store/reducers/Auth";
import Router from "next/router";

const ProductList = () => {
  const dispatch = useDispatch<AppDispatch>();
  const products = useSelector(selectProductList);
  const userInfo = useSelector(selectUserInfo);
  const hasAccess =
    userInfo?.permissions.find((item) => item.name === "product.update") ||
    userInfo?.permissions.find((item) => item.name === "product.delete") ||
    userInfo?.permissions.find((item) => item.name === "product.read");


  useEffect(() => {
    dispatch(fetchProducts());
  }, []);

  useEffect(() => {
    if (userInfo) {
      if (!hasAccess) {
        Router.push("/");
      }
    }
  }, [userInfo]);

  return (
    <Layout>
      {userInfo && products && products.length > 0 ? (
        <div className="p-5">
          <ProductListTable products={products} />
        </div>
      ) : (
        <div className="flex h-full w-full justify-center mt-[20%]">
          <Rings color="#377D71" height={200} width={200} />
        </div>
      )}
    </Layout>
  );
};

export default ProductList;

1. this is the main page. here I am loading the ProductListTable component
2. I am fetching products in useEffet

I am using(package.json):

  {
  "name": "project name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.6.5",
    "@heroicons/react": "^1.0.6",
    "@reduxjs/toolkit": "^1.8.2",
    "apexcharts": "^3.36.3",
    "axios": "^0.27.2",
    "evergreen-ui": "^6.10.1",
    "flowbite": "^1.4.7",
    "flowbite-react": "0.0.27",
    "heroicons": "^1.0.6",
    "next": "12.1.6",
    "react": "18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-dom": "18.2.0",
    "react-loader-spinner": "^5.1.5",
    "react-redux": "^8.0.2",
    "react-slick": "^0.28.1"
  },
  "devDependencies": {
    "@faker-js/faker": "^7.4.0",
    "@types/node": "18.0.0",
    "@types/react": "18.0.14",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "eslint": "8.18.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.3",
    "typescript": "4.7.4",
    "@types/react-slick": "^0.23.8"
  }
}

Answer 1

This error indicates there is a problem with one of the imports.

you should also try using useRouter hook of NextJs instead of directly importing Router object in client app. more details

Check this answer and please share detailed error message incase this information does not help.