getting "The macro imported from "../macro" must be wrapped in "createMacro" which you can get from "babel-plugin-macros"" even though I DID wrap it

[tsiq-swyx]

Hello! really excited to make my first macro! just some minor issues and i suspect a wrong error message...

• babel-plugin-macros version: 2.2.1
• node version: 9.4.0
• npm (or yarn) version: 6.1.0

Relevant code or config

const { createMacro, MacroError } = require('babel-plugin-macros');
// const {getReplacement} = require('./helpers')
const { handleCreateRazor } = require('./index');

export default createMacro(bladeMacros);

function bladeMacros({ references, state, babel: { types: t } }) {
	Object.keys(references).forEach(referenceKey => {
		if (referenceKey === 'createQuery' || referenceKey === 'createFragment') {
			references[referenceKey].forEach(referencePath => {
				handleCreateRazor(referencePath, t);
			});
		} else throw new MacroError('invalid require?');
	});
}

and my fixture code:

import {Connect, query} from 'urql'
import {createQuery} from '../macro'

const movieQuery = createQuery('$id: id')
const Movie = ({id, onClose}) => (
  <div>
    <Connect
      query={query(movieQuery, {id: id})}
      children={({data}) => {
        const DATA = movieQuery(data)
        return (
          <div>
            <h2>{DATA.movie.gorilla}</h2>
            <p>{DATA.movie.monkey}</p>
            <p>{DATA.chimp}</p>
          </div>
        )
      }}
    />
  </div>
)

What you did:

i tried to run the tests

What happened:

  ● macros › basic test of functionality

    /Users/swyx/OpenSource/blade.macro/babel-blade/packages/babel-plugin-blade/src/__tests__/fixtures/macro-basic.js: The macro imported from "../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:174:11)
      at PluginPass.ImportDeclaration (node_modules/babel-plugin-macros/dist/index.js:92:9)
      at newFn (node_modules/babel-traverse/lib/visitors.js:276:21)
      at NodePath._call (node_modules/babel-traverse/lib/path/context.js:76:18)
      at NodePath.call (node_modules/babel-traverse/lib/path/context.js:48:17)
      at NodePath.visit (node_modules/babel-traverse/lib/path/context.js:105:12)
      at TraversalContext.visitQueue (node_modules/babel-traverse/lib/context.js:150:16)
      at TraversalContext.visitMultiple (node_modules/babel-traverse/lib/context.js:103:17)
      at TraversalContext.visit (node_modules/babel-traverse/lib/context.js:190:19)
      at Function.Object.<anonymous>.traverse.node (node_modules/babel-traverse/lib/index.js:114:17)

Reproduction repository:

https://github.com/sw-yx/babel-blade/blob/macrosIs/packages/babel-plugin-blade/src/macro.js

