CODEWITHSUNDEEP
c#asp.net-mvcreactjsasp.net-mvc-5reactjs.net
KingKerosin
KingKerosin

Reputation: 3841

Server-side rendering of component fails using ReactJS.NET

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"]));

Upvotes: 1

Views: 3171

Answers (5)

Jérôme Oudoul
Jérôme Oudoul

Reputation: 379

In my case, I was missing the default keyword in my component : export default function Test() {...} https://github.com/reactjs/React.NET/issues/835#issuecomment-502616611

Upvotes: 0

nebffa
nebffa

Reputation: 1549

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

Upvotes: 0

Ematipico
Ematipico

Reputation: 1244

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

Upvotes: 1

Igor P.
Igor P.

Reputation: 11

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 :)

Upvotes: 1

Daniel Lo Nigro
Daniel Lo Nigro

Reputation: 3424

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

Upvotes: 0

Related Questions