CODEWITHSUNDEEP
asp.net-mvcreactjswebpack
user1641172
user1641172

Reputation:

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

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?

Upvotes: 2

Views: 1009

Answers (1)

Sergey Fadeev
Sergey Fadeev

Reputation: 333

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

Upvotes: 2

Related Questions