使用ReactJS.NET的服务器端组件渲染失败

Question

I'm currently trying to get some ReactJS-stuff (from different tutorials) to be rendered on server-side using 'ReactJS.NET'.

However, I always get the following message:

Could not find a component named 'CommentBox'. Did you forget to add it to App_Start\\ReactConfig.cs?

Looking at the code here it seems to be pretty straight-forward.

My ReactConfig.cs:

public static class ReactConfig
{
    public static void Configure()
    {
        ReactSiteConfiguration.Configuration
            .AddScript("~/Scripts/dist/CommentBox.js");
    }
}

I can't see the point what I am doing wrong here as I thought I simply need to add the (via webpack) generated CommentBox.js to the config and done.

In my View I simply try calling @Html.React("CommentBox",new {}) at which point the exception is thrown.

This is the code which can be found in the generated javascript-file:

var CommentBox = (function (_super) {
    __extends(CommentBox, _super);
    function CommentBox() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CommentBox.prototype.render = function () {
        return __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("div", { className: "commentBox" },
            __WEBPACK_IMPORTED_MODULE_0_react__["createElement"]("h1", null, "Comment-Box"),
            __WEBPACK_IMPORTED_MODULE_0_react__["createElement"](CommentForm, null),
            __WEBPACK_IMPORTED_MODULE_0_react__["createElement"](CommentList, null));
    };
    return CommentBox;
}(__WEBPACK_IMPORTED_MODULE_0_react__["Component"]));

Answer 1

I think you can try calling it @Html.React("Components.CommentBox",new {}). As exposer work this way, i think. I am trying same things now and get this error too. This helps me, but more errors further :)

Answer 2

I am using Webpack 2.2.1 and I tackle the problem in this way. First of all expose the my component(s) inside an object and I end doing this

expose const CommentBox;

After that, inside webapck configuration file, I have something like this

{
   entry: '/path/to/CommentBox.js',
   output: {
      library: ['MyComponents'],
      libraryTarget: 'this'
   }
}

In this way, webpack will expose on the global object (you are running V8, so node env), the object MyComponents.CommentBox

Answer 3

If you're using Webpack with ReactJS.NET, you need to expose the components publicly so ReactJS.NET can access them. See the guide here: https://reactjs.net/guides/webpack.html

Answer 4

I found that I needed to reference the full namespace path to the component. For example, in my case the component name was ResourceAttributesComponent in the Portal.Scheduling namespace, so I had to write @Html.React("Portal.Scheduling.ResourceAttributesComponent", new {})

Answer 5

就我而言，我在组件中缺少默认关键字：导出默认函数Test（）{...} https://github.com/reactjs/React.NET/issues/835#issuecomment-502616611