AlexGilleran/jsx-control-statements

TypeError: this is undefined

mymedia2 opened this issue · 2 comments

The next code leads to a wired error.

class A extends React.Component {
  constructor() {
    super();
    this.field = 'qwerty';
  }

  render() {
    for (const item of [1]) {
      const dummy = () => item;
      return <For each='elem' of={[2]}>{this.field}</For>;
    }
    return null;
  }
}

Results to:

  • TypeError: this is undefined in Firefox or
  • Uncaught TypeError: Cannot read property 'field' of undefined in Chrome.

I have the following dev dependencies in the package.json file.

  ...
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-plugin-jsx-control-statements": "^3.2.8",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  },
  ...

If you comment dummy definition, the error will disappear.

Thanks for raising this @mymedia2 . I can't duplicate it though, at least not with Babel 7 / JSX-Control-Statements 4.0.0. What I'm doing is here:

https://github.com/AlexGilleran/jsx-control-statements-test/blob/issue/79/src/components/test-dummy-inline-func.jsx

@AlexGilleran, with Babel 7.6.2 and JSX-Control-Statements plugin 4.0.0 the issue does not appear. I think the bug may be considered resolved.