Server-side rendering of component fails using 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"]));

Igor P. · Accepted Answer · 2017-02-17 11:45:05Z

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

answered Feb 17, 2017 at 11:45

Igor P.

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Ematipico · Accepted Answer · 2017-03-05 11:37:48Z

1

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

answered Mar 5, 2017 at 11:37

Ematipico

1,2441 gold badge10 silver badges14 bronze badges

Comments

Daniel Lo Nigro · Accepted Answer · 2017-02-14 06:05:51Z

0

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

answered Feb 14, 2017 at 6:05

Daniel Lo Nigro

3,43430 silver badges30 bronze badges

Comments

nebffa · Accepted Answer · 2017-04-28 13:29:07Z

0

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

answered Apr 28, 2017 at 13:29

nebffa

1,5591 gold badge16 silver badges27 bronze badges

Comments

Jérôme Oudoul · Accepted Answer · 2019-06-17 11:47:18Z

0

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

answered Jun 17, 2019 at 11:47

Jérôme Oudoul

3791 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Server-side rendering of component fails using ReactJS.NET

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related