Unable to compile code with Macros while using Babel plugins.

[zeel01]

🐛 bug report

Using:

import macro from "./macro.js" with { type: "macro" };

Fails if I have any custom Babel configurations defined. I'm enabling a few plugins.

I get the following error:

You are using import attributes, without specifying the desired output syntax.
Please specify the "importAttributesKeyword" generator option, whose value can be one of:
 - "with"        : `import { a } from "b" with { type: "json" };`
 - "assert"      : `import { a } from "b" assert { type: "json" };`
Server running at http://localhost:1234
🚨 Build failed.

@parcel/transformer-js: Unexpected token `:`. Expected identifier, string literal, numeric literal or [ for the computed key

  /mnt/o/... 
  > 1 | import macro from "./macro.js" with { type: "macro" };
  >   |                                           ^

I can't seem to figure out how to define the option listed there, I've tried:

{
    "plugins": [
        ["@babel/plugin-syntax-import-attributes", { "importAttributesKeyword": "with" }],
        [...]
    ]
}

Which does nothing, and:

{
    "importAttributesKeyword": "with",
    "plugins": [
        ["@babel/plugin-syntax-import-attributes", { "importAttributesKeyword": "with" }],
        [...]
    ]
}

Which produces an error that that isn't a valid option.

If I use the configuration example from the Parcel Macro docs under the Babel section:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "shippedProposals": true
      }
    ]
  ]
}

Paracel complains a bunch about using redundant Babel stuff:

@parcel/transformer-babel: Parcel includes transpilation by default. Babel config babel.config.json includes the following redundant   
presets: @babel/preset-env. Removing these may improve build performance.

The code compiles, but produces nonsensical runtime errors indicating that the bundle is in some way invalid.

Am I missing something, or is this a bug?

🎛 Configuration (.babelrc, package.json, cli command)

babel.config.json:

{
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "version": "2023-11" }],
        ["@babel/plugin-syntax-import-attributes"],
        ["@babel/plugin-proposal-json-modules"],
        ["@babel/plugin-proposal-do-expressions"],
        ["@babel/plugin-proposal-async-do-expressions"]
    ]
}

I'm using this same config to build my backend code directly with Babel, it it has no issue with the import attributes and doesn't complain about the above config.

[devongovett]

@babel/plugin-syntax-import-attributes should work to enable parsing import attributes. In the latest version it should already configure the importAttributesKeyword for you. Are you sure you're using the latest Babel version? https://github.com/babel/babel/blob/a2025d7d695b0f3b0506f66225d6b15bcfa1cf6a/packages/babel-plugin-syntax-import-attributes/src/index.ts#L23

[zeel01]

Yes, and as noted Babel compiles the backend just fine. The same config file, same workspace, but different behavior in Parcel.

[devongovett]

I would need a reproduction in order to debug this further for you.

[jamiegluk]

This issue got me stuck for hours. I guess maybe I have something set up wrong. I gave up and ended up just hacking it.

I ditched @babel/plugin-syntax-import-attributes. Well I ditched any custom babel setup entirely, because Parcel Macros are all I needed it for.

@parcel/transformer-babel comes with @parcel/config-default. It uses @babel/generator, which is the tool issuing the error you get. So I used patch-package (or yarn patch works too) to patch node_modules/@parcel/transformer-babel/lib/BabelTransformer.js and add in the importAttributesKeyword: "with" line it's complaining about.

This is the patch: @parcel+transformer-babel+2.12.0.patch

Now it works.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.