XMLHttpRequest is not defined

[jezmaghuyop]

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

[Daniel15]

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.

[dustinsoftware]

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 ***@***.***> 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 <#792 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHGCFVFMCJBWMRC4VOW3S3PTHABTANCNFSM4HJUPZ2A> .

[dustinsoftware]

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 ***@***.***> 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 > <#792 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AAHGCFVFMCJBWMRC4VOW3S3PTHABTANCNFSM4HJUPZ2A> > . >

[jezmaghuyop]

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()
}

[jezmaghuyop]

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()
}

[dustinsoftware]

Try using componentDidMount instead of will mount

…

On Thu, May 2, 2019 at 01:58, Jez Reel R Maghuyop ***@***.***> wrote: *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() } — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#792 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHGCFUK4SPP2V2EX2Z6ZNLPTKULTANCNFSM4HJUPZ2A> .

[jezmaghuyop]

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...

<script>ReactDOM.hydrate(React.createElement(ProductList, {}), document.getElementById("react_0HLMFFCSFL99Q"));

[dustinsoftware]

Sounds like a script tag is missing. Check out the samples for more details.

…

On Thu, May 2, 2019 at 21:00, Jez Reel R Maghuyop ***@***.***> wrote: 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... <script>ReactDOM.hydrate(React.createElement(ProductList, {}), document.getElementById("react_0HLMFFCSFL99Q")); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#792 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHGCFUHO46WPG4B7JCJGJ3PTO2E5ANCNFSM4HJUPZ2A> .