Giters

treycordova / nativejsx

JSX to native DOM API transpilation. :yellow_heart: <div> ⟹ document.createElement('div')!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error with basic example: base[type] is not a function

laurenkt opened this issue · comments

commented
  • nativejsx 4.3.0
  • node 9.5.0

With the following file:

console.log(
	<div>
		<h1>Test</h1>
	</div>
)

Invoked via command-line: nativejsx src/index.jsx

I get this error:

$ node_modules/.bin/nativejsx src/index.jsx
/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:29
    base[type](node, st, c);
              ^

TypeError: base[type] is not a function
    at c (/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:29:15)
    at Object.walkers.JSXElement (/Users/lauren/Projects/physmod/node_modules/nativejsx/source/walkers.js:184:9)
    at c (/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:29:15)
    at Object.walkers.CallExpression (/Users/lauren/Projects/physmod/node_modules/nativejsx/source/walkers.js:31:9)
    at c (/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:29:15)
    at Object.skipThrough (/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:183:37)
    at c (/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:29:15)
    at Object.base.ExpressionStatement.base.ParenthesizedExpression (/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:201:35)
    at c (/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:29:15)
    at Object.skipThrough (/Users/lauren/Projects/physmod/node_modules/nativejsx/node_modules/acorn/dist/walk.js:183:37)

If I change the file to:

console.log(
	<div />
)

It works fine.

I thought perhaps it was something to do with the node version but all the tests run fine (except when I add an extra test to parse this file).

Any ideas?

commented

any idea? i have same error

commented

@laurenkt @juanpablocs

This reason why this doesn't work is that acorn-jsx is upgraded to 4.x.x.

The Literal type of child node is changed to JSXText. Thus, you should make a patch to handle JSXText.

walkers.JSXElement = (node, state, c) => {
  for (let attribute of node.openingElement.attributes) {
    c(attribute, state)
  }

  for (let child of node.children) {
    switch (child.type) {
      case 'JSXText':
      case 'Literal':
        child.type = 'Literal';
        const value = child.value.replace('\n', '').trim()

        if (value.length) {
          c(child, {
            name: allocator.next(),
            parent: state.name
          })
        }
        break
      case 'JSXExpressionContainer':
      case 'JSXElement':
        c(child, {
          name: allocator.next(),
          parent: state.name
        })
        break
      default:
        c(child, state)
    }
  }
}
commented

Happy to take pull requests if someone wants to submit one.