search

pugjs / babel-plugin-transform-react-pug

A plugin for transpiling pug templates to jsx
MIT License
811 stars 47 forks source link

Error when not using React.Fragment to wrap pug's each iterator #66

Closed q3e closed 5 years ago

q3e commented 6 years ago

Error in ../../Component

Module build failed: TypeError: Property children[0] of JSXElement expected node to be of a type ["JSXText","JSXExpressionContainer","JSXSpreadChild","JSXElement","JSXFragment"] but instead got "CallExpression"
    at validate (/Users/jitszu/Apps/MyApp/node_modules/@babel/types/lib/definitions/utils.js:136:13)
    at validator (/Users/jitszu/Apps/MyApp/node_modules/@babel/types/lib/definitions/utils.js:95:7)
    at Object.validate (/Users/jitszu/Apps/MyApp/node_modules/@babel/types/lib/definitions/utils.js:191:10)
    at validate (/Users/jitszu/Apps/MyApp/node_modules/@babel/types/lib/validators/validate.js:15:9)
    at builder (/Users/jitszu/Apps/MyApp/node_modules/@babel/types/lib/builders/builder.js:40:27)
    at Object.JSXElement (/Users/jitszu/Apps/MyApp/node_modules/@babel/types/lib/builders/generated/index.js:1233:27)
    at Object.jSXElement (/Users/jitszu/Apps/MyApp/node_modules/babel-plugin-transform-react-pug/lib/babel-types.js:689:52)
    at buildJSXElement (/Users/jitszu/Apps/MyApp/node_modules/babel-plugin-transform-react-pug/lib/utils/jsx.js:22:31)
    at buildJSXFragment (/Users/jitszu/Apps/MyApp/node_modules/babel-plugin-transform-react-pug/lib/utils/jsx.js:31:10)
    at PluginPass.TaggedTemplateExpression (/Users/jitszu/Apps/MyApp/node_modules/babel-plugin-transform-react-pug/lib/index.js:58:98)
    at newFn (/Users/jitszu/Apps/MyApp/node_modules/@babel/traverse/lib/visitors.js:223:21)
    at NodePath._call (/Users/jitszu/Apps/MyApp/node_modules/@babel/traverse/lib/path/context.js:64:19)
    at NodePath.call (/Users/jitszu/Apps/MyApp/node_modules/@babel/traverse/lib/path/context.js:38:17)
    at NodePath.visit (/Users/jitszu/Apps/MyApp/node_modules/@babel/traverse/lib/path/context.js:99:12)
    at TraversalContext.visitQueue (/Users/jitszu/Apps/MyApp/node_modules/@babel/traverse/lib/context.js:135:18)
    at TraversalContext.visitSingle (/Users/jitszu/Apps/MyApp/node_modules/@babel/traverse/lib/context.js:94:19)

/MyComponent.js

render = () => pug`
      each item in this.props.data
        h1(key=item)= item.data

        Button Btn
    `

Using React.Fragment makes it work when used as a Parent or as Sibling. I dont know why i.e.

render = () => pug`
  React.Fragment
      each item in this.props.data
        h1(key=item)= item.data

        Button Btn
    `

AND

render = () => pug`
  React.Fragment
      each item in this.props.data
        h1(key=item)= item.data

   Button Btn
    `
ezhlobo commented 5 years ago

Done in v7.0.0

See how the first snippet looks online

However it throws a warning in react :)