1

I'm currently playing around with ReactJS.NET using webpack and TypeScript. I've found some code I wanted to try out. There was this one call to Object.assign.

As the TS-compiler was complaining I switched to es6 inside the tsconfig.json file.

But since then I always get the following error when trying to render the component on server-side:

Script threw an exception: Minified React error #130;

and I have no idea what is causing the error. It also states to use the non-minified dev environment. But I also have no idea how to do this.

When I use ReactDOM.render(<CommentBox />, document.getElementById('target')) it's working normally.

This is my (simplified) CommenBox.tsx file

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>);}
}

Here is the tsconfig.json:

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

and finally my 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"
    }
};

As of the comments I now get the following error-message:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Googling leads me to this SO-article. So it seems to be related to how exports are done but I don't get the point.

When writing export = CommentBox; as the last statement it builds and renders on server-side but gives me the following ReSharper-error:

Export assignment cannot be used when targeting ECMAScript 6 or higher.

Community
  • 1
  • 1
KingKerosin
  • 3,639
  • 4
  • 38
  • 77

0 Answers0