Babel插件错误未知类型为undefined的构造函数“ String”的节点

Question

I am building a shared component library that will be used by both React and Vue.

I am using Styletron, which requires a framework-specific adapter, but otherwise works pretty much the same.

So from my source code (a bunch of functions) I need to generate a folder with the code transpiled as normal and then another folder where the functions are modified slightly.

This is my code:

const MyComponent = styled('div', ({ isActive, hasBorder}) => ({
  color: 'red'
}))

// should not change
const OtherComponent = styled('div', {
  background: 'blue'
})

And it should become:

const MyComponent = styled('div', ({ isActive, hasBorder}) => ({
  color: 'red'
}), ['isActive', 'hasBorder'])

const OtherComponent = styled('div', {
  background: 'blue'
})

I actually have a working example of this working in ASTExplorer , but when I try to make a plugin out of it, I encounter the error Babel plugin error unknown node of type undefined with constructor "String"

This is my first plugin, and I KNOW that I am doing some stuff wrong, but right now I just need to find out what I have to do to make this work outside of ASTExplorer .

This is the plugin I have written in ASTExplorer:

export default function(babel) {
  const { types: t } = babel;
  return {
    name: "ast-transform",
    visitor: {
      CallExpression: (path) => {
        if (
          path.node.callee.name === 'styled' && 
          path.node.arguments.length === 2 && 
          t.isArrowFunctionExpression(path.node.arguments[1])
        ) {
          if (t.isObjectPattern(path.node.arguments[1].params[0])) {
            const props = []
            path.node.arguments[1].params[0].properties.map(prop => props.push(prop.value.name))
            path.node.arguments.push(JSON.stringify(props)) // I suspect that the error is from here
          }
        } 

      }
    }
  };
}

Answer 1

Babel transforms work with AST nodes, so stringifying the props and pushing them into the arguments list in this way won't work quite right. You'll want to actually create an AST structure from your object.

In this case, Babel offers a helper for this, so you can change

path.node.arguments.push(JSON.stringify(props))

to

path.node.arguments.push(t.valueToNode(props))