Question

我目前正在使用ReactJS.NET和webpack使用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"
    }
};

截至评论时，我现在收到以下错误消息：

元素类型无效：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object。

谷歌搜索引导我this SO-article。所以它似乎与出口的完成方式有关，但我不明白这一点。

当编写export = CommentBox;作为它在服务器端构建和渲染的最后一个语句时，却给出了以下ReSharper错误：

定位ECMAScript 6或更高版本时，无法使用导出分配。

使用ES6时，服务器端呈现失败

0 个答案: