Facing issue with fortawesome integration with babel-plugin-macros.

[fs-projects]

I have raised the bug in fortawesome repo.

FortAwesome/react-fontawesome#554

Please help me fix these warnings as it's not allowing me to compile my code.

[conartist6]

You're running the code that hasn't had the macro compiled. Look, you're seeing the app code call into the macro implementation, which should never happen:

 @ ./node_modules/@fortawesome/fontawesome-svg-core/import.macro.js
 @ ./js/components/Page.react.tsx

Since you mention babel.json I'm going to assume that that is the problem. I think you mean babelrc.json? If indeed you made that typo it would explain everything.

[fs-projects]

No Conrad, it's babel.json. json only

…

On Fri, 3 Nov 2023, 18:46 Conrad Buck, ***@***.***> wrote: You're running the code that hasn't had the macro compiled. Look, you're seeing the app code call into the macro implementation, which should never happen: @ .***@***.***/fontawesome-svg-core/import.macro.js @ ./js/components/Page.react.tsx Since you mention babel.json I'm going to assume that that is the problem. I think you mean babelrc.json? If indeed you made that typo it would explain everything. — Reply to this email directly, view it on GitHub <#196 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKAYU2P2UW6ROBIBLI36P6TYCTVC7AVCNFSM6AAAAAA635OF6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJSGQZDANJSGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[conartist6]

Here is what the docs say about valid config file names. Notice that babel.json is not one of them!

(source: https://babeljs.io/docs/configuration#whats-your-use-case)

[fs-projects]

@conartist6 Apologies for the typo in my previous comment. The file name in my project is babel.config.json. I have updated my original post as well.

What do you mean by app code calling the macro implementation directly? Please see how I am importing the Fontawesome and macro in my original post.

[conartist6]

I'm just reading the stack trace you shared. It shows Page.react.tsx calling into import.macro.js.

While a macro import looks like a normal import, the imported file isn't runnable code! import.macro.js should run at compile time, where it should change its own usages. Instead what you're seeing is runtime code calling into compiler code, which isn't going to work. You need to figure out why the code you're running hasn't been transformed by babel-plugin-macros.

[fs-projects]

@conartist6 thanks for taking time to reply. Could you please point me to some potential places to look for.

[conartist6]

Without knowing anything about your environment, I can tell you very little.

[conartist6]

Are you running babel on the CLI? ...or through it's API? Through something like create-react-app? A node module loader? What I'm asking is how do you expect the code you're running to be transformed by babel? Can you verify that other babel plugins are being run?

[fs-projects]

@conartist6 create-react-app is not used. We have a custom webpack configuration doing the bundling. babel-loader is configured in it. Please see below snippet from webpack.config.js

 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [{loader: "babel-loader"}],
        resolve: {
          extensions: [".js"],
        },
      },

Below is how my babel.config.json looks like -

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "3.13",
        "targets": {
          "edge": 88,
          "firefox": 68,
          "chrome": 67,
          "safari": 13
        }
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ],
	"overrides": [
    {
      "test": "/\.jsx?$/",
      "presets": [
        "@babel/preset-flow"
      ]
    },
    {
      "test": "/\.tsx?$/",
      "presets": [
        "@babel/typescript",
        {
          "allExtensions": true,
          "isTSX": true
        }
      ]
    },
    
    {
      "test": [
        "./js/components/ui/FileUploader/s3Multipart.js",
        "./js/components/ui/FileUploader/MultipartUploader.js"
      ],
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": "cjs"
          }
        ]
      ]
    }
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-flow-strip-types",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-property-literals",
    "@babel/plugin-transform-member-expression-literals",
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-syntax-dynamic-import",
    "macros"
  ],
  "env":{
    "test":{
       "plugins":[
          "@babel/plugin-transform-modules-commonjs"
       ]
    }
 }
}

Regarding your point that these plugins are working or not, I am right now assuming that these should be working, but I can verify. I will see how to make sure that the plugins are working. I will update you. Besides that if there is anything else I can provide to you please do let me know.

[conartist6]

babel-loader doesn't look up babel config files, instead it expects babel options to be passed to it directly. It looks to me like you're invoking the babel-loader but not passing it any options. You'll want to read your babel.config.json file and inject it into the webpack config.

[conartist6]

You can and probably should use babel.loadOptions in your webpack config: https://babeljs.io/docs/babel-core#loadoptions

[fs-projects]

@conartist6 I just started to work on this area of the project so I don't know much about it. So, as of now it seems like that my babel.config.json isn't read by babel-loader and
if I am able to inject my babel.config.json to my webpack then the babel-loader will be able to detect the macro that I have configured in the babel-config.json. It's strange that someone had created babel.config.json but it's not configured with webpack so basically no transpiling or polyfilling is taking place?

[conartist6]

It would hardly be the strangest thing I've seen, or even the strangest thing I've done myself and left for someone else to find...

[conartist6]

Is your issue resolved? Can we close this issue? Are there any specific follow-on issues we should create?

[fs-projects]

@conartist6 apologies for replying late, I was not able to resolve the issue so what I did for now is do individual import of fortawesome icons in components as mentioned in their doc. https://fontawesome.com/docs/web/use-with/react/add-icons. This method doesn't require the need for the macro at the cost of some extra code that needs to be written while importing the icons in a component. Thank you for your support, really appreciate it.

[conartist6]

Sounds like a smart choice to keep yourself making progress for now.