我有一个使用TS react guide使用以下webpack配置创建的小项目:
module.exports={entry:"./src/index.tsx",output:{filename:"bundle.js",path:__dirname+"/dist"},devtool:"source-map",resolve:{extensions:[".ts",".tsx",".js",".json"]},module:{rules:[{test:/\.tsx?$/,loader:"awesome-typescript-loader"},{enforce:"pre",test:/\.js$/,loader:"source-map-loader"},{test:/\.css$/,loader:"css-loader"}]},externals:{react:"React","react-dom":"ReactDOM"},mode:"development"};
以及以下tsconfig.json:
{compilerOptions:{outDir:"./dist/",sourceMap:!0,noImplicitAny:!0,module:"commonjs",target:"es6",jsx:"react",resolveJsonModule:!0,experimentalDecorators:!0,emitDecoratorMetadata:!0,types:["reflect-metadata"]},include:["./src/**/*","./definitions.d.ts"]};
即使在定义了Select component(由于MCR项目不提供输入内容)之后,我仍希望包括Google的官方反应材料组件:
declare module '@material/react-select' {
export interface SelectOption {
label: string,
value: string,
disabled: boolean
}
export interface SelectProps {
label?: string;
onChange?: (event: SelectEvent) => void;
options?: [SelectOption];
}
export interface SelectEvent {
target: SelectOption
}
export class Select extends React.Component<SelectProps> {
}
}
该项目确实可以使用webpack编译,但是当我尝试显示Select组件时,出现此错误:
作为参考,此代码代表触发此错误的代码(其中,选项是从我要显示给<option key={x.id} value={x.id}>{x.name}</option>
元素的JSON数据的映射调用中生成的):
import { Select, SelectEvent } from "@material/react-select"
...
onReferenceOptionChanged(event: SelectEvent): void {
...
}
render() {
if (this.state.showProgress) {
return (<Loader showLoading={true} progressMessage="Loading forms..."></Loader>);
}
if (this.state.showErrorMessage) {
return (<Loader showErrorMessage={true} retryCallback={this.handleRetry}></Loader>);
}
var refOptions = this.state.references.map(x => {
return <option key={x.id} value={x.id}>{x.name}</option>
});
return (
<div>
<Select onChange={(event) => this.onReferenceOptionChanged(event)}>
{refOptions}
</Select>
</div>
);
}
如何修改我的配置,以免发生这种情况?
编辑: 我从webpack编译中得到了这些警告,也许它们是相关的:
这是我的package.json deps块:
仅将Select
更改为select
可以通过还原原始Chrome选择元素来解决此问题。