Enhance your Next.js app with the SWC compiler by integrating Material UI and the swc-plugin-transform-import

I have encountered some challenges with transforming imports in Next.js using the SWC compiler.

My goal is to utilize swc-plugin-transform-import instead of babel-plugin-transform-imports to simplify Material UI imports.

Despite following the documented instructions, I am facing an issue with the settings. It displays an experimental warning and does not apply the plugin at all.

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

Does anyone have insights on how to activate and configure swc-plugin-transform-import for Next.js effectively? Your help is appreciated!

javascriptnext.jsmaterial-uiswc-compiler

Answer №1

I stumbled upon the solution in Next.js Compiler documentation.

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}}"
    }
  }
}

Answer №2

If you're working with Next.js version starting from 13.4.x, you'll notice that certain popular packages like antd, mui, and lodash now come preconfigured with modularizeImports by default.

Check out the latest updates on PR 1 and 2.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Working with deeply nested objects in JavaScript

Given the following array structure: objNeeded = [ {onelevel: 'first'}, { onelevel: 'second', sublevels: [ {onelevel: 'domain'}, {onelevel: 'subdomain'} ] }, { ...

javascripttypescript

Transferring files and information using the Fetch API

I am currently working on a React application and I have defined the state of my application as shown below: const [book, setBook] = useState({ title: '', cover: {} numberPages: 0, resume: '', date: date, }); The & ...

javascriptjsonreactjs

Troubleshooting: jQuery ajax form is not functioning as expected

After attempting various methods to create a basic jQuery Ajax form, I am puzzled as to why it is not submitting or displaying any notifications. Below is the code I have been working with: Javascript ... <script type="text/javascript" src="assets/js ...

javascriptphpjqueryajaxforms

What is the process for converting TSX files into JSX format?

Recently, I completed a project using Expo and TypeScript due to my familiarity with type-safe languages. However, now I need to convert the code to Expo written in JavaScript. While I could manually remove the types as I work through it, I am curious if ...

javascriptreactjstypescript

`CSS Content Placeholder Issue When Used Alongside JavaScript`

Let me explain a bit, I have a master page named UserProfile.master which has a content placeholder linked to UserProfileWall.aspx. Now, I am trying to incorporate some additional JavaScript and a second CSS file in the userprofilewall page. However, whene ...

javajavascriptjqueryasp.netcss

Combine the foundation navigation with bootstrap in order to create a seamless

Has anyone figured out a way to mimic the "top bar" functionality in Foundation (where child menu items slide to the left on mobile) within the Bootstrap framework? I really appreciate how Foundation handles the mobile navigation sliding for child items, ...

javascriptjqueryhtmlcsstwitter-bootstrap

Populate a JSON object with dynamic strings and arrays of strings

My current issue involves my lack of experience with JSON and JavaScript, as I am trying to dynamically build a JSON object and populate it with strings. Since the incoming strings are unsorted, I need the ability to create a string array. I have devised t ...

javascriptarraysjson

Transform your HTML audio player into a Vue component

I am in the process of converting an HTML player into a Vue component. Half of the component has been successfully converted, but the time control slider is still missing. Below is the original HTML code for the player: // JavaScript code for the audi ...

javascriptvue.jsvue-component

Converting HTML elements into Vue.js Components

In my Vue.js application, I am utilizing a d3.js plugin to generate a intricate visualization. I am interested in implementing a customized vue directive to the components that were incorporated by the d3 plugin. It seems that the $compile feature, which ...

javascriptd3.jsvue.jsvuejs2

Identifying Mistakes to Address Promise Failures

I encountered unhandled promise rejection errors and attempted to catch them and log them after each .then statement. Unfortunately, I ran into an 'unexpected token' issue when running the code on my server due to the period before .try. Despit ...

javascriptnode.js

``What could be causing Multer to fail in saving files on a server running nginx with next.js

Trying to troubleshoot the issue where files are not saving on the server (but localhost saves images) to the /public/uploads folder. The folder exists and has drwxrwxrwx access rights. No errors are reported, the API indicates success, it even stores the ...

node.jsfilenginxnext.jsmulter

Updating radio button based on selection change in jQuery

I'm struggling with jQuery and can't seem to figure out how to change the selected radio button based on a value in another select box. <div class="radio-inline" id="sourceDiv" role="group"> <input type="radio" id="sourceBtns1" na ...

javascriptjqueryhtml

Sharing data from AJAX calls in Vue using vue-resource

After using Vue resource, I'm attempting to create an AJAX call that is based on the data received from a prior AJAX call. I have successfully bound the data fetched from /me to the userDetails prop. However, when trying to pass userDetails.id into t ...

javascriptvue.jsvue-resource

Run the scripts that are returned from AJAX requests

Here's a helpful tip from Lucian Depold: "Instead of sending JavaScript code from PHP to JS, simply send a JSON object or array and execute each entry using the eval() function." Inside index.php, there is code that runs when the document is ready: ...

javascriptphpajaxreturnalert

Is there a way to show a progress bar that functions as the background for a table row

My table is structured as follows: th1 th2 th3 th4 th5 th6 td1 td2 td3 td4 td5 td6 td1 td2 td3 td4 td5 td6 I am looking to incorporate a feature where new rows are dynamically added using a form that triggers ...

javascripthtmlcssajaxhtml-table

Guide on redirecting users to an incomplete external URL, such as google.com in NEXTJS

My dilemma involves trying to direct a user to an external URL, but the issue is that sometimes the URL provided is incomplete. For example, it might only be: google.com If I use a link or anchor tag in Nextjs, it will only lead the user to an internal pa ...

javascriptnode.jsnext.js

The Javascript function fails to trigger during the OnKeyPress and OnKeyDown events

I have encountered an issue while trying to call a function called validateQty on both the onkeypress and onkeydown events of a text input field. When I was passing only one parameter, which is the event itself, everything was working perfectly fine. Howev ...

javascriptphphtml

The variants array in VUE.js is not displaying properly

I have recently been delving into vue.js for my work and encountered a significant issue. I wanted to create a simple TODO application. In my index.html file, I only have a div for a header and a root div with an ID: #app. Inside the root div, there is a ...

javascripthtmlcssvue.js

What is the best way to retrieve a property with a period in the method name in JavaScript?

One dilemma I'm facing is trying to access the tree.removenode method through chartContext in Angular. It's been a challenge for me to understand how to achieve this. https://i.stack.imgur.com/yG7uB.png ...

javascriptangular

Unable to use Proxyquire for stubbing

I'm having trouble getting Proxyquire to work with a basic method substitution, and I can't seem to pinpoint the issue. First, I have a file called lib.js: module.exports = { thing: () => { console.log("thing"); } }; Then, t ...

javascriptproxyquire