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.