Closed jezmaghuyop closed 5 years ago
XMLHttpRequest is a browser-specific API, not a standard JavaScript API. You can't use it on the server side. Perhaps we could implement some server side network methods, but we don't do that today.
JsEngineSwitcher exposes some APIs to invoke managed .NET code from JavaScript but we don’t expose any of that through this library. You might be able to write your own by implementing IRenderFunctions.
On Wed, May 1, 2019 at 10:26, Daniel Lo Nigro notifications@github.com wrote:
XMLHttpRequest is a browser-specific API, not a standard JavaScript API. You can't use it on the server side. Perhaps we could implement some server side IO methods, but we don't do that today.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/reactjs/React.NET/issues/792#issuecomment-488332260, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHGCFVFMCJBWMRC4VOW3S3PTHABTANCNFSM4HJUPZ2A .
Oh, if you aren’t trying to do any server side fetch, you may just be running into an error where that variable isn’t declared, so you are getting a syntax error. Try something like:
let request = typeof XMLHttpRequest !== undefined ? new XMLHttpRequest() : null;
On Wed, May 1, 2019 at 18:46, Dustin Masters dustin@dustinsoftware.com wrote:
JsEngineSwitcher exposes some APIs to invoke managed .NET code from JavaScript but we don’t expose any of that through this library. You might be able to write your own by implementing IRenderFunctions.
On Wed, May 1, 2019 at 10:26, Daniel Lo Nigro notifications@github.com wrote:
XMLHttpRequest is a browser-specific API, not a standard JavaScript API. You can't use it on the server side. Perhaps we could implement some server side IO methods, but we don't do that today.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/reactjs/React.NET/issues/792#issuecomment-488332260, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHGCFVFMCJBWMRC4VOW3S3PTHABTANCNFSM4HJUPZ2A .
this is what my component looks like
class ProductList extends React.Component {
render() {
return (
<ProductCategorySideMenu />
);
}
}
class ProductCategorySideMenu extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
persons: [],
data: []
};
}
componentWillMount() {
this.getCategories();
}
getCategories() {
const xhr = new XMLHttpRequest();
xhr.open('get', '/api/productCategory', true);
xhr.onload = () => {
var response = JSON.parse(xhr.responseText);
this.setState({ isLoaded: true, data: response });
};
xhr.send();
}
render() {
return (
<ul className="list-unstyled">
<li className="heading">Category</li>
{this.state.data.map((category, index) => <li key={index}><a href={'?category=' + category.Category}>{category.Category}</a></li>)}
</ul>
);
}
}
My ReactConfig
public static class ReactConfig
{
public static void Configure()
{
ReactSiteConfiguration.Configuration
.SetReuseJavaScriptEngines(true)
.SetAllowJavaScriptPrecompilation(true)
.AddScript("~/Scripts/components/products/product-list.jsx")
.AddScript("~/Scripts/components/products/product-list-filter.jsx")
.AddScript("~/Scripts/components/products/product-list-info.jsx")
.AddScript("~/Scripts/components/products/product-category-side-menu.jsx");
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
}
}
My BundleConfig
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.UseCdn = true; //enable CDN support
//add link the CDN
var jquerySlimCdnPath = "https://code.jquery.com/jquery-3.2.1.slim.min.js";
var popperCdnPath = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js";
var bootstrapCdnPath = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery",
jquerySlimCdnPath).Include(
"~/Scripts/library/jquery/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/popper",
popperCdnPath).Include(
"~/Scripts/library/popper/popper.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap",
bootstrapCdnPath).Include(
"~/Scripts/library/bootstrap/bootstrap.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/library/modernizr/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/main").Include(
"~/Scripts/main.js"));
bundles.Add(new ScriptBundle("~/bundles/react").Include(
"~/Scripts/library/react/react.js",
"~/Scripts/library/react/react-dom.js"));
bundles.Add(new BabelBundle("~/bundles/productPage").Include(
// Add your JSX files here
"~/Scripts/components/products/*.jsx"
));
// Force minification/combination even in debug mode
BundleTable.EnableOptimizations = true;
}
}
My Index.cshtml
@using React.Web.Mvc
@using System.Web.Optimization;
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "MasterPage.cshtml";
}
@Html.React("ProductList", new { })
@section footerScript{
@Scripts.Render("~/bundles/productPage")
@Html.ReactInitJavaScript()
}
Update
If I setup the component liked this it works
class ProductList extends React.Component {
render() {
return (
<ProductCategorySideMenu />
);
}
}
ReactDOM.render(<ProductList />, document.getElementById('prodlist-content'));
My Index.cshtml
@using React.Web.Mvc
@using System.Web.Optimization;
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "MasterPage.cshtml";
}
<div id="prodlist-content"></div>
@section footerScript{
@Scripts.Render("~/bundles/productPage")
@Html.ReactInitJavaScript()
}
Try using componentDidMount instead of will mount
On Thu, May 2, 2019 at 01:58, Jez Reel R Maghuyop notifications@github.com wrote:
Update
If I setup the component liked this it works
class ProductList extends React.Component {
render() { return ( <ProductCategorySideMenu /> ); }
}
ReactDOM.render(
, document.getElementById('prodlist-content')); My Index.cshtml
@using React.Web.Mvc @using System.Web.Optimization; @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = "MasterPage.cshtml"; }
@section footerScript{ @Scripts.Render("~/bundles/productPage") @Html.ReactInitJavaScript() }
— You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/reactjs/React.NET/issues/792#issuecomment-488597805, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHGCFUK4SPP2V2EX2Z6ZNLPTKULTANCNFSM4HJUPZ2A .
the YSOD was gone and page now loads with componentDidMount, but in the console I got
Uncaught TypeError: ReactDOM.hydrate is not a function at (index):328
This is the highlighted error at index line 328...
Githubissues.
Hi, I'm trying to do a HTTP Call and tried fetch api did not work so I followed the documentation which uses XMLHttpRequest which also did not work. not sure what I need to do.
ReferenceError: XMLHttpRequest is not defined Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: Microsoft.ClearScript.ScriptEngineException: ReferenceError: XMLHttpRequest is not defined