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 -
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
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!!
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 -Added below in babel.config.json file (project doesn't have babel.config.js)
added below in babel-plugin-macros.config.js
Below is how I used FontAwesome in the component :
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
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 -
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.
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!!