I've been struggling with transforming imports with Next.js using SWC plier.

I'm trying to make use of swc-plugin-transform-import as a replacement of babel-plugin-transform-imports for shorting on Material UI imports.

As documented, I've tried with this settings. It shows experimental warning, but other than that it ignores plugin all together.

// 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
          }
        }
      ]
    ]
  }
}

Anyone knows how to enable and configure swc-plugin-transform-import for Next.js? Thank you

I've been struggling with transforming imports with Next.js using SWC plier.

I'm trying to make use of swc-plugin-transform-import as a replacement of babel-plugin-transform-imports for shorting on Material UI imports.

As documented, I've tried with this settings. It shows experimental warning, but other than that it ignores plugin all together.

// 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
          }
        }
      ]
    ]
  }
}

Anyone knows how to enable and configure swc-plugin-transform-import for Next.js? Thank you

• javascript
• next.js
• material-ui
• swc-piler

2 Answers 2

Oh I've found an answer in Next.js Compiler Docs.

module.exports = {
  modularizeImports: {
    "@mui/material": {
      transform: "@mui/material/{{member}}"
    },
    "@mui/icons-material": {
      transform: "@mui/icons-material/{{member}}"
    },
    "@mui/styles": {
      transform: "@mui/styles/{{member}}"
    },
    "@mui/lab": {
      transform: "@mui/lab/{{member}}"
    }
  }
}

For anybody using Next.js version from 13.4.x onwards, some popular packages now have modularizeImports preconfigured by Next.js (for example, antd, mui, lodash etc).

PR 1 and 2.