Next.js13+Turborepo+MUI：transpilePackages与modularizeImports配置异常求助

核心问题根源 #

错误的modularizeImports规则会把@mui/material中不属于独立组件的导出（比如css、styled、alpha）错误映射到不存在的子包路径，导致「模块未找到」；同时transpilePackages未完整包含MUI依赖链，会引发编译层面的工具函数异常。

正确的 next.config.js 配置 #

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    '@mui/material',
    '@mui/system',
    '@mui/icons-material',
    '@emotion/react',
    '@emotion/styled'
  ],
  modularizeImports: {
    '@mui/material': {
      transform: '@mui/material/{{member}}',
      preventFullImport: true,
      skipDefaultConversion: true,
      // 排除非组件类导出，避免错误路径映射
      exclude: ['css', 'styled', 'alpha', 'createTheme', 'responsiveFontSizes']
    },
    '@mui/icons-material': {
      transform: '@mui/icons-material/{{member}}'
    }
  },
  swcMinify: true
}

module.exports = nextConfig

配置说明 #

• transpilePackages：必须包含所有MUI核心包及Emotion依赖，Turborepo单仓库环境下，跨包代码需要Next.js编译器统一处理，避免编译不兼容问题。
• modularizeImports：
  • transform规则将组件导入自动拆分为子包导入（如import { Button } from '@mui/material'会被转为import Button from '@mui/material/Button'），减少打包体积。
  • exclude是关键：把alpha、styled这类不属于独立组件的导出排除，避免配置将其映射到不存在的路径（比如@mui/material/css）。
  • skipDefaultConversion确保默认导出的组件转换正常，preventFullImport禁止全量导入整个包。
• swcMinify：Next.js 13默认开启，显式声明确保使用SWC编译，提升构建与运行性能。

正确导入示例 #

• 组件导入（会被自动拆分优化）：

import { Button, TextField } from '@mui/material';

• 工具函数/样式导入（直接从根包导入，不受modularizeImports影响）：

import { alpha, styled, css } from '@mui/material';
import { createTheme, responsiveFontSizes } from '@mui/material/styles';

额外注意事项 #

• 若使用@mui/system的Box等导出，需在modularizeImports中单独配置：

'@mui/system': {
  transform: '@mui/system/{{member}}',
  exclude: ['styled', 'css']
}

• Turborepo环境下，确保各子应用的next.config.js同步该配置，或在根目录turbo.json中统一编译规则。
• 配置修改后执行next clean清理缓存，再重启开发服务器，避免缓存残留导致异常。

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