React Relay (react-relay) with Typescript throwing TypeError: Object prototype may only be an Object or null: undefined
React Relay (react-relay) with Typescript throwing TypeError: Object prototype may only be an Object or null: undefined
在尝试实例化扩展 Relay.Mutation
的 class 时,我 运行 使用 react-relay
遇到了一个非常奇怪的 TypeError。我用 create-react-app my-app --scripts-version=react-scripts-ts
创建了一个简单的 Typescript 项目来演示这个问题。
每当我 运行 yarn start
,这就是我所看到的:
这个错误对我来说没有意义:
TypeError: Object prototype may only be an Object or null: undefined
我只是想实例化我自己的扩展 Relay.Mutation
class 的新实例。我对 React Relay 世界和 ES6/Typescript 真的很陌生,所以我可能只是想念一些愚蠢的东西。
在这个简单的项目中,我直接使用 DefinitelyTyped repository.
中定义的示例 class
难道我不能像这样使用 class:
const atm = new AddTweetMutation({ text: 'asdf', userId: '1123' });
这是 AddTweetMutation.tsx
class 的样子:
import * as Relay from 'react-relay';
interface Props {
text: string;
userId: string;
}
interface State {
}
export default class AddTweetMutation extends Relay.Mutation<Props, State> {
public getMutation() {
return Relay.QL`mutation{addTweet}`;
}
public getFatQuery() {
return Relay.QL`
fragment on AddTweetPayload {
tweetEdge
user
}
`;
}
public getConfigs() {
return [{
type: 'RANGE_ADD',
parentName: 'user',
parentID: this.props.userId,
connectionName: 'tweets',
edgeName: 'tweetEdge',
rangeBehaviors: {
'': 'append',
},
}];
}
public getVariables() {
return this.props;
}
}
这是整个 Hello.tsx
React 组件:
import * as React from 'react';
import AddTweetMutation from '../mutations/AddTweetMutation';
export interface Props {
name: string;
enthusiasmLevel?: number;
}
class Hello extends React.Component<Props, {}> {
render() {
const atm = new AddTweetMutation({ text: 'asdf', userId: '1123' });
console.log(atm);
const { name, enthusiasmLevel = 1 } = this.props;
if (enthusiasmLevel <= 0) {
throw new Error('You could be a little more enthusiastic. :D');
}
return (
<div className="hello">
<div className="greeting">
Hello {name + getExclamationMarks(enthusiasmLevel)}
</div>
</div>
);
}
}
export default Hello;
// helpers
function getExclamationMarks(numChars: number) {
return Array(numChars + 1).join('!');
}
这是我的 package.json
的样子:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "^20.0.6",
"@types/node": "^8.0.19",
"@types/react": "^16.0.0",
"@types/react-dom": "^15.5.2",
"@types/react-relay": "^0.9.13",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-relay": "^1.1.0",
"react-scripts-ts": "2.5.0"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
}
}
更新:输入目前对 react-relay > 1.x 无效。请参阅thread on github for this issue。我还使用解决方法更新了我的回购协议。
问题是 react-relay@1.1.0
已经改变了它的 API 而 @types/react-relay@0.9.13
已经过时了。
TypeScript 根据可用的类型(类型定义)静态分析您的代码。所以即使你 @types/react-relay@0.9.13
已经过时了,TypeScript 也不知道并且只是根据它采取行动。
要解决这个问题,您可以:
- 在 https://github.com/DefinitelyTyped/DefinitelyTyped 为
@types/react-relay
做出贡献以更新其打字
- 在 https://github.com/DefinitelyTyped/DefinitelyTyped 上提交问题,看看是否有人可以帮助更新打字。
- 使用 "module augmentation" (https://www.typescriptlang.org/docs/handbook/declaration-merging.html)
在本地自行更新打字
- 不使用
@types/react-relay
并执行 declare module "react-relay"
将其标记为 any
类型(您将失去类型安全和 IDE 支持,但如果类型不是没错,反正没关系)。
对于最后一个选项,执行此操作:
// custom-typings/react-relay.d.ts
declare module 'react-relay'
// tsconfig.json
{
"include": [
"custom-typings"
]
}
在尝试实例化扩展 Relay.Mutation
的 class 时,我 运行 使用 react-relay
遇到了一个非常奇怪的 TypeError。我用 create-react-app my-app --scripts-version=react-scripts-ts
创建了一个简单的 Typescript 项目来演示这个问题。
每当我 运行 yarn start
,这就是我所看到的:
这个错误对我来说没有意义:
TypeError: Object prototype may only be an Object or null: undefined
我只是想实例化我自己的扩展 Relay.Mutation
class 的新实例。我对 React Relay 世界和 ES6/Typescript 真的很陌生,所以我可能只是想念一些愚蠢的东西。
在这个简单的项目中,我直接使用 DefinitelyTyped repository.
中定义的示例 class难道我不能像这样使用 class:
const atm = new AddTweetMutation({ text: 'asdf', userId: '1123' });
这是 AddTweetMutation.tsx
class 的样子:
import * as Relay from 'react-relay';
interface Props {
text: string;
userId: string;
}
interface State {
}
export default class AddTweetMutation extends Relay.Mutation<Props, State> {
public getMutation() {
return Relay.QL`mutation{addTweet}`;
}
public getFatQuery() {
return Relay.QL`
fragment on AddTweetPayload {
tweetEdge
user
}
`;
}
public getConfigs() {
return [{
type: 'RANGE_ADD',
parentName: 'user',
parentID: this.props.userId,
connectionName: 'tweets',
edgeName: 'tweetEdge',
rangeBehaviors: {
'': 'append',
},
}];
}
public getVariables() {
return this.props;
}
}
这是整个 Hello.tsx
React 组件:
import * as React from 'react';
import AddTweetMutation from '../mutations/AddTweetMutation';
export interface Props {
name: string;
enthusiasmLevel?: number;
}
class Hello extends React.Component<Props, {}> {
render() {
const atm = new AddTweetMutation({ text: 'asdf', userId: '1123' });
console.log(atm);
const { name, enthusiasmLevel = 1 } = this.props;
if (enthusiasmLevel <= 0) {
throw new Error('You could be a little more enthusiastic. :D');
}
return (
<div className="hello">
<div className="greeting">
Hello {name + getExclamationMarks(enthusiasmLevel)}
</div>
</div>
);
}
}
export default Hello;
// helpers
function getExclamationMarks(numChars: number) {
return Array(numChars + 1).join('!');
}
这是我的 package.json
的样子:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "^20.0.6",
"@types/node": "^8.0.19",
"@types/react": "^16.0.0",
"@types/react-dom": "^15.5.2",
"@types/react-relay": "^0.9.13",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-relay": "^1.1.0",
"react-scripts-ts": "2.5.0"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
}
}
更新:输入目前对 react-relay > 1.x 无效。请参阅thread on github for this issue。我还使用解决方法更新了我的回购协议。
问题是 react-relay@1.1.0
已经改变了它的 API 而 @types/react-relay@0.9.13
已经过时了。
TypeScript 根据可用的类型(类型定义)静态分析您的代码。所以即使你 @types/react-relay@0.9.13
已经过时了,TypeScript 也不知道并且只是根据它采取行动。
要解决这个问题,您可以:
- 在 https://github.com/DefinitelyTyped/DefinitelyTyped 为
@types/react-relay
做出贡献以更新其打字 - 在 https://github.com/DefinitelyTyped/DefinitelyTyped 上提交问题,看看是否有人可以帮助更新打字。
- 使用 "module augmentation" (https://www.typescriptlang.org/docs/handbook/declaration-merging.html) 在本地自行更新打字
- 不使用
@types/react-relay
并执行declare module "react-relay"
将其标记为any
类型(您将失去类型安全和 IDE 支持,但如果类型不是没错,反正没关系)。
对于最后一个选项,执行此操作:
// custom-typings/react-relay.d.ts
declare module 'react-relay'
// tsconfig.json
{
"include": [
"custom-typings"
]
}