Skip to content

Globally exposed webpack variables not found when upgrading to React.net 4.x and migrating from expose-loader #747

@meisterpeeps

Description

@meisterpeeps

I am in the process of updating our webpack, babel, and react.net packages. We are using .netMVC. When using react.net 3.x and webpack 3 everything has been working fine. However, since trying to upgrade (react.net 4.1 and webpack 4.29, babel 7.2.2, and babel-loader 8.05) I've run into a problem with React.net finding my components to server side render. If I turn off server side rendering, then there is no problem.
When I have ReactSiteConfiguration.Configuration.SetLoadReact(false) I get this error:

[ReactNotInitialisedException: React has not been loaded correctly: missing (React, ReactDOM, ReactDOMServer).Please expose your version of React as global variables named 'React', 'ReactDOM', and 'ReactDOMServer', or enable the 'LoadReact'configuration option to use the built-in version of React.]

However, I have globally assigned the React variables in the file that I am loading in my ReactConfig.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import RootComponent from 'components/demo/';
global.React = React;
global.ReactDOM = ReactDOM;
global.ReactDOMServer = ReactDOMServer;
global.DesktopAndMobileDemo = RootComponent;

My RootComponent:

import React, {Component } from 'react';

export default class Demo extends Component {
    render() {
        return (
        <div>Hello</div>
        );
    }
}

The @HTML.React :

@Html.React("DesktopAndMobileDemo", new { })

Some of the bundled javascript that is loaded in the React.config, which looks like it is being assigned to global.

"use strict";
__webpack_require__.r(__webpack_exports__);
/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "../node_modules/react-dom/index.js");
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var react_dom_server__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom/server */ "../node_modules/react-dom/server.browser.js");
/* harmony import */ var react_dom_server__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom_server__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var components_demo___WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! components/demo/ */ "../src/components/demo/index.js");


global.React = react__WEBPACK_IMPORTED_MODULE_0___default.a;
global.ReactDOM = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a;
global.ReactDOMServer = react_dom_server__WEBPACK_IMPORTED_MODULE_2___default.a;global.DesktopAndMobileDemo = components_demo___WEBPACK_IMPORTED_MODULE_3__["default"];

If I have Reactjs.net load the react, I still get this error:

[ReactInvalidComponentException: Could not find a component named 'DesktopAndMobileDemo'. Did you forget to add it to App_Start\ReactConfig.cs?]
React.ReactComponent.EnsureComponentExists() +203

How does react.net know to look on the 'global' object for the components or react itself? Before upgrading, I was using the expose-loader so the components would be available to reactjs.net. Is there any difference in how to expose components globally for .net and .netcore? I couldn't find an example for .net that was equivalent with the .netcore version that exposes components using the 'global' variable. Oh, btw, I'm also using V8 as my javascript engine. Does the engine affect how we can expose components?

Thanks for any feedback.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions