Skip to content

Spread operator in StyleSheet causes linter to crash #129

@ghost

Description

When I define a StyleSheet with a spread operator, the linter crashes.

Version

"eslint-plugin-react-native": "^2.2.1",

StyleSheet
const styles = StyleSheet.create({
  ...SettingsStyles,
  image: {
    height: 90,
    width: 90,
    borderRadius: 45,
  },
  profile: {
    flex: 1,
  },
  avatar: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 15,
    paddingBottom: 15,
  },
});
Error
Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
    at styleSheets.(anonymous function).styleSheets.(anonymous function).filter.property (/Users/upside/src/upside-rewards/upside-rewards-native/node_modules/eslint-plugin-react-native/lib/util/stylesheet.js:37:41)
    at Array.filter (native)
    at StyleSheets.markAsUsed (/Users/upside/src/upside-rewards/upside-rewards-native/node_modules/eslint-plugin-react-native/lib/util/stylesheet.js:37:10)
    at Program:exit.styleReferences.forEach (/Users/upside/src/upside-rewards/upside-rewards-native/node_modules/eslint-plugin-react-native/lib/rules/no-unused-styles.js:57:23)
    at Set.forEach (native)
    at EventEmitter.Program:exit (/Users/upside/src/upside-rewards/upside-rewards-native/node_modules/eslint-plugin-react-native/lib/rules/no-unused-styles.js:56:25)
    at emitOne (events.js:101:20)
    at EventEmitter.emit (events.js:188:7)
    at NodeEventGenerator.leaveNode (/Users/upside/src/upside-rewards/upside-rewards-native/node_modules/eslint/lib/util/node-event-generator.js:48:22)
    at CodePathAnalyzer.leaveNode (/Users/upside/src/upside-rewards/upside-rewards-native/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:627:23)
    at CommentEventGenerator.leaveNode (/Users/upside/src/upside-rewards/upside-rewards-native/node_modules/eslint/lib/util/comment-event-generator.js:111:23)
    at Controller.leave (/Users/upside/src/upside-rewards/upside-rewards-native/node_modules/eslint/lib/eslint.js:931:36)
Workaround
const combineStyles = {
  ...SettingsStyles,
  image: {
    height: 90,
    width: 90,
    borderRadius: 45,
  },
  profile: {
    flex: 1,
  },
  avatar: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 15,
    paddingBottom: 15,
  },
}

const styles = StyleSheet.create(combineStyles);
Related Tickets

Handle unrecognized eslint nodes in style rules helper #49
update 1.0.1 broke eslint config with "react-native/no-unused-styles": "error", #21

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions