Facing issue with fortawesome integration with babel-plugin-macros. about babel-plugin-macros HOT 16 CLOSED

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.

from babel-plugin-macros.

from babel-plugin-macros.

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)

from babel-plugin-macros.

@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.

from babel-plugin-macros.

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.

from babel-plugin-macros.

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

from babel-plugin-macros.

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

from babel-plugin-macros.

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?

from babel-plugin-macros.

@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.

from babel-plugin-macros.

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.

from babel-plugin-macros.

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

from babel-plugin-macros.

@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?

from babel-plugin-macros.

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...

from babel-plugin-macros.

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

from babel-plugin-macros.

@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.

from babel-plugin-macros.

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

from babel-plugin-macros.