babel-plugin-macros: False positive in macrosRegex

We recently released @formatjs/macro and got this issue https://github.com/formatjs/react-intl/issues/1511 for a user. The macro we use is not compatible with babel-plugin-macros because we use that in TS transformer & eslint as well so we don’t wrap it, but it looks like babel-plugin-macros might be too aggressive and throw an error if it detects anything that looks like macrosRegex. My suggestion: Can we turn this into a warning?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (9 by maintainers)

Most upvoted comments

Alright, to whom it may concerns.

We had to extend our Babel config to supply a custom isMacrosName() function. https://github.com/kentcdodds/babel-plugin-macros/blob/2cac571a5809c42671c2bcbd74921df65036369e/src/index.js#L5-L6

babel.config.js:

// Fixes https://github.com/formatjs/react-intl/issues/1511
//       https://github.com/kentcdodds/babel-plugin-macros/issues/131
const macrosRegex = /[./]macro(\.js)?$/;
const testMacrosRegex = v =>
  macrosRegex.test(v) && v.indexOf('@formatjs/macro') === -1;
module.exports = {
  plugins: [
    [
      'macros',
      {
        isMacrosName: testMacrosRegex,
      },
    ],
  ],
};

AndyOGo on Dec 9, 2019

@kentcdodds I couldn’t find any documentation for isMacrosName(), neither in user docs, nor author docs. https://github.com/kentcdodds/babel-plugin-macros/search?q=isMacrosName&unscoped_q=isMacrosName

I face the same warning from @formatjs/macro as described here https://github.com/formatjs/react-intl/issues/1511

Here is the reuslt of npm ls:

@axa-ch/aletheia@1.21.9 git-repos\aletheia
+-- babel-plugin-macros@2.8.0
+-- babel-plugin-react-intl@5.1.11
+-- import-all.macro@2.0.3
| `-- babel-plugin-macros@2.8.0  deduped
`-- react-intl@3.9.1

Error Log:

FAIL  src/components/wizard/Wizard.test.js
  ● Test suite failed to run
    git-repos\aletheia\node_modules\react-intl\dist\index.js: The macro imported from "@formatjs/macro" must be wrapped in "createMacro" which you can get from "babel-plugin-macros". Please refer to the documentation to see how to do this properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#writing-a-macro
      at applyMacros (node_modules/babel-plugin-macros/dist/index.js:211:11)
      at node_modules/babel-plugin-macros/dist/index.js:153:30
          at Array.forEach (<anonymous>)
      at VariableDeclaration (node_modules/babel-plugin-macros/dist/index.js:143:55)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:55:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:42:17)
      at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:90:31)
      at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:112:16)
      at TraversalContext.visitMultiple (node_modules/@babel/traverse/lib/context.js:79:17)
      at TraversalContext.visit (node_modules/@babel/traverse/lib/context.js:138:19)

AndyOGo on Dec 9, 2019

This is still broken in CRA. My tests always fails because of this issue.

arvinsim on Feb 20, 2020

@kentcdodds it can be configured to work now. But zero config tools like CRA are still broken with react-intl.

I think this check could be improved.

how if we check the exported funcrion, like expected number of args
or what actually is exported
should babel be part of the file name?
maybe you see other possible checks?

AndyOGo on Dec 31, 2019

What is the resolution to this react-intl issue within create-react-app when it is preferred to not modify babel? I just tested and it is still broken for react-scripts: 3.3.0-next.80. The mainline repository says they cannot fix: https://github.com/formatjs/react-intl/issues/1511

thadk on Dec 31, 2019

@tdeekens reported it so I can’t really confirm 😦 it’s a transient issue to me.

longlho on Nov 20, 2019