Twin.macro: `Cannot read property 'name' of undefined` when passing {...props} to a component

[nightgrey]

Hi!

I'm sorry if this has been documented somewhere. I couldn't find anything regarding to this at least. First, I love tailwind and I love twin.macro! ❤️ I love your work.

The issue is that everytime I create a component like this...

import React from 'react';
import tw from 'twin.macro';
import { css } from 'styled-components/macro';

const Example = ({...props}) => (
  <div tw="inline-block" {...props} />
);

...this error happens:

TypeError: /Users/nico/Dev/tailbook/src/Responsive/index.js: twin.macro: Cannot read property 'name' of undefined Learn more: https://www.npmjs.com/package/twin.macro
    at /Users/nico/Dev/tailbook/node_modules/twin.macro/macro.js:2521:68
    at Array.filter (<anonymous>)
    at JSXAttribute (/Users/nico/Dev/tailbook/node_modules/twin.macro/macro.js:2521:27)
    at NodePath._call (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitMultiple (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/context.js:79:17)
    at TraversalContext.visit (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/context.js:138:19)
    at Function.traverse.node (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/path/context.js:97:18)
    at TraversalContext.visitQueue (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/Users/nico/Dev/tailbook/node_modules/@babel/traverse/lib/path/context.js:97:18)

What I found out is:

• When I remove {...props}, it works.
• When I use css={tw``inline-block``}, it works.
• It doesn't matter if props are actually passed to the component or not
• The order doesn't matter either ({...props} before or after tw="")

This does ALSO happen with the codesandbox example you linked in your README.

With styled-components:

With emotion:

You can reproduce this by changing the Logo component like this:

const Logo = ({ ...props }) => (
  <a
    // Use the tw prop to add Tailwind styles directly on jsx elements
    tw="w-32 m-10 p-5 block opacity-50 hover:opacity-100"
    href="https://github.com/ben-rogerson/twin.macro"
    target="_blank"
    rel="noopener noreferrer"
    {...props}
  >
    <TwinSvg />
  </a>
)

So I feel like this is not specific to my setup but more of a general issue. Is this intended behaviour?

[nightgrey]

Oh, it's actually a pretty easy fix. The problem is in scr/macro.js:

https://github.com/ben-rogerson/twin.macro/blob/27bd97600bd706f70068fa40ed6956dfff5ea6f6/src/macro.js#L103

When p.node.name doesn't exist (which doesn't for {...props} - TBH, I don't know why), it crashes. The simplest fix would be to check for the existence of p.node.name before checking name. I'm gonna create a PR in a few minutes. 👍

[ben-rogerson]

Many thanks for the PR @nightgrey - I'll take a look 👍
I'll aim to include it in the next version.

[ben-rogerson]

The fix is in 1.0.0-alpha.9, closing