线上服务器出现TypeError: __webpack_require__.t不是函数问题求助

问题描述 #

本地localhost环境下电商网站所有功能运行正常，但部署到线上服务器后弹出运行时错误：

Unhandled Runtime Error: TypeError: __webpack_require__.t is not a function

重新加载页面后错误消失。

相关代码（ProductList页面） #

import React, { useEffect } 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;

补充说明 #

• 该页面为主页面，负责加载ProductListTable组件
• 通过useEffect钩子触发产品数据的获取

项目依赖配置（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"
  }
}

解决方法 #

1. 清理构建缓存并重新部署 #

旧的构建缓存可能导致webpack chunk加载异常，执行以下步骤：

• 删除本地.next文件夹和node_modules/.cache目录
• 重新执行npm install确保依赖完整
• 运行npm run build生成全新构建产物
• 将新构建产物部署到服务器

2. 调整Next.js与React版本兼容性 #

当前使用的Next.js 12.1.6与React 18.2.0存在部分兼容性问题，可尝试：

• 升级Next.js到12.x最新稳定版：

npm install next@12.3.4

• 或者降级React到17.x版本：

npm install react@17.0.2 react-dom@17.0.2

3. 优化路由跳转逻辑 #

原代码中路由跳转可能在组件未完全挂载时触发，导致chunk加载中断，修改如下：

useEffect(() => {
  if (userInfo && !hasAccess) {
    // 用setTimeout确保组件挂载完成后再跳转
    setTimeout(() => {
      Router.push("/");
    }, 0);
  }
}, [userInfo, hasAccess]); // 添加hasAccess到依赖数组

4. 检查服务器静态资源缓存策略 #

线上服务器若对_next目录下的静态资源设置了过长缓存时间，会导致旧chunk无法更新。调整服务器配置：

• 对_next目录资源设置较短缓存时间（如1小时）
• 确保资源文件名带有哈希后缀（Next.js默认支持），保证更新后浏览器能获取新资源

5. 禁用webpack实验性特性 #

若项目启用了webpack的实验性特性，可能引发chunk加载问题，在next.config.js中添加配置：

module.exports = {
  webpack: (config) => {
    config.experiments.outputModule = false;
    return config;
  },
};

内容的提问来源于stack exchange，提问作者Banedict Fring Drong