NextJS部署AWS遇TypeError: __webpack_require__.nmd非函数及加载缓慢问题

一、修复AWS环境下的__webpack_require__.nmd错误 #

这个错误多由Webpack模块定义冲突或NextJS与AWS runtime版本不兼容导致，按以下步骤排查：

• 对齐本地与AWS服务器的Node.js版本，必须完全一致（比如本地用18.16.0，AWS也部署同版本），跨大版本易触发webpack解析bug
• 清理构建缓存：部署前删除本地.next、node_modules，重新执行npm install && npm run build，避免旧缓存代码被打包到生产环境
• 若开启了experimental.appDir，暂时关闭该配置，部分App Router版本在AWS部署时会引发模块解析异常
• 在next.config.js中添加webpack兼容性配置：

  module.exports = {
    webpack: (config) => {
      config.resolve.fallback = { ...config.resolve.fallback, fs: false, module: false };
      return config;
    },
  };
  

二、解决_app.js chunk过大（65MB）及加载慢问题 #

MUI5全量导入是chunk体积爆炸的核心原因，结合NextJS优化手段处理：

1. 启用MUI5按需导入 #

• 替换全量组件导入为单个组件导入：将import { Button, TextField } from '@mui/material'改为import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'
• 配置babel-plugin-transform-imports自动按需导入，在.babelrc或next.config.js的babel配置中添加：

  module.exports = {
    presets: ['next/babel'],
    plugins: [
      [
        'transform-imports',
        {
          '@mui/material': {
            transform: '@mui/material/${member}',
            preventFullImport: true,
          },
          '@mui/icons-material': {
            transform: '@mui/icons-material/${member}',
            preventFullImport: true,
          },
        },
      ],
    ],
  };
  

2. 开启NextJS代码压缩与优化 #

• 在next.config.js中启用gzip/brotli压缩：

  const withCompression = require('next-compression');
  module.exports = withCompression({
    compression: {
      compress: true,
      brotliCompression: true,
    },
  });
  

  也可直接通过AWS CloudFront配置压缩，服务器端无需额外插件
• 显式启用SWC压缩（生产环境默认开启，可强制配置）：

  module.exports = {
    swcMinify: true,
  };
  

3. 优化登录页加载效率 #

• 动态导入登录页组件并禁用SSR（登录页无需SSR）：

  import dynamic from 'next/dynamic';
  const LoginPage = dynamic(() => import('../components/Login'), { ssr: false });
  

• 拆分样式：仅在_app.js导入必要全局样式，登录页单独引入自身所需的MUI样式，避免加载冗余CSS

三、解决webpack-hmr加载慢及服务器pending问题 #

本地HMR加载慢 #

• 在next.config.js中启用Fast Refresh：

  module.exports = {
    reactStrictMode: true,
    fastRefresh: true,
  };
  

• 配置webpack忽略node_modules监听：

  module.exports = {
    webpack: (config) => {
      config.watchOptions = {
        ignored: /node_modules/,
      };
      return config;
    },
  };
  

AWS服务器端请求pending #

• 检查AWS安全组与服务器防火墙，确保应用端口（默认3000）的入站规则允许外部访问
• 确认部署的.next文件夹完整，缺失chunk会导致请求一直处于pending状态
• 查看CloudWatch日志，排查服务器内存占用情况——65MB的chunk加载会消耗大量内存，内存不足会导致服务器无响应

内容的提问来源于stack exchange，提问作者Shahrukh Khan