ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file (MVC/Webpack)

[oudoulj]

That's a popular error already mentioned in other issues but I couldn't find a solution after reading them, maybe because I'm on a MVC project and not a Core project.

My environment : ASP.NET MVC 4 with latest ReactJS.NET packages (5.0.0 alpha 7) using Webpack.

React.Exceptions.ReactNotInitialisedException: 'ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file.'

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.

The thing is I do NOT have a Startup.cs file (MVC project with no OWIN) but the error message might actually be related to Babel, not React itself.
It's a little confusing but some other people mentioned this on StackOverflow for instance (without giving a proper fix though)

I noticed neither my breakpoint in Global.asax.cs (in Application_Start()) nor the one in ReactConfig.cs (in Configure()) are hit before the error on the cshtml view here :
@Html.React("RootComponent", new { initialComments = "", page = "" })

ReactConfig.cs

using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.V8;
using React;

[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(AVAL.FO.Web.UI.ReactConfig), "Configure")]

namespace AVAL.FO.Web.UI
{
	public static class ReactConfig
	{
		public static void Configure()
		{
			ReactSiteConfiguration.Configuration
				.SetReuseJavaScriptEngines(true)
					.SetLoadBabel(true)
					.SetLoadReact(false)
					.SetBabelVersion(BabelVersions.Babel7)
					.AddScriptWithoutTransform("~/Scripts/dist/components.js");

			JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
			JsEngineSwitcher.Current.EngineFactories.AddV8();
		}
	}
}

webpack.config.js

const path = require('path');
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
	entry: {
		components: './Scripts/expose-components.js',
	},
	output: {
		filename: '[name].js',
		globalObject: 'this',
		path: path.resolve(__dirname, 'Scripts/dist'),
		publicPath: 'dist/'
	},
	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
	optimization: {
		runtimeChunk: {
			name: 'runtime', // necessary when using multiple entrypoints on the same page
		},
		splitChunks: {
			cacheGroups: {
				commons: {
					test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
					name: 'vendor',
					chunks: 'all',
				},
			},
		},
	},
	module: {
		rules: [
			{
				test: /\.jsx$/,
				exclude: /node_modules/,
				loader: 'babel-loader',
			}
		]
	},
	devtool: "inline-source-map",
	plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};

expose-components.js

// All JavaScript in here will be loaded server-side
// Expose components globally so ReactJS.NET can use them
import React from "react";
import ReactDOM from "react-dom";
import ReactDOMServer from "react-dom/server";

import RootComponent from './Components/Test.jsx';

// Needed when we want to bundle React ourselves, also make sure to use SetLoadReact(false) in the ReactConfig.cs file
global.React = React;
global.ReactDOM = ReactDOM;
global.ReactDOMServer = ReactDOMServer;

// Components to expose
global.RootComponent = RootComponent;

Index.cshtml

@using React.RenderFunctions
@using React.Web.Mvc

@{
	Layout = "_Layout";
}
@Html.React("RootComponent", new { initialComments = "", page = "" })

<script src="/Scripts/dist/components.js"></script>
@Html.ReactInitJavaScript()

Global.asax.cs (excerpt) (note : I don't have a Startup.cs file in my solution since I'm not in a .NET Core project)

protected void Application_Start(object sender, EventArgs e)
{
			ReactConfig.Configure(); //not sure that line is useful though - same error if I remove it
			...
}

Please let me know if you need more info regarding my setup, thank you.

[dustinsoftware]

Try loading the script in node, and checking that React is on the global scope. ‘Node —require ./dist/components.js’ Then evaluate ‘React.Component’ and make sure it is not undefined. I suspect something is incorrect in the Babel config... such as missing @babel/preset-env.

…

On Wed, Jun 12, 2019 at 12:50, Jérôme OUDOUL ***@***.***> wrote: That's a popular error already mentioned in other issues but I couldn't find a solution after reading them so here I am. *React.Exceptions.ReactNotInitialisedException: 'ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file.'* *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.* *My environment* : ASP.NET MVC 4 with latest ReactJS.NET packages (5.0.0 alpha 7) using Webpack. [image: badinit] <https://camo.githubusercontent.com/8d77480743ce9f0ab1dc0ae73286b5aa8f6591e7/68747470733a2f2f692e6962622e636f2f6e6a6e596777772f626164696e69742e706e67253232> *ReactConfig.cs* using JavaScriptEngineSwitcher.Core; using JavaScriptEngineSwitcher.V8; using React; [assembly: WebActivatorEx.PreApplicationStartMethod(typeof(AVAL.FO.Web.UI.ReactConfig), "Configure")] namespace AVAL.FO.Web.UI { public static class ReactConfig { public static void Configure() { ReactSiteConfiguration.Configuration .SetReuseJavaScriptEngines(true) .SetLoadBabel(true) .SetLoadReact(false) .SetBabelVersion(BabelVersions.Babel7) .AddScriptWithoutTransform("~/Scripts/dist/components.js"); JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName; JsEngineSwitcher.Current.EngineFactories.AddV8(); } } } *webpack.config.js* const path = require('path'); var WebpackNotifierPlugin = require("webpack-notifier"); var BrowserSyncPlugin = require("browser-sync-webpack-plugin"); module.exports = { entry: { components: './Scripts/expose-components.js', }, output: { filename: '[name].js', globalObject: 'this', path: path.resolve(__dirname, 'Scripts/dist'), publicPath: 'dist/' }, mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', optimization: { runtimeChunk: { name: 'runtime', // necessary when using multiple entrypoints on the same page }, splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/, name: 'vendor', chunks: 'all', }, }, }, }, module: { rules: [ { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader', } ] }, devtool: "inline-source-map", plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()] }; *expose-components.js* // All JavaScript in here will be loaded server-side // Expose components globally so ReactJS.NET can use them import React from "react"; import ReactDOM from "react-dom"; import ReactDOMServer from "react-dom/server"; import RootComponent from './Components/Test.jsx'; // Needed when we want to bundle React ourselves, also make sure to use SetLoadReact(false) in the ReactConfig.cs file global.React = React; global.ReactDOM = ReactDOM; global.ReactDOMServer = ReactDOMServer; // Components to expose global.RootComponent = RootComponent; *Index.cshtml* @using React.RenderFunctions @using React.Web.Mvc @{ Layout = "_Layout"; } @Html.React("RootComponent", new { initialComments = "", page = "" }) <script src="/Scripts/dist/components.js"></script> @Html.ReactInitJavaScript() *Global.asax.cs* (excerpt) (note : I don't have a Startup.cs file in my solution) protected void Application_Start(object sender, EventArgs e) { ReactConfig.Configure(); ... } Please let me know if you need more info regarding my setup, thank you. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#835?email_source=notifications&email_token=AAHGCFRAPYEZOM53SR2TOALP2ESNXA5CNFSM4HXLHDA2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GZDUSBQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHGCFTIWJMIEG2NPQANRKDP2ESNXANCNFSM4HXLHDAQ> .

[oudoulj]

Thank you Dustin.
While I'm trying to decipher your suggestions above 😉 , let me share with you a basic ASP.NET MVC 5 project I started from scratch in Visual Studio 2017 in order to try isolate my problem (which is still happening).
https://github.com/oudoulj/ReactJSNETMVC

[oudoulj]

Try loading the script in node, and checking that React is on the global scope. ‘Node —require ./dist/components.js’ Then evaluate ‘React.Component’ and make sure it is not undefined. I suspect something is incorrect in the Babel config... such as missing @babel/preset-env.

I opened a Nodejs command prompt, cd'ed to the root of my project
C:\Users\jerome.oudoul\Source\Repos\ReactJSNETMVC\ReactJSNETMVC\ReactJSNETMVC>
and typed :
node --require ./Scripts/dist/components.js
I just got an empty ">" prompt (what they call the REPL ?) then typed :
> global
Got a big chunk of key/values with no React keyword in there.
Then tried those :

> React
Thrown:
ReferenceError: React is not defined
> React.Component
Thrown:
ReferenceError: React is not defined

How do you evaluate ‘React.Component’ like you say ? 🙄

For the record, here is my current .babelrc
https://github.com/oudoulj/ReactJSNETMVC/blob/master/ReactJSNETMVC/ReactJSNETMVC/.babelrc

{
	"presets": [ "@babel/preset-env", "@babel/preset-react" ],
	"plugins": [ "@babel/plugin-proposal-class-properties" ]
}

And I ran those lines along the creation of the project :

npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-proposal-object-rest-spread
npm install --save-dev @babel/plugin-syntax-dynamic-import
npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader browser-sync browser-sync-webpack-plugin webpack webpack-cli webpack-notifier
npm install react react-dom

[dustinsoftware]

I just noticed that you are using splitChunks, which will generate a runtime and vendor chunk which must both be included by AddScriptWithoutTransform. The sample has the correct settings here. I just noticed an unrelated bug: SetLoadBabel should also be disabled since webpack is doing the babel transformation, but I don't think that is the root of your problem here. :)

For debugging: I also did not realize that using globalObject: this does not work with Node, so you have to load the bundles up in a browser to debug it. If you'd like, try creating a test.html static page in the wwwroot folder with the following:

<html>
	<head>
		<meta charset="UTF-8" />
	</head>
	<body>
		<script src="/dist/runtime.js"></script>
		<script src="/dist/vendor.js"></script>
		<script src="/dist/components.js"></script>

		<div class="React"></div>
		<div class="ReactDOM"></div>
		<div class="ReactDOMServer"></div>

		<script type="text/javascript">
			function checkGlobal(name) {
				let div = document.createElement('div');
				div.innerText = `${name}: ${typeof window[name]}`;
				document.body.appendChild(div);
			}

			checkGlobal('React');
			checkGlobal('ReactDOM');
			checkGlobal('ReactDOMServer');
		</script>
	</body>
</html>

If all the globals are exposed properly you should see:

[oudoulj]

Here is my update : I applied your suggestions (it's all committed).

• Added both runtime and vendor to the solution and ReactConfig.cs (I didn't know they were mandatory)
• I'm going back and forth with SetLoadBabel but trying to keep it to true since yours is set to true
• I moved my jsx component (Test.jsx) next to my expose-components because I was getting errors on the generated path. It's also part of matching your architecture for easier comparison.
  When I launch the site, I now get :
  Could not find a component named 'Test'. Did you forget to add it to App_Start\ReactConfig.cs?

But I know that would be wrong if I added .Add("~/Scripts/Test.jsx") to my ReactConfig.cs so I'm facing a dilemma here 😕

• I created a static html page at the root (I don't have a wwwroot folder, not a .NET Core project)
  Unfortunately I get 3 undefined 😢 (hence the error above maybe ?...)
  http://localhost:55358/test.html
  React: undefined
  ReactDOM: undefined
  ReactDOMServer: undefined
  

Looking forward to your eagle eye to spot the next missing piece of my puzzle 😉
Gonna keep trying out things in the mean time.
Thanks again.

[oudoulj]

I was able to fix my sample project 😄
I was simply missing the default keyword in my Test.jsx component !

export default function Test() {
	return (
		<h1>That line is inside the React test component (Test.jsx)</h1>
	);
}

I have committed this here :
oudoulj/ReactJSNETMVC@1edbc5c

[m1is]

I just noticed that you are using splitChunks, which will generate a runtime and vendor chunk which must both be included by AddScriptWithoutTransform. The sample has the correct settings here. I just noticed an unrelated bug: SetLoadBabel should also be disabled since webpack is doing the babel transformation, but I don't think that is the root of your problem here. :)

For debugging: I also did not realize that using globalObject: this does not work with Node, so you have to load the bundles up in a browser to debug it. If you'd like, try creating a test.html static page in the wwwroot folder with the following:

<html>
	<head>
		<meta charset="UTF-8" />
	</head>
	<body>
		<script src="/dist/runtime.js"></script>
		<script src="/dist/vendor.js"></script>
		<script src="/dist/components.js"></script>

		<div class="React"></div>
		<div class="ReactDOM"></div>
		<div class="ReactDOMServer"></div>

		<script type="text/javascript">
			function checkGlobal(name) {
				let div = document.createElement('div');
				div.innerText = `${name}: ${typeof window[name]}`;
				document.body.appendChild(div);
			}

			checkGlobal('React');
			checkGlobal('ReactDOM');
			checkGlobal('ReactDOMServer');
		</script>
	</body>
</html>

If all the globals are exposed properly you should see:

I tried the test page with a brand new project using the reactnet-webpack template and I get undefined for all of them right out of the box.