Uncaught ReferenceError: For is not defined

[DeanKamali]

I have updated my project to "@babel/runtime": "^7.1.5" and I'm seeing errors in my app console

   imports/ui/pages/Patient/modals/Care/AddPatientAlerts.js:90:16: /Users/admin/Projects/meteor/project/imports/ui/pages/user/modals/Care/useralert.js: Unexpected
   token (90:16)

     88 |
     89 |                                 store.get('rowIndex') != null ?
   [store.get('user').profile.alerts[store.get('rowIndex')]].map(function (item, idx)
   {
   > 90 |                 return <div key={idx + 1}>

I'm also seeing the following error in chrome dev console.

Uncaught ReferenceError: For is not defined

My .babelrc

{
  "presets": [
    "babel-preset-meteor"
  ],
 "plugins": [
    ["jsx-control-statements"]
  ]
}

Here is a list of packages I'm using

https://pastebin.com/raw/6nXm9H9W

[AlexGilleran]

Might be showing my ignorance here, but looks like your babelrc doesn't actually have jsx-control-statements in it. Does babel automatically include plugins now? 😬

Maybe try putting it in there anyway?

Assuming that doesn't work:

1. What's the code look like pre-transform?
2. What's the error message you get in your app console? All I see is the lines of code it's happening on.

[DeanKamali]

@AlexGilleran I have updated my original post with correct .babelrc config, I have tried removing/adding the plugin numerous times as I was trying to identify the issue.

Here is an example of my code

<For each="item" index="idx" of={this.props.store.get('directory')}>
            <option key={idx} value={item._id}>{item.profile.details.first} {item.profile.details.last} . 
            </option>
</For>

Here is what I'm seeing in chrome console.

modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:91930 Uncaught ReferenceError: For is not defined
    at CalHeader.render (app.js?hash=5f999f49a1bd990ed688cadfd830bde4614a800a:30041)
    at finishClassComponent (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:91930)
    at updateClassComponent (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:91893)
    at beginWork (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:92718)
    at performUnitOfWork (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:95440)
    at workLoop (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:95480)
    at HTMLUnknownElement.callCallback (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:77780)
    at Object.invokeGuardedCallbackDev (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:77830)
    at invokeGuardedCallback (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:77887)
    at replayUnitOfWork (modules.js?hash=28ca9d0112d260d2199ef7df13a4cc5bba5d7a1f:94722)

I would like to confirm that jsx-control-statements should work with Babel >= 7?

I have made my code available on here (Cloud9 IDE) github login is required

https://ide.c9.io/amlife/test

[texttechne]

@DeanKamali Thanks for the repo, but I don't have an account and registering is not possible => redirect to AWS Cloud 9 trial stuff (I stopped there...)

To answer your question: JCS works with Babel 7+ since version 4.

In the initial error you've posted the JCS plugin seems to have been executed insofar as you can see store.get('user').profile.alerts[store.get('rowIndex')]].map(function (item, idx) So <For> has been transformed to map(...). However the JSX within the body of <For> has not been transformed, hence the error "Unexpected token".

Regarding the second error: It indicates that <For> has not been transformed at all...

Looking at your babelrc, you're clearly missing the babel-react-preset now, since the meteor-preset doesn't contain it (compare https://github.com/meteor/babel-preset-meteor/blob/master/index.js). This would explain the first type of error. JCS worked, but JSX didn't.

I assume you were toying around a lot with the babel configuration. So please make sure that you've included all the relevant babel plugins. Maybe you did update to JCS 4.0 only later...

If this doesn't solve the problem, then the order of the plugins could be the culprit: Try to manually include all the meteor plugins which are listed here: https://github.com/meteor/babel-preset-meteor/blob/master/index.js and then try to add JCS at the top and then at the bottom of the plugin list and in the worst case in between... Currently we're only aware of an order issue with transform-react-inline-elements as stated here: https://www.npmjs.com/package/babel-plugin-jsx-control-statements#installation

Hope this helps.

[texttechne]

And by the way, all babel plugins and presets should be installed as devDependencies. Your package.json shows babel-plugin-jsx-control-statements and babel-preset-meteor as runtime dependency...

[DeanKamali]

alright! I managed to solve this issue by wrapping the expression with curly braces

<For each="item" index="index" of={[1,2,3]}>
  <span key={item}>{item}</span>
</For>

becomes

{<For each="item" index="index" of={[1,2,3]}>
  <span key={item}>{item}</span>
</For>} 

Not sure why! but it works