new Parse.Query doesn't work with react-webpack??

[jbbae]

The updates for ParseComponent for ES6-based code states that all of the same methods in the ParseReact.Mixin should work the same way. However, the "new Parse.Query" doesn't seem to grab anything...? listItems seems always to be empty.

Notes: a) I have verified the connection with Parse (using the "TestObject" code provided in the QuickStart section in Parse.com)

Thanks so much in advance! I'm new to web dev, and just happened to start with React & Parse, so please excuse if this is a silly mistake. (Below is the shortened code based on feedback below)

import React from 'react';
import Parse from 'parse';
import ParseReact from 'parse-react';
let ParseComponent = ParseReact.Component(React);

export default class ExplorerWithNav extends ParseComponent {

observe() {
  return {
    listItems: (new Parse.Query('Focus')).ascending('name')
  };
}

render() {
  let listitems;
  let itemDescription;

  if (this.data.listItems.length) {
    listitems = (
      <List subheader="Your Options">
      {this.data.listItems.map(function(item, i) {
        return (
          <ListItem
            key={i}
            primaryText={item.name} />
        );
      }, this)}
      </List>
    );
  }

  if (this.state.selecteditem.length > 0) {
    itemDescription = <p>Hi!</p>;
  }

  return (
    <div>
      <div>
        {itemDescription}
      </div>
      <div>
        {listitems}
      </div>
    </div>
  );
}
}

[weblogixx]

Hi @nickbae91,

did you put the node modules you need into the webpack configuration? We currently only include files in the src/ folder in webpack, so stuff like material-ui (which I think would be installed via npm) has to be included in cfg/dev.js:

config.module.loaders.push({
  test: /\.(js|jsx)$/,
  loader: 'react-hot!babel-loader',
  include: path.join(__dirname, '/../src') // change to:
  include: [
    path.join(__dirname, '/../src'),
    path.join(__dirname, '/../node_modules/material-ui')
  ]
});

Unfortunately I dont know parse, so I cannot say for sure if it is a problem with generator of with parse itself.

[jbbae]

Sorry weblogixx I didn't realize that the post was way too long. I updated the description and code (above) for easier readability. I have also created a public repo (basically an empty webpack, with the libraries required included, and this single page): https://github.com/nickbae91/Explorerwithnav_parse-react/blob/master/src/components/Main.js

Per your suggestion, I have implemented it in the dev.js as instructed, but still doesn't seem to work. Does this totally discount webpack as being the source of the issue? I guess part of the problem is that I understand too little of the 'under-the-hood' of the tools & libraries I'm using (i.e. webpack, ParseReact) and could only get far enough to identify that one of these two tools is the culprit.

[weblogixx]

Hi @nickbae91,

sorry for the late reply. I had some time looking at the problem. It seems like it is in fact a babel / webpack issue. The problem here is that material-ui is still using babel 5. Babel then parses the .babelrc file in the npm dir. As the format has changed (and the option breakConfig is not available in 6.0 anymore), the babel compiler breaks.

You can get more informations at https://github.com/facebook/react-native/issues/4062 (with a possible workaround, involving a little shellscript) and at https://github.com/callemall/material-ui/issues/2501#issuecomment-164308683.

Hope this helps, I was not aware that such problems could exist.

[jbbae]

Hey thanks for coming back and helping out! Yeah after a lot of fiddling, I figured that it was a webpack issue - it started to work once I moved the source code to a simple example of ParseReact. I will try your suggestions and try moving it back to a webpack setup.