React.Exceptions.ReactScriptLoadException (Webpack for 3rd party libs) #827
Description
I am trying to use third-party libraries in my ASP.NET MVC 4 project with ReactJS.NET SSR and Webpack.
I went through the docs (SSR, Webpack) and that useful article in order to use Webpack with ReactJS.NET's server-side rendering.
I also looked at the Github code for inspiration.
I made progress but I'm currently stuck when I launch Visual Studio (MyReactTest.cshtml) with the error :
React.Exceptions.ReactScriptLoadException: 'Error while loading "~/Scripts/bundle.js": ReferenceError: document is not defined'
(screenshot)
I tried with both serverOnly: true and clientOnly: true (and neither of them) but in the end, my Html.React never shows up.
First off, I'm a little confused : do I really need a client.js file and if so, what is supposed to be in it ?
Because it's not very clear on the Webpack doc.
client.js is mentioned (it has an entry point in webpack.config.js) but we don't see an example of its content. Is it needed even for SSR ?
Right now I have webpack.config.js (without a client.js because I don't know what to do with it)
"use strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
entry: {
server: './Scripts/server.js',
//client: './Content/client.js',
},
output: {
path: path.resolve(__dirname, "./Scripts"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
.babel.rc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [ "@babel/plugin-proposal-class-properties" ]
}
server.js (note that I import react-select that I got out of a couple npm install commands into the node_modules folder)
Some lines are probably missing, some others useless...
// All JavaScript in here will be loaded server-side
// Expose components globally so ReactJS.NET can use them
import Components from './Components';
import Select from 'react-select';
//import { Header } from './Header.jsx';
import { MenuBlog } from './Components/MenuBlog.jsx';
import { MenuBuy } from './Components/MenuBuy.jsx';
import { MenuRent } from './Components/MenuRent.jsx';
import { Navigation } from './Components/Navigation.jsx';
//import { SearchEngine } from './Components/SearchEngine.jsx';
import { UrlAction } from './Components/UrlAction.jsx';
import { App } from './Components/Test.jsx';
global.Select = Select;
global.Navigation = { Navigation };
global.Test = { App };
global.Components = Components;
My bundle.js file gets successfully generated thanks to the extension NPM Task Runner suggested by the article above.
I created a very simple React component Test.jsx
import React from 'react';
import { render } from 'react-dom';
class Test extends React.Component {
constructor(props) {
super(props);
this.state = { data: this.props.initialData };
}
render() {
return (
<>
<h1>React in ASP.NET MVC!</h1>
<div>Hello React World</div>
</>
);
}
}
Then I try to call that component in page MyReactTest.cshtml like so
@{
Layout = null;
}
@using React.Web.Mvc
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MyReactTest</title>
</head>
<body>
This is a React test below
<div id="app">
@Html.React("Test", new { initialComments = "" })
</div>
<script src="~/Scripts/bundle.js"></script>
</body>
</html>
I don't know if I really need to add line
<script src="~/Scripts/bundle.js"></script>
Because in the middle of ReactConfig.cs, I have
ReactSiteConfiguration.Configuration
.AddScript("~/Scripts/Components/Navigation.jsx")
.AddScript("~/Scripts/Components/MenuBlog.jsx")
.AddScript("~/Scripts/Components/UrlAction.jsx")
.AddScript("~/Scripts/Components/MenuBuy.jsx")
.AddScript("~/Scripts/Components/MenuRent.jsx")
.AddScript("~/Scripts/bundle.js");
with a similar include (AddScript("~/Scripts/bundle.js")) #confused
Anyway this is where I am at and where I get the error mentioned at the beginning.
I'm trying to stitch all these files together and I could use some help, thank you all :)