1

我目前正在玩ReactJS.NET使用webpackand TypeScript。我找到了一些我想尝试的代码。有人来电Object.assign。

由于 TS 编译器抱怨，我在 tsconfig.json 文件中切换到 es6。

但从那时起，当我尝试在服务器端呈现组件时，总是会出现以下错误：

脚本抛出异常：Minified React 错误 #130；

而且我不知道是什么导致了错误。它还声明使用非缩小的开发环境。但我也不知道该怎么做。

当我使用ReactDOM.render(<CommentBox />, document.getElementById('target'))它时，它可以正常工作。

这是我的（简化的）CommenBox.tsx文件

import * as React from "react";
import { Button, Modal, Popover } from "react-bootstrap";

interface ICommentBoxProps {}
interface ICommentBoxState {}

export class CommentBox extends React.Component<ICommentBoxProps, ICommentBoxState> {
    constructor() {
        super();
    }

    render() {return (<div>Test</div>);}
}

这是tsconfig.json：

{
  "compilerOptions": {
    "outDir": "./Scripts/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ]
}

最后是我的webpack.config.js：

var path = require("path");

module.exports = {
    context: path.join(__dirname, 'Scripts/src'),
    entry: {
        server: "./server",
        client: "./client"
},
    output: {
        path: path.resolve(__dirname, "./Scripts/dist"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    transpileOnly: true
                }
            }
        ]
    },
    resolve: {
        extensions: [".js", ".ts", ".tsx"]
    },
    externals: {
        'react': "React",
        'react-dom': "ReactDOM"
    }
};

在评论中，我现在收到以下错误消息：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

谷歌搜索将我带到这篇 SO-article。所以这似乎与出口的完成方式有关，但我不明白这一点。

当作为最后一条语句编写时export = CommentBox;，它在服务器端构建和呈现，但给了我以下 ReSharper 错误：

以 ECMAScript 6 或更高版本为目标时，不能使用导出分配。

4

0 回答 0