ManuelDeLeon / viewmodel-react

Create your React components with view models.
MIT License
24 stars 3 forks source link

"unless" binding gives "container is falsey" error if it contains another element #18

Open wildhart opened 7 years ago

wildhart commented 7 years ago

I'm converting a large Meteor Blaze project to viewmodel-react (to get SSR). I have a contact form, and I want the submit button to hide while the form is being sent. If I use b="unless: sending" on an element which contains a child element, like this:

<button b="click:submit, unless:sending" class="mdl-button mdl-js-button mdl-button--primary" type="submit">
  Send <i class="material-icons">&#xE163;</i>
</button>

I get a ton of errors starting with Container is falsy:

While processing files with ecmascript (for target web.browser):
/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/babel-traverse/lib/path/replacement.js:170:11:
   /client/sales/react/SalesContact.jsx: Container is falsy
   at NodePath._replaceWith
   (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/babel-traverse/lib/path/replacement.js:170:11)
   at NodePath.replaceWith
   (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/babel-traverse/lib/path/replacement.js:160:8)
   at PluginPass.exit
   (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/babel-helper-builder-react-jsx/lib/index.js:22:12)
   at newFn
....
  at /home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/index.js:60:8
   at Cache.Cp.get
   (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/cache.js:94:19)
   at Object.compile
   (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/index.js:47:23)
   at Object.Babel.compile (packages/babel-compiler.js:48:24)
   at packages/babel-compiler.js:162:22
   at Function.time (/tools/tool-env/profile.js:305:10)
   at profile (packages/babel-compiler.js:192:20)
   at BabelCompiler.BCp.processOneFileForTarget (packages/babel-compiler.js:161:20)
   at BabelCompiler.<anonymous> (packages/babel-compiler.js:93:26)
   at Array.forEach (native)
   at BabelCompiler.BCp.processFilesForTarget (packages/babel-compiler.js:92:14)

I also have a 'sending...' element which replaces the submit button while the form is being sent, and using b="if: sending" works fine (even though it contains a child element). I eventually narrowed it down to being caused by the presence of the child element:

<div b="unless: sending">
  this <b>doesn't</b> work because of the b element
</div>

<div b="unless: sending">
  this works
</div>

<div b="if: sending">
  This works <b>too</b>
</div>

My package.json contains:

  "dependencies": {
    "babel-runtime": "^6.18.0",
    ...
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "viewmodel-react": "^1.0.3"
  },
  "babel": {
    "plugins": [ "viewmodel-react-plugin" ]
  },
  "devDependencies": {
    "viewmodel-react-plugin": "^2.0.2"
  }

If I add the hide/show bindings they work OK, so I've worked around the bug. However, I thought I'd report it anyway. Google doesn't give much help for 'Container is falsy'.

ManuelDeLeon commented 7 years ago

Interesting. I'll fix it. In the meantime you should be able to use if: !sending

On Mar 21, 2017 4:02 PM, "wildhart" notifications@github.com wrote:

I'm converting a large Meteor Blaze project to viewmodel-react (to get SSR). I have a contact form, and I want the submit button to hide while the form is being sent. If I use b="unless: sending" on an element which contains a child element, like this:

I get a ton of errors starting with Container is falsy:

While processing files with ecmascript (for target web.browser): /home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/babel-traverse/lib/path/replacement.js:170:11: /client/sales/react/SalesContact.jsx: Container is falsy at NodePath._replaceWith (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/babel-traverse/lib/path/replacement.js:170:11) at NodePath.replaceWith (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/babel-traverse/lib/path/replacement.js:160:8) at PluginPass.exit (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/babel-helper-builder-react-jsx/lib/index.js:22:12) at newFn .... at /home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/index.js:60:8 at Cache.Cp.get (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/cache.js:94:19) at Object.compile (/home/ubuntu/.meteor/packages/ecmascript/.0.6.0.1cf1y9y++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/meteor-babel/index.js:47:23) at Object.Babel.compile (packages/babel-compiler.js:48:24) at packages/babel-compiler.js:162:22 at Function.time (/tools/tool-env/profile.js:305:10) at profile (packages/babel-compiler.js:192:20) at BabelCompiler.BCp.processOneFileForTarget (packages/babel-compiler.js:161:20) at BabelCompiler. (packages/babel-compiler.js:93:26) at Array.forEach (native) at BabelCompiler.BCp.processFilesForTarget (packages/babel-compiler.js:92:14)

I also have a 'sending...' element which replaces the submit button while the form is being sent, and using b="if: sending" works fine (even though it contains a child element). I eventually narrowed it down to being caused by the presence of the child element:

this doesn't work because of the b element
this works
This works too

My package.json contains:

"dependencies": { "babel-runtime": "^6.18.0", ... "react": "^15.4.2", "react-dom": "^15.4.2", "viewmodel-react": "^1.0.3" }, "babel": { "plugins": [ "viewmodel-react-plugin" ] }, "devDependencies": { "viewmodel-react-plugin": "^2.0.2" }

If I add the hide/show bindings they work OK, so I've worked around the bug. However, I thought I'd report it anyway. Google doesn't give much help for 'Container is falsy'.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ManuelDeLeon/viewmodel-react/issues/18, or mute the thread https://github.com/notifications/unsubscribe-auth/AED31h23jbETAJ9NbBuTVBaCPzTepKjAks5roEj4gaJpZM4Mkd03 .