ljharb
commented
6 years ago Any idea on which file this is breaking, and what the code looks like?
Closed brunolemos closed 6 years ago
ljharb
commented
6 years ago Any idea on which file this is breaking, and what the code looks like?
brunolemos
commented
6 years ago I use flow, so it may be related.
brunolemos
commented
6 years ago @ljharb any debug flag I can turn on or any line I can add a console.log to see the filename? Couldn't find the exact file.
brunolemos
commented
6 years ago If I add a console.log
function declarePropTypesForIntersectionTypeAnnotation(propTypes, declaredPropTypes) {
+ console.log(propTypes)Node {
type: 'IntersectionTypeAnnotation',
start: 354,
end: 578,
loc:
SourceLocation {
start: Position { line: 14, column: 9 },
end: Position { line: 28, column: 8 } },
range: [ 354, 578 ],
types:
[ Node {
type: 'ObjectTypeAnnotation',
start: 354,
end: 445,
loc: [Object],
range: [Object],
callProperties: [],
properties: [Object],
indexers: [],
exact: false,
_babelType: 'ObjectTypeAnnotation' },
Node {
type: 'UnionTypeAnnotation',
start: 454,
end: 577,
loc: [Object],
range: [Object],
types: [Object],
_babelType: 'UnionTypeAnnotation' } ],
_babelType: 'IntersectionTypeAnnotation' }Cannot read property 'name' of undefined
Error line: const typeNode = typeScope(annotation.id.name);
ljharb
commented
6 years ago i think console.log(context.getFilename())?
brunolemos
commented
6 years ago @ljharb Found it. Seems to be because of the & flow operator:
props: {
cache?: ?string,
linkURL: string,
navigation: Object,
size?: ?number,
} & (
| {
username?: ?string,
}
| {
avatarURL: string,
}
| {
email?: ?string,
})Thanks, that's very helpful.
slothyrulez
commented
6 years ago Hi, same problem, here.
import type { FormProps } from 'redux-form'
...
type Props = FormProps & {
handleSubmit: () => *,
...
};
matteocng
commented
6 years ago Same problem, as @brunolemos found out, it seems to be related to Flow's &.
Throws with these test cases:
// @flow
import React from 'react';
import type { Node } from 'react'
type BasePropsType = {
className?: string,
text?: string,
}
type SomeComponentPropsType<T> = BasePropsType & {
something: string,
someOtherThing: T,
}
const SomeComponent = <T>(props: SomeComponentPropsType<T>): Node => <div />// @flow
import React from 'react';
import type { Node } from 'react'
type BasePropsType = {
className?: string,
text?: string,
}
type SomeComponentPropsType = BasePropsType & {
something: string,
}
const SomeComponent = (props: SomeComponentPropsType): Node => <div />// @flow
import React from 'react';
import type { Node } from 'react'
type BasePropsType = {
className?: string,
text?: string,
}
type SomeComponentPropsType<T> = BasePropsType & {
something: string,
someOtherThing: T,
}
const SomeComponent = (props: SomeComponentPropsType<*>): Node => <div />Does not throw with:
// @flow
import React from 'react';
import type { Node } from 'react'
type SomeComponentPropsType<T> = {
something: string,
someOtherThing: T,
}
const SomeComponent = <T>(props: SomeComponentPropsType<T>): Node => <div />node: v8.8.1
package:
{
"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.3.0",
"eslint-plugin-ava": "^4.2.1",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-flowtype": "^2.35.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0"
}eslintrc.js
module.exports = {
parser: 'babel-eslint',
plugins: [
'ava',
'babel',
'flowtype',
'import',
'jsx-a11y',
'react',
],
extends: [
'airbnb',
'plugin:ava/recommended',
'plugin:flowtype/recommended',
'plugin:import/errors',
'plugin:import/warnings',
"prettier",
"prettier/flowtype",
"prettier/react",
],
...
}
marcelmokos
commented
6 years ago Same problem on node v8.9.0. "eslint": "^4.9.0",
yarn run lint
yarn run v1.2.1
$ eslint . --cache
Cannot read property 'properties' of null
TypeError: Cannot read property 'properties' of null
...There’s no need for more comments; this is a bug, and it’s waiting for a fix - PRs are welcome.
mrchief
commented
6 years ago Does anyone what version introduced this? I'm trying to figure out which version to rollback to.
mrchief
commented
6 years ago I tried rolling back to 7.3.0, 7.2.0 along with airbnb config ^15.0.0 but now I started getting this error:
error Definition for rule 'react/jsx-curly-brace-presence' was not found react/jsx-curly-brace-presence@mrchief if npm ls exits nonzero, nothing can be expected to work. You’ll have to roll back the airbnb config too if you want to roll back.
mrchief
commented
6 years ago I rolled back config to 15 from 16. 15 is what I have been using so far. Are you saying I need to roll back further?
mrchief
commented
6 years ago Ok, this combination works (my rollback solution):
"eslint": "^4.3.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-loader": "^1.8.0",
"eslint-plugin-import": "^2.6.1",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.2.1",
DrummerHead
commented
6 years ago @mrchief Thanks! Those deps worked for me
Note: If you use "eslint-plugin-jsx-a11y": "5.x", you avoid this issue https://github.com/facebookincubator/create-react-app/issues/2631
alexvb
commented
6 years ago The crash was fixed in https://github.com/yannickcr/eslint-plugin-react/pull/1529. But the rule react/default-props-match-prop-types is still not working when Props are an intersection with a type imported from another file.
other-file.js:
// @flow
export type SomeType = {
baz: string,
};MyStatelessComponent.js:
// @flow
import React from 'react';
import type { SomeType } from './other-file';
type Props = SomeType & {
foo: string,
bar?: string,
};
const MyStatelessComponent = (props: Props) => (
<div>Hello {props.foo} {props.bar} {props.baz}</div>
);
MyStatelessComponent.defaultProps = {
bar: 'some default',
};Error:
#PATH#/MyStatelessComponent.js
15:3 error defaultProp "bar" has no corresponding propTypes declaration react/default-props-match-prop-types@ljharb Could this issue be reopened?
jseminck
commented
6 years ago @alexvb I believe this is a common issue with other rules as well (e.g. prop-types and no-unused-prop-types).
We should probably ignore validation when using types imported from another file?
ljharb
commented
6 years ago @alexvb can you file a new one for it instead?
.eslintrc
```json { "parser": "babel-eslint", "extends": [ "airbnb", "plugin:flowtype/recommended", "plugin:react/recommended", "prettier", "prettier/flowtype", "prettier/react" ], "env": { "es6": true, "jest": true, "node": true }, "globals": { "__DEV__": true }, "plugins": [ "babel", "flowtype", "import", "react", "react-native", "prettier" ], "parserOptions": { "ecmaVersion": 6, "ecmaFeatures": { "jsx": true }, "sourceType": "module" }, "settings": { "import/resolver": { "node": { "extensions": [ ".js", ".jsx", ".android.js", ".ios.js" ] } } }, "rules": { "react/jsx-filename-extension": 0, "react/prefer-stateless-function": [ "error", { "ignorePureComponents": true } ], "react/require-default-props": 0, "no-case-declarations": 0, "no-confusing-arrow": 0, "no-console": [ "error", { "allow": [ "debug", "error", "warn" ] } ], "no-underscore-dangle": 0, "no-nested-ternary": 0, "react-native/no-unused-styles": 2, "react-native/split-platform-components": 2, "react-native/no-color-literals": 2, "no-plusplus": 0, "prettier/prettier": [ "error", { "semi": false, "singleQuote": true, "trailingComma": "all" } ] } } ```