Next.js中配置swc-plugin-transform-import优化Material UI导入失效求助

问题背景 #

尝试用swc-plugin-transform-import替代babel-plugin-transform-import，在Next.js中简化Material UI的导入操作，已配置next.config.js但插件未生效，仅出现实验性特性警告。

当前配置代码：

// next.config.js
module.exports = {
  experimental: {
    swcPlugins: [
      [
        'swc-plugin-transform-import',
        {
          "@mui/material": {
            transform: "@mui/material/${member}",
            preventFullImport: true
          },
          "@mui/icons-material": {
            transform: "@mui/icons-material/${member}",
            preventFullImport: true
          },
          "@mui/styles": {
            transform: "@mui/styles/${member}",
            preventFullImport: true
          },
          "@mui/lab": {
            transform: "@mui/lab/${member}",
            preventFullImport: true
          }
        }
      ]
    ]
  }
}

解决方案 #

按以下步骤排查并修正配置：

1. 确保已安装swc-plugin-transform-import #

Next.js不会自动安装第三方SWC插件，执行以下命令安装：

npm install swc-plugin-transform-import --save-dev
# 或
yarn add swc-plugin-transform-import --dev

2. 修正配置中的模板变量写法 #

部分版本的swc-plugin-transform-import要求模板变量使用{{member}}而非${member}，修改配置如下：

// next.config.js
module.exports = {
  experimental: {
    swcPlugins: [
      [
        'swc-plugin-transform-import',
        {
          "@mui/material": {
            transform: "@mui/material/{{member}}",
            preventFullImport: true
          },
          "@mui/icons-material": {
            transform: "@mui/icons-material/{{member}}",
            preventFullImport: true
          },
          "@mui/styles": {
            transform: "@mui/styles/{{member}}",
            preventFullImport: true
          },
          "@mui/lab": {
            transform: "@mui/lab/{{member}}",
            preventFullImport: true
          }
        }
      ]
    ]
  }
}

3. 清除Next.js缓存并重启服务 #

缓存可能导致配置未生效，删除.next文件夹后重启开发服务：

rm -rf .next
npm run dev
# 或
rm -rf .next
yarn dev

4. 确认导入语句符合插件要求 #

插件仅处理命名导入，确保代码中使用的是命名导入而非默认导入：

// 正确（会被转换）
import { Button, TextField } from '@mui/material';
import { AddCircle } from '@mui/icons-material';

// 错误（不会被转换）
import Button from '@mui/material/Button';

5. 检查Next.js版本兼容性 #

swcPlugins是Next.js 12及以上版本的实验性特性，确保使用的Next.js版本≥12.x。如果版本过低，建议升级：

npm install next@latest --save
# 或
yarn add next@latest

验证插件是否生效 #

启动开发服务后，查看编译后的代码（可通过浏览器开发者工具查看打包后的JS文件），确认命名导入已被转换为具体路径的导入，例如：
import { Button } from '@mui/material' 应被转换为 import Button from '@mui/material/Button'

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