TypeError: Cannot read property '0' of undefined when yo react-webpack-redux:action addItem

[phellipeandrade]

System: Ubuntu 16.04.2 LTS Node: v6.9.1 npm: v4.2.0 yeoman: v1.8.5

Stack Trace

TypeError: Cannot read property '0' of undefined

  at walk (/home/phellipe/.nvm/versions/node/v6.9.1/lib/node_modules/generator-react-webpack-redux/generators/action/index.js:92:51)
    at walk (/home/phellipe/.nvm/versions/node/v6.9.1/lib/node_modules/generator-react-webpack-redux/node_modules/esprima-walk/esprima-walk.js:12:3)
    at ActionGenerator.attachToApp (/home/phellipe/.nvm/versions/node/v6.9.1/lib/node_modules/generator-react-webpack-redux/generators/action/index.js:85:7)
    at ActionGenerator.writing (/home/phellipe/.nvm/versions/node/v6.9.1/lib/node_modules/generator-react-webpack-redux/generators/action/index.js:158:10)
    at Object.<anonymous> (/home/phellipe/.nvm/versions/node/v6.9.1/lib/node_modules/generator-react-webpack-redux/node_modules/yeoman-generator/lib/index.js:408:23)
    at /home/phellipe/.nvm/versions/node/v6.9.1/lib/node_modules/generator-react-webpack-redux/node_modules/run-async/index.js:25:25
    at /home/phellipe/.nvm/versions/node/v6.9.1/lib/node_modules/generator-react-webpack-redux/node_modules/run-async/index.js:24:19
    at /home/phellipe/.nvm/versions/node/v6.9.1/lib/node_modules/generator-react-webpack-redux/node_modules/yeoman-generator/lib/index.js:409:9
    at runCallback (timers.js:637:20)
    at tryOnImmediate (timers.js:610:5)

Commands

    yo react-webpack-redux:action addItem

Solving

After commenting on the following line 91 of 'generator-react-webpack-redux/generators/action/index.js' I could normally use

if (node.type === 'AssignmentExpression' &&
       node.left.object.name === 'App') {
   //  node.right.properties[0].value.arguments[0].properties.push(propDeclaration);
}

[stylesuxx]

Was this with a freshly generated project? When adding an action, the generator attaches the action to the App, in your case it seems. Could you show me the contents of /src/containers/App.js

[phellipeandrade]

/src/containers/App.js

/* CAUTION: When using the generators, this file is modified in some places.
 *          This is done via AST traversal - Some of your formatting may be lost
 *          in the process - no functionality should be broken though.
 *          This modifications only run once when the generator is invoked - if
 *          you edit them, they are not updated again.
 */
import React, {
  Component,
  PropTypes
} from 'react';
import { addItem } from '../actions/';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Main from '../components/App';
/* Populated by react-webpack-redux:reducer */
class App extends Component {
  render() {
    const {actions} = this.props;
    return <Main actions={actions}/>;
  }
}
/* Populated by react-webpack-redux:reducer
 *
 * HINT: if you adjust the initial type of your reducer, you will also have to
 *       adjust it here.
 */
App.propTypes = { actions: PropTypes.object.isRequired };
function mapStateToProps(state) {
  // eslint-disable-line no-unused-vars
  /* Populated by react-webpack-redux:reducer */
  const props = {};
  return props;
}
function mapDispatchToProps(dispatch) {
  /* Populated by react-webpack-redux:action */
  const actions = { addItem };
  const actionMap = { actions: bindActionCreators(actions, dispatch) };
  return actionMap;
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

trace of node.right.properties[0].value.arguments

{
    type: 'MemberExpression',
    computed: false,
    object: {
        type: 'MemberExpression',
        computed: false,
        object: {
            type: 'Identifier',
            name: 'PropTypes',
            typeAnnotation: undefined,
            optional: undefined,
            range: [Object]
        },
        property: {
            type: 'Identifier',
            name: 'object',
            typeAnnotation: undefined,
            optional: undefined,
            range: [Object]
        },
        range: [931, 947]
    },
    property: {
        type: 'Identifier',
        name: 'isRequired',
        typeAnnotation: undefined,
        optional: undefined,
        range: [948, 958]
    },
    range: [931, 958]
}

Thank you very much!!

[stylesuxx]

Hmm, this does not seem to be generated with the current version of the generator,...

App.propTypes = { actions: PropTypes.object.isRequired };

should be

App.propTypes = {
  actions: PropTypes.shape({})
};

or in your case:

App.propTypes = {
  actions: PropTypes.shape({
    getItem: PropTypes.func.isRequired
  })
};

Then your actions will be added properly. I am just wondering - did you change that in App.js, or was it like that out of the box?

[phellipeandrade]

today I updated this generator, my project was assembled roughly a week ago. with an older version of this generator

I've checked my git log, and here is the very first code generated for this file, seems like the same as above.

/* CAUTION: When using the generators, this file is modified in some places. 
 *          This is done via AST traversal - Some of your formatting may be lost 
 *          in the process - no functionality should be broken though. 
 *          This modifications only run once when the generator is invoked - if 
 *          you edit them, they are not updated again. 
 */ 
import React, { 
  Component, 
  PropTypes 
} from 'react'; 
import {} from '../actions/'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import Main from '../components/App'; 
/* Populated by react-webpack-redux:reducer */ 
class App extends Component { 
  render() { 
    const { actions } = this.props; 
    return <Main actions={actions} />; 
  } 
} 
/* Populated by react-webpack-redux:reducer 
 * 
 * HINT: if you adjust the initial type of your reducer, you will also have to 
 *       adjust it here. 
 */ 
App.propTypes = { 
  actions: PropTypes.object.isRequired 
}; 
function mapStateToProps(state) { // eslint-disable-line no-unused-vars 
  /* Populated by react-webpack-redux:reducer */ 
  const props = {}; 
  return props; 
} 
function mapDispatchToProps(dispatch) { 
  /* Populated by react-webpack-redux:action */ 
  const actions = {}; 
  const actionMap = { actions: bindActionCreators(actions, dispatch) }; 
  return actionMap; 
} 
export default connect(mapStateToProps, mapDispatchToProps)(App); 

[stylesuxx]

Ok, this sounds reasonable. With the last version prop attachment has changed slightly. You should be good to go with the changes I suggested above.

[phellipeandrade]

I did almost nothing in my project, I will create a fresh one with this version. Again, thank you!

[stylesuxx]

Then you'll be on the safe side ;-)

You are very welcome.