Problem description: I want to do named exports similar to emotion (related issue: #5) - however it is somehow not working and i suspect the error message might be wrong? i really am not sure what to do here.

Suggested solution: not sure at all. i tried looking at how Emotion does it, thats what my solution is based on.

[kentcdodds]

Hi @tsiq-swyx!

I'm fairly confident all you need to do is:

module.exports = createMacro(bladeMacro)

And it'll work. A macro should only have an export that is a function wrapped in createMacro. In your case you have an object with properties wrapped in createMacro. This is incorrect. If there's something we can do to improve the docs, please make a PR.

[swyxio]

just tried this:

const { createMacro, MacroError } = require('babel-plugin-macros');
// const {getReplacement} = require('./helpers')
const { handleCreateRazor } = require('./index');

module.exports = createMacro(bladeMacros);

function bladeMacros({ references, state, babel: { types: t } }) {
	references.createQuery.forEach(referencePath => {
		handleCreateRazor(referencePath, t);
	});
	references.createFragment.forEach(referencePath => {
		handleCreateRazor(referencePath, t);
	})`;`;
}

did not work I am afraid. I actually suspect the error message is wrong here! as I've tried quite a few combinations and nothing has worked. :(

I also tried this (inspired by how emotion does it)

module.exports = createMacro(bladeMacros);

function bladeMacros({ references, state, babel: { types: t } }) {
	Object.keys(references).forEach(referenceKey => {
		if (referenceKey === 'createQuery' || referenceKey === 'createFragment') {
			references[referenceKey].forEach(referencePath => {
				handleCreateRazor(referencePath, t);
			});
		} else throw new MacroError('invalid require?');
	});
}

to no avail.

repro in the link above, just npm run test

if I were to debug this I probably have to go into the code of babel-plugin-macros... will leave that to another day.

[tsiq-swyx]

kent suggested via twitter that this may be a testing-only issue:

"I've seen situations where plugins are loaded twice in testing when doing babel plugin testing and it can be.... a problem"

I built it (http://npm.im/blade.macro) and tried it out in a sample app and it doesnt give this error, it just doesnt work at all, but i am not sure if i am doing this right (since the thing is untested to work in the first place).

[tsiq-swyx]

confirmed that it is a test-only issue. here is the macro running in astexplorer http://astexplorer.net/#/gist/4b72d63ecd01237e179c102f6df9c2b4/31b569284fb12ba8761dc25d75db45d0ec05eba8

and it is still throwing this same error in the test. i think the error message is simply wrong somehow.

FAIL  src/__tests__/macro.js
  ● macros › basic test of functionality

    /Users/swyx/OpenSource/blade.macro/babel-blade/packages/babel-plugin-blade/src/__tests__/fixtures/macro-basic.js: The macro imported from "../macro" must be wrapped in "createMacro" whichyou 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:174:11)
      at PluginPass.ImportDeclaration (node_modules/babel-plugin-macros/dist/index.js:92:9)
      at newFn (node_modules/babel-traverse/lib/visitors.js:276:21)
      at NodePath._call (node_modules/babel-traverse/lib/path/context.js:76:18)
      at NodePath.call (node_modules/babel-traverse/lib/path/context.js:48:17)
      at NodePath.visit (node_modules/babel-traverse/lib/path/context.js:105:12)
      at TraversalContext.visitQueue (node_modules/babel-traverse/lib/context.js:150:16)
      at TraversalContext.visitMultiple (node_modules/babel-traverse/lib/context.js:103:17)
      at TraversalContext.visit (node_modules/babel-traverse/lib/context.js:190:19)
      at Function.Object.<anonymous>.traverse.node (node_modules/babel-traverse/lib/index.js:114:17)

[kentcdodds]

Yep, my guess is that it's applying babel-plugin-macros twice or something. This is very hard to debug, but I think you may be able to solve the problem by adding a .babelrc in the test directory that excludes babel-plugin-macros.

[tsiq-swyx]

just tried adding a .babelrc to src/__tests__/:

{
	"presets": [ "env" ],
	"plugins": []
}

no difference at all unfortunately.

[kentcdodds]

Boo! Hmmm.... I've no idea. What happens if you try to test it manually without using babel-plugin-tester?

[swyxio]

i confess i have no idea how to do that 😂 i will look into it. for the time being, i am doing the fabled "test in prod" protocol and it is working at least so yay!

[kentcdodds]

Luckily your macro logic is fairly simple so I think you'll be ok with that approach!

[tsiq-swyx]

ok well feel free to close if not helpful, i dont feel like we're going to track this one down anytime soon.

…

On Wed, Jul 11, 2018 at 10:38 PM Kent C. Dodds ***@***.***> wrote: Luckily your macro logic is fairly simple so I think you'll be ok with that approach! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#71 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AiT1ghd7OArS4bO4M3DxUvE8jwUXwLSTks5uFraWgaJpZM4VKdxi> .

[kentcdodds]

Yeah, I'll go ahead and close this. If I or anyone else bumps into this again we can re-open.