document not defined error

[mikeroosa]

This is most likely something I'm doing wrong but I can't figure it out. I've followed the tutorial on the reactjs.net site and all is working great until I try the server side rendering.

Here is the error and stack trace.

Error while loading "~/Scripts/Tutorial.jsx": ReferenceError: document is not defined
at Script Document [7]:111:5 -> document.getElementById('content')
Line: 111
Column:5

at React.ReactEnvironment.EnsureUserScriptsLoaded()
at React.ReactEnvironment.CreateComponent[T](String componentName, T props, String containerId)
at React.Web.Mvc.HtmlHelperExtensions.React[T](HtmlHelper htmlHelper, String componentName, T props, String htmlTag, String containerId)
at ASP._Page_Views_Home_Index_cshtml.Execute() in c:\Code\ReactDemo\ReactDemo\Views\Home\Index.cshtml:line 13
at System.Web.WebPages.WebPageBase.ExecutePageHierarchy()
at System.Web.Mvc.WebViewPage.ExecutePageHierarchy()
at System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage)
at System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance)
at System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer)
at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context)
at System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult)
at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.b__17()
at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation)

[Daniel15]

Remove the React.render call from Tutorial.jsx. Server-side rendering handles calling React.render for you.

[mikeroosa]

Yep, that did it. Thank you.

[ProgrammedMikey]

been trying to fix this all day, should have mentioned it in the tutorial

[azharuddinsayed]

React.Exceptions.ReactScriptLoadException: Error while loading "~/dist/components.js": ReferenceError: 'document' is not defined
---> JavaScriptEngineSwitcher.Core.JsRuntimeException: ReferenceError: 'document' is not defined

Engine name: ChakraCoreJsEngine
Engine version: 1.11.14
Category: Runtime error
Description: 'document' is not defined
Type: ReferenceError
Document name: eval code
Line number: 107
Column number: 3
Source fragment: var style = document.createElement('style'); ---> JavaScriptEngineSwitcher.ChakraCore.JsRt.JsScriptException: Script threw an exception.
at JavaScriptEngineSwitcher.ChakraCore.JsRt.JsErrorHelpers.ThrowIfError(JsErrorCode errorCode)
at JavaScriptEngineSwitcher.ChakraCore.JsRt.JsContext.RunScript(String script, JsSourceContext sourceContext, String sourceUrl, JsParseScriptAttributes& parseAttributes)
at JavaScriptEngineSwitcher.ChakraCore.ChakraCoreJsEngine.<>c__DisplayClass25_0.b__0()
at JavaScriptEngineSwitcher.ChakraCore.ChakraCoreJsEngine.<>c__DisplayClass25_0.b__0()
at JavaScriptEngineSwitcher.ChakraCore.ScriptDispatcher.ScriptTaskWithoutResult.Run()
--- End of stack trace from previous location where exception was thrown ---
at JavaScriptEngineSwitcher.ChakraCore.ScriptDispatcher.Invoke(Action action)
at JavaScriptEngineSwitcher.ChakraCore.ChakraCoreJsEngine.InnerExecute(String code, String documentName)
at JavaScriptEngineSwitcher.Core.JsEngineBase.Execute(String code, String documentName)
at React.JavaScriptEngineFactory.LoadUserScripts(IJsEngine engine)

--- End of inner exception stack trace ---
at React.JavaScriptEngineFactory.EnsureValidState()
at React.JavaScriptEngineFactory.GetEngine()
at React.ReactEnvironment.<.ctor>b__16_1()
at System.Lazy1.ViaFactory(LazyThreadSafetyMode mode) at System.Lazy1.ExecutionAndPublication(LazyHelper executionAndPublication, Boolean useDefaultConstructor)
at System.Lazy1.CreateValue() at System.Lazy1.get_Value()
at React.ReactEnvironment.get_Engine()
at React.ReactEnvironment.EnsureUserScriptsLoaded()
at React.ReactEnvironment.CreateComponent[T](String componentName, T props, String containerId, Boolean clientOnly, Boolean serverOnly)
at React.AspNet.HtmlHelperExtensions.React[T](IHtmlHelper htmlHelper, String componentName, T props, String htmlTag, String containerId, Boolean clientOnly, Boolean serverOnly, String containerClass, Action3 exceptionHandler, IRenderFunctions renderFunctions) at AspNetCore.Views_Home_Index.<ExecuteAsync>b__8_1() in C:\Users\Developer\source\repos\PerkContainer\Views\Home\Index.cshtml:line 19 at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.SetOutputContentAsync() at AspNetCore.Views_Home_Index.ExecuteAsync() in C:\Users\Developer\source\repos\PerkContainer\Views\Home\Index.cshtml:line 6 at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context) at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts) at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context) at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable1 statusCode)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData, String contentType, Nullable`1 statusCode)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result)
at Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.g__Awaited|29_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
--- End of stack trace from previous location where exception was thrown ---
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
--- End of stack trace from previous location where exception was thrown ---
at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.g__Logged|17_1(ResourceInvoker invoker)
at Microsoft.AspNetCore.Routing.EndpointMiddleware.g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
at React.AspNet.BabelFileMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

[Daniel15]

@azharuddinsayed Server-side JS doesn't have a document object, as that's part of the DOM. If you want to do server-side rendering, you can't use document in that code.