FontAwesome dynamic import on NextJS without Babel

AComponent.js

/* 
*  this is an example workaround of FontAwesome dynamic import without using babel on NextJS. 
*  because of this error https://nextjs.org/docs/messages/babel-font-loader-conflict
*  and this error https://nextjs.org/docs/messages/swc-disabled
*  tested on dev mode of NextJS v14.0.1
*
*  feel free to discuss this workaround
*/

'use client'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import * as Icons from "@fortawesome/free-brands-svg-icons";

const AComponent = ()=>{
  const iconList = ['php','node-js','js','react','css3','css3-alt'];

  const importIcons = Object.entries(Icons)
    .filter(([, value]) => iconList.includes(value.iconName))
    .map(([key]) => Icons[key]);

  library.add(...importIcons);

  return ({
    iconList.map((icon)=> <FontAwesomeIcon icon={{ prefix: "fab", iconName: icon }} />)
  })
}

export {AComponent};