Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fails to load CSS/JS files in Production

See original GitHub issue

Describe the bug I have been working on a project using MudBlazor as the default theme/UI option. And everything has been working well in the development environment. Currently I want to move the project to production, but when I change the ASPNETCORE environment variables to production and restart the application. The application does not load the CSS/JS files.

When I press CTRL+U in Google Chrome to try and access the CSS files I get an error like this:

https://localhost:44332/_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css

This localhost page can’t be foundNo webpage was found for the web address: https://localhost:44332/_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css
HTTP ERROR 404

Some of the errors that gets logged by the application are (visual studio):

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
    at https://localhost:44332/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44332/_framework/blazor.server.js:1:67350)
    at v (https://localhost:44332/_framework/blazor.server.js:1:69092)
    at https://localhost:44332/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44332/_framework/blazor.server.js:1:70011)
    at https://localhost:44332/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44332/_framework/blazor.server.js:1:26263)

Microsoft.JSInterop.JSException: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
    at https://localhost:44332/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44332/_framework/blazor.server.js:1:67350)
    at v (https://localhost:44332/_framework/blazor.server.js:1:69092)
    at https://localhost:44332/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44332/_framework/blazor.server.js:1:70011)
    at https://localhost:44332/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44332/_framework/blazor.server.js:1:26263)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at MudBlazor.MudDrawer.UpdateHeight()
   at MudBlazor.MudDrawer.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'OCFXO1TthOR6x0vTtJrDWcoy2jTww1SG-6MUsT0Je6k'.

Microsoft.JSInterop.JSException: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
    at https://localhost:44332/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44332/_framework/blazor.server.js:1:67350)
    at v (https://localhost:44332/_framework/blazor.server.js:1:69092)
    at https://localhost:44332/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44332/_framework/blazor.server.js:1:70011)
    at https://localhost:44332/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44332/_framework/blazor.server.js:1:26263)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at MudBlazor.MudDrawer.UpdateHeight()
   at MudBlazor.MudDrawer.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
Error: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
    at https://localhost:44332/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44332/_framework/blazor.server.js:1:67350)
    at v (https://localhost:44332/_framework/blazor.server.js:1:69092)
    at https://localhost:44332/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44332/_framework/blazor.server.js:1:70011)
    at https://localhost:44332/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44332/_framework/blazor.server.js:1:26263)

Microsoft.JSInterop.JSException: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
Error: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
    at https://localhost:44332/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44332/_framework/blazor.server.js:1:67350)
    at v (https://localhost:44332/_framework/blazor.server.js:1:69092)
    at https://localhost:44332/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44332/_framework/blazor.server.js:1:70011)
    at https://localhost:44332/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44332/_framework/blazor.server.js:1:26263)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at MudBlazor.BrowserWindowSizeProvider.GetBrowserWindowSize()
   at MudBlazor.Services.ResizeListenerService.GetBreakpoint()
   at MudBlazor.MudHidden.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'OCFXO1TthOR6x0vTtJrDWcoy2jTww1SG-6MUsT0Je6k'.

Microsoft.JSInterop.JSException: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
Error: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
    at https://localhost:44332/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44332/_framework/blazor.server.js:1:67350)
    at v (https://localhost:44332/_framework/blazor.server.js:1:69092)
    at https://localhost:44332/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44332/_framework/blazor.server.js:1:70011)
    at https://localhost:44332/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44332/_framework/blazor.server.js:1:26263)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at MudBlazor.BrowserWindowSizeProvider.GetBrowserWindowSize()
   at MudBlazor.Services.ResizeListenerService.GetBreakpoint()
   at MudBlazor.MudHidden.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
Error: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
    at https://localhost:44332/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44332/_framework/blazor.server.js:1:67350)
    at v (https://localhost:44332/_framework/blazor.server.js:1:69092)
    at https://localhost:44332/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44332/_framework/blazor.server.js:1:70011)
    at https://localhost:44332/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44332/_framework/blazor.server.js:1:26263)

Microsoft.JSInterop.JSException: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
Error: Could not find 'mudResizeListener.getBrowserWindowSize' ('mudResizeListener' was undefined).
    at https://localhost:44332/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:44332/_framework/blazor.server.js:1:67350)
    at v (https://localhost:44332/_framework/blazor.server.js:1:69092)
    at https://localhost:44332/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44332/_framework/blazor.server.js:1:70011)
    at https://localhost:44332/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44332/_framework/blazor.server.js:1:26263)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at MudBlazor.BrowserWindowSizeProvider.GetBrowserWindowSize()
   at MudBlazor.Services.ResizeListenerService.GetBreakpoint()
   at MudBlazor.MudHidden.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'OCFXO1TthOR6x0

And here are some of the errors that is logged into the browsers developer tools:

Failed to load resource: the server responded with a status of 404 ()
MudBlazor.min.js:1 
Failed to load resource: the server responded with a status of 404 ()
Site.css:1 
Failed to load resource: the server responded with a status of 404 ()
MudBlazorThemeManager.css:1 
Failed to load resource: the server responded with a status of 404 ()
MudBlazor.min.js:1 
Failed to load resource: the server responded with a status of 404 ()
blazor.server.js:21 [2021-04-09T07:38:06.018Z] 
Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'. 
e.log @ blazor.server.js:21
Site.css:1 
Failed to load resource: the server responded with a status of 404 ()
MudBlazor.min.css:1 
Failed to load resource: the server responded with a status of 404 ()
MudBlazorThemeManager.css:1 
Failed to load resource: the server responded with a status of 404 ()

All these errors only occur in the Production and Staging environment. Also I get the same results when I use Microsoft Edge browser.

Expected behavior I expected the MudBlazor static files to load the same in Production as it does in Development environment.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Demonellcommented, Apr 20, 2021

Have same issue here. Made MudBlazor.min.css and MudBlazor.min.js copy and put it into /wwwroot/css/ folder. Then added to _Host.cshtml

    <link rel="stylesheet" href="css/MudBlazor.min.css" />
    <script src="css/MudBlazor.min.js"></script>
0reactions
Gerardo-Sistacommented, Sep 9, 2022

Same issue. I need this need further investigation.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rails app in production: can't load css and js files
I have a Rails 6 app that I'm trying to put in production but the css and js files can't be loaded. I...
Read more >
js and css files are not getting loaded in production ...
When i am hoisting application in local , things are working fine , but when i try to host the same in production...
Read more >
Magento 2.1 not loading some js and css in production mode
Something went wrong while deploying static content. See the error log for details. Command returned non-zero exit code: /usr/bin/php5.6 -f /var ...
Read more >
Solving the React Error: Not Picking Up CSS Style
In this guide, you will learn about the errors that can occur while importing a CSS file into your React file.
Read more >
How to Solve the Chunk Load Error in JavaScript
Whenever there's an error observed in dynamically fetching helper JavaScript files known as Chunks, a ChunkLoad Error is thrown.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Navigation (MudNavLink) links to wrong routing-path (Deployment to github pages has issues)

Next page

App modernization - missing functionality?