title: How to properly configure babel for material-ui in Next.js?
body: <p><strong>DOCS:</strong></p>
  <p><a href="https://material-ui.com/guides/minimizing-bundle-size/#development-environment" rel="nofollow noreferrer">https://material-ui.com/guides/minimizing-bundle-size/#development-environment</a></p>
  <p>&quot;Create a .babelrc.js file in the root directory of your project:</p>
  <pre><code>const plugins = [
    [
      'babel-plugin-transform-imports',
      {
        '@material-ui/core': {
          // Use &quot;transform: '@material-ui/core/${member}',&quot; if your bundler does not support ES modules
          'transform': '@material-ui/core/esm/${member}',
          'preventFullImport': true
        },
        '@material-ui/icons': {
          // Use &quot;transform: '@material-ui/icons/${member}',&quot; if your bundler does not support ES modules
          'transform': '@material-ui/icons/esm/${member}',
          'preventFullImport': true
        }
      }
    ]
  ];
  
  module.exports = {plugins};&quot;
  </code></pre>
  <p><a href="https://nextjs.org/docs/advanced-features/customizing-babel-config" rel="nofollow noreferrer">https://nextjs.org/docs/advanced-features/customizing-babel-config</a></p>
  <p>&quot;To add presets/plugins with custom configuration, do it on the next/babel preset like so:</p>
  <pre><code>{
    &quot;presets&quot;: [
      [
        &quot;next/babel&quot;,
        {
          &quot;preset-env&quot;: {},
          &quot;transform-runtime&quot;: {},
          &quot;styled-jsx&quot;: {},
          &quot;class-properties&quot;: {}
        }
      ]
    ],
    &quot;plugins&quot;: []
  }&quot;
  </code></pre>
  <hr />
  <p><strong>QUESTION:</strong></p>
  <p>How to properly configure babel for material-ui in Next.js ? My implementation below is apparently incorrect as <code>import { ConstructionOutlined } from '@material-ui/icons';</code>is still causing very long load times in dev mode. I observed no error messages when trying the below implementation and variations.</p>
  <hr />
  <p><strong>CODE:</strong></p>
  <pre><code>{
      &quot;presets&quot;: [
          [
          &quot;next/babel&quot;,
          {
              &quot;babel-plugin-transform-imports&quot;:
              {
                  &quot;@material-ui/core&quot;: {
                      // Use &quot;transform: '@material-ui/core/${member}',&quot; if your bundler does not support ES modules
                      &quot;transform&quot;: &quot;@material-ui/core/esm/${member}&quot;,
                      &quot;preventFullImport&quot;: true
                  },
                  &quot;@material-ui/icons&quot;: {
                      // Use &quot;transform: '@material-ui/icons/${member}',&quot; if your bundler does not support ES modules
                      &quot;transform&quot;: &quot;@material-ui/icons/esm/${member}&quot;,
                      &quot;preventFullImport&quot;: true
                  }
              }
          }
          ]
      ],
      &quot;plugins&quot;: []
  }
  </code></pre>
  <p>OR</p>
  <pre><code>module.exports = {
      presets: [
          [&quot;next/babel&quot;]
      ],
      plugins: [
           [
               'babel-plugin-import',
               {
                   'libraryName': '@material-ui/core',
                   // Use &quot;'libraryDirectory': '',&quot; if your bundler does not support ES modules
                   'libraryDirectory': 'esm',
                   'camel2DashComponentName': false
               },
               'core'
           ],
           [
               'babel-plugin-import',
               {
                   'libraryName': '@material-ui/icons',
                   // Use &quot;'libraryDirectory': '',&quot; if your bundler does not support ES modules
                   'libraryDirectory': 'esm',
                   'camel2DashComponentName': false
               },
               'icons'
           ],
      ]
  }
  </code></pre>
  <p>OR ELSE ?</p>