React.NET, Webpack - 'ReactDOM' is undefined (client side)

Question

Following the tutorial here, I have managed to get webpack doing my bundling for me, and it is working for pre-rendering on the server side, e.g.:

@Html.React("Components.myComponent",
             New With {
                 .initialData = Nothing
             })

@Html.ReactInitJavaScript()

This is correctly displaying my component in the browser, but as soon as the client takes over I get the error 'ReactDOM' is undefined

I have installed the react-dom using npm install react-dom --save-dev
I have tried to require the ReactDOM, first in the .jsx file containing my component, then in the client.js file that webpack is building from:

//myComponent.jsx
var React = require('react');
var ReactDOM = require('react-dom');

or

//client.js
var ReactDOM = require('react-dom');
var Components = require('expose?Components!./src');

But I am still getting the same error.

If I add the react and react-dom scripts directly above my webpack compiled client javascript, then the problem goes away:

//index.html
<script src="https://www.facebook.com/react-0.14.0.min.js"></script>
<script src="https://www.facebook.com//react-dom-0.14.0.min.js"></script>
<script src="~/Scripts/webpack/build/client.bundle.js"></script>

So how can I get webpack to properly include these scripts in the client bundle?

EDIT

I did have the following externals in my webpack.config.js, but removing them doesn't seem to make any difference.

externals: {
    // Use external version of React (from CDN for client-side, or
    // bundled with ReactJS.NET for server-side)
    react: 'React'
}

I guess, externals are there so you can use CDN based scripts, so maybe I am overthinking this one and should just leave the CDN based react scripts in my view?

Sergey Fadeev · Accepted Answer · 2016-03-28 21:34:44Z

2

You should expose react-dom globally in your client.js, so it will be available in browser in ReactDOM variable to render client-side:

require("expose?ReactDOM!react-dom");

answered Mar 28, 2016 at 21:34

Sergey Fadeev

3331 gold badge4 silver badges11 bronze badges

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

4 Comments

user1641172 Over a year ago

Yep, that's it! i had worked around it but that makes lots of sense now, thanks :)

Luke Over a year ago

Isn't that essentially what line @Html.ReactInitJavaScript() is supposed to do?

Sergey Fadeev Over a year ago

@Html.ReactInitJavaScript() does not expose react-dom on client side, it is server side method to render script like <script>ReactDOM.render(...)</script> (according to documentation from reactjs.net/features/server-side-rendering.html)

Luke Over a year ago

Ahh that makes sense. Thanks for confirming

Collectives™ on Stack Overflow

React.NET, Webpack - 'ReactDOM' is undefined (client side)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related