Getting compilation errors when fontawesome latest packages are added.

[fs-projects]

Describe the bug I don't know if this is a bug. I recently upgraded the fontawesome packages in my codebase to latest version. The reason being, older package were used in the form of global library.add() way, that increases the bundle size. Now I have updated these packages to below version -

    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/pro-light-svg-icons": "^5.15.4",
    "@fortawesome/pro-regular-svg-icons": "^5.15.4",
    "@fortawesome/pro-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.2.0",

Added below in babel.config.json file (project doesn't have babel.config.js)

"plugins": [
...other plugins
"macros"
  ],

added below in babel-plugin-macros.config.js

module.exports = {
    'fontawesome-svg-core': {
      'license': 'pro'
    }
  }

Below is how I used FontAwesome in the component :

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro';
<FontAwesomeIcon icon={icon({name: "exclamation-triangle"})} style={{marginRight: ".5em"}} />

Getting below errors during compilation from webpack :

ERROR in ./node_modules/cosmiconfig/dist/readFile.js Module not found: Error: Can't resolve 'fs' in 'C:\ui-23052023\ui\node_modules\cosmiconfig\dist' @ ./node_modules/cosmiconfig/dist/readFile.js 9:33-46 @ ./node_modules/cosmiconfig/dist/ExplorerSync.js @ ./node_modules/cosmiconfig/dist/index.js @ ./node_modules/babel-plugin-macros/dist/index.js @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js @ ./js/components/Page.react.tsx @ ./js/components/ContentArea.react.tsx @ ./js/apps/exp/App.react.tsx @ ./js/apps/exp/siteConfig.ts @ ./js/appLoader.tsx

ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js Module not found: Error: Can't resolve 'fs' in 'C:\ui-23052023\ui\node_modules\import-fresh\node_modules\resolve-from' @ ./node_modules/import-fresh/node_modules/resolve-from/index.js 4:11-24 @ ./node_modules/import-fresh/index.js @ ./node_modules/cosmiconfig/dist/loaders.js @ ./node_modules/cosmiconfig/dist/index.js @ ./node_modules/babel-plugin-macros/dist/index.js @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js @ ./js/components/Page.react.tsx @ ./js/components/ContentArea.react.tsx @ ./js/apps/exp/App.react.tsx @ ./js/apps/exp/siteConfig.ts @ ./js/appLoader.tsx

ERROR in ./node_modules/path-type/index.js Module not found: Error: Can't resolve 'fs' in 'C:\ui-23052023\ui\node_modules\path-type' @ ./node_modules/path-type/index.js 3:11-24 @ ./node_modules/cosmiconfig/dist/getDirectory.js @ ./node_modules/cosmiconfig/dist/ExplorerSync.js @ ./node_modules/cosmiconfig/dist/index.js @ ./node_modules/babel-plugin-macros/dist/index.js @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js @ ./js/components/Page.react.tsx @ ./js/components/ContentArea.react.tsx @ ./js/apps/exp/App.react.tsx @ ./js/apps/exp/siteConfig.ts @ ./js/appLoader.tsx

ERROR in ./node_modules/resolve/lib/async.js Module not found: Error: Can't resolve 'fs' in 'C:\ui-23052023\ui\node_modules\resolve\lib' @ ./node_modules/resolve/lib/async.js 1:9-22 @ ./node_modules/resolve/index.js @ ./node_modules/babel-plugin-macros/dist/index.js @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js @ ./js/components/Page.react.tsx @ ./js/components/ContentArea.react.tsx @ ./js/apps/exp/App.react.tsx @ ./js/apps/exp/siteConfig.ts @ ./js/appLoader.tsx

ERROR in ./node_modules/resolve/lib/sync.js Module not found: Error: Can't resolve 'fs' in 'C:\ui-23052023\ui\node_modules\resolve\lib' @ ./node_modules/resolve/lib/sync.js 2:9-22 @ ./node_modules/resolve/index.js @ ./node_modules/babel-plugin-macros/dist/index.js @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js @ ./js/components/Page.react.tsx @ ./js/components/ContentArea.react.tsx @ ./js/apps/exp/App.react.tsx @ ./js/apps/exp/siteConfig.ts @ ./js/appLoader.tsx

ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js Module not found: Error: Can't resolve 'module' in 'C:\ui-23052023\ui\node_modules\import-fresh\node_modules\resolve-from' @ ./node_modules/import-fresh/node_modules/resolve-from/index.js 3:15-32 @ ./node_modules/import-fresh/index.js @ ./node_modules/cosmiconfig/dist/loaders.js @ ./node_modules/cosmiconfig/dist/index.js @ ./node_modules/babel-plugin-macros/dist/index.js @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js @ ./js/components/Page.react.tsx @ ./js/components/ContentArea.react.tsx @ ./js/apps/exp/App.react.tsx @ ./js/apps/exp/siteConfig.ts @ ./js/appLoader.tsx

Reproducible test case Difficult to provide as the project is huge and I have no idea. However if anyone can please provide me a way I can surely work and provide that.

Expected behavior Code should compile without any errors and icon should be visible in the UI

Desktop (please complete the following information): Processor : 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz, 2496 Mhz, 8 Core(s), 16 Logical Processor(s) Dell, 32 GB RAM, Window 10

Additional context

"webpack": "^4.46",
 "@babel/cli": "^7.20.7",
 "@babel/core": "^7.14.3",

I did these changes following the docs https://fontawesome.com/docs/web/use-with/react/add-icons#dynamic-icon-importing

Please provide me help on this. I really appreciate your response. Thank you.

UPDATE : I got the above issues resolved by adding below to my webpack config file -

node: {
    fs: "empty",
    module: "empty"
  },

However webpack is giving warning and my application is still not running due to it. In UI, when I reload the page, I am getting below warnings and the same can be seen in webpack logs in terminal.

WARNING in ./node_modules/babel-plugin-macros/dist/index.js 75:22-29
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js
 @ ./js/components/Page.react.tsx
 @ ./js/components/ContentArea.react.tsx
 @ ./js/App.react.tsx
 @ ./js/apps/exp/siteConfig.ts
 @ ./js/appLoader.tsx

WARNING in ./node_modules/import-fresh/index.js 32:31-48
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js
 @ ./js/components/Page.react.tsx
 @ ./js/components/ContentArea.react.tsx
 @ ./js/App.react.tsx
 @ ./js/apps/exp/siteConfig.ts
 @ ./js/appLoader.tsx

I have no clue as to why application is not running when only warnings are there in webpack compilation. Can someone please help me resolve these warnings. Thank you in advance!!