Ios Local device component css failing to load

[Nex-Code]

Description

When running the app through a local device - not paired with a mac - the app fails to load the isolated css and any 3rd party library styles. It will load files in the webroot/css.

Safari seems to be complaining about a MIME type issue, but that may be related to a lack of content.

Steps to Reproduce

Create new "blank" (weather app) Maui Blazor app
Debug on iOS - Local Device as target

Version with bug

Preview 13 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15.3.1

Did you find any workaround?

No response

Relevant log output

Did not parse stylesheet at 'app://0.0.0.0/MauiApp2.styles.css' because non CSS MIME types are not allowed in strict mode.

[jfversluis]

Probably has something to do with Hot Restart. Are you maybe able to verify it does work on a Mac? It would also really help if you could attach a small reproduction project that shows this issue, thanks!

[Nex-Code]

It should be reproducible here: https://github.com/CodeBoop/MauiApp2

I can't test it on a Mac at the moment as I don't have access to one currently.

[jfversluis]

So, this is just a file new project right? Sorry, I must've missed that from your reproduction steps... You didn't add anything here? Then I'm almost sure this is a problem with Hot Restart at this point.

cc: @maddymontaquila

Correction! Not true, this also happens on a Mac on a Simulator

[Nex-Code]

Sorry yeh, it's just a new project, nothings been added.

[jfversluis]

Could you check if you have the latest templates? When I create a new project with the latest templates this works fine.

Go to a command-window and do: dotnet new -i Microsoft.Maui.Templates. What does that tell you?

[Nex-Code]

I get the following:

Success: Microsoft.Maui.Templates::6.0.200-preview.13.2865 installed the following templates:
Template Name                           Short Name        Language  Tags                                               
--------------------------------------  ----------------  --------  ---------------------------------------------------
.NET MAUI App (Preview)                 maui              [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/Windows        
.NET MAUI Blazor App (Preview)          maui-blazor       [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/Windows/Blazor 
.NET MAUI Class Library (Preview)       mauilib           [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/Windows        
.NET MAUI ContentPage (C#) (Preview)    maui-page-csharp  [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/WinUI/Xaml/Code
.NET MAUI ContentPage (XAML) (Preview)  maui-page-xaml    [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/WinUI/Xaml/Code
.NET MAUI ContentView (C#) (Preview)    maui-view-csharp  [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/WinUI/Xaml/Code
.NET MAUI ContentView (XAML) (Preview)  maui-view-xaml    [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/WinUI/Xaml/Code

[jfversluis]

Looks like it installed something then. Could you try again with these new templates?

[Nex-Code]

It's producing the same errors.

However, there does appear to be a Hot Reload issue that I'd missed originally.

[10:38:25]  (MauiApp13) .NET6 Project references MAUI.
[10:38:25]  Caught exception in AgentStatusChangedHandler at 315: Xamarin.HotReload.EntryPointException: MauiApp13: Hot Reload got error getting user entry point, iOS ---> Mono.ArgumentNullOrEmptyException: Argument null or empty
Parameter name: fileName
   at Mono.Cecil.Mixin.CheckFileName(String fileName)
   at Mono.Cecil.ModuleDefinition.ReadModule(String fileName, ReaderParameters parameters)
   at Xamarin.HotReload.RunConfiguration.GetEntryPoint() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Bridge\RunConfiguration.cs:line 51
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at Microsoft.VisualStudio.Telemetry.WindowsErrorReporting.WatsonReport.GetClrWatsonExceptionInfo(Exception exceptionObject)
   --- End of inner exception stack trace ---
   at Xamarin.HotReload.RunConfiguration.GetEntryPoint() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Bridge\RunConfiguration.cs:line 56
   at Xamarin.HotReload.HotReloadBridge.Start(SoftDebuggerSession debugger) in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Bridge\HotReloadBridge.cs:line 105
   at Xamarin.HotReload.RunConfiguration.GetEntryPoint() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Bridge\RunConfiguration.cs:line 56
   at Xamarin.HotReload.HotReloadBridge.Start(SoftDebuggerSession debugger) in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Bridge\HotReloadBridge.cs:line 105
[10:38:25]  XAML Hot Reload encountered a problem and failed to start. Use Help -> Report a Problem if the issues persists.
[10:38:25]  Stopping All Hot Reload sessions due to Failed ...
[10:38:25]  (MauiApp13) Stopping a Hot Reload session due to Failed ...
[10:38:25]  Stopped Hot Reload session.
[10:38:25]  (MauiApp13) Failure creating DeltaApplierCreator : Operation is not valid due to the current state of the object.
[10:38:25]  (MauiApp13) Caught exception in .ctor at 58: System.InvalidOperationException: Operation is not valid due to the current state of the object.
   at Xamarin.HotReload.Vsix.VSProject.<>c__DisplayClass13_0.<.ctor>b__3() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Vsix\VSProject.cs:line 53
   at Xamarin.HotReload.Vsix.VSProject.<>c__DisplayClass13_0.<.ctor>b__3() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Vsix\VSProject.cs:line 53
[10:38:25]  Caught exception in StartHR at 290: System.AggregateException: One or more errors occurred. ---> System.InvalidOperationException: Operation is not valid due to the current state of the object.
   at Xamarin.HotReload.Vsix.VSProject.<>c__DisplayClass13_0.<.ctor>b__3() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Vsix\VSProject.cs:line 59
   at System.Lazy`1.CreateValue()
   at System.Lazy`1.LazyInitValue()
   at Xamarin.HotReload.Vsix.VSProject.<AttachDotNetHotReloadAsync>d__60.MoveNext() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Vsix\VSProject.cs:line 247
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Xamarin.HotReload.Ide.IdeManager.<StartHotReloadAsync>d__46.MoveNext() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Ide\IdeManager.cs:line 181
   --- End of inner exception stack trace ---
---> (Inner Exception #0) System.InvalidOperationException: Operation is not valid due to the current state of the object.
   at Xamarin.HotReload.Vsix.VSProject.<>c__DisplayClass13_0.<.ctor>b__3() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Vsix\VSProject.cs:line 59
   at System.Lazy`1.CreateValue()
   at System.Lazy`1.LazyInitValue()
   at Xamarin.HotReload.Vsix.VSProject.<AttachDotNetHotReloadAsync>d__60.MoveNext() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Vsix\VSProject.cs:line 247
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Xamarin.HotReload.Ide.IdeManager.<StartHotReloadAsync>d__46.MoveNext() in D:\a\_work\1\s\HotReload\Source\Xamarin.HotReload.Ide\IdeManager.cs:line 181<---

[owaits]

I am not sure if this is applicable to this bug but I found the asset path "app://0.0.0.0" did not reliably work when loading css from assets. Instead I changed my code to use Foundation.NSBundle.MainBundle.ResourcePath. See bellow for my code that takes HTML and applies a local asset css style.

public class HtmlEntryAdaptor:EntryAdaptor
    {
        private HtmlEntry entry = null;

        public HtmlEntryAdaptor(HtmlEntry entry)
        {
            this.entry = entry;
        }

        public override string Title
        {
            get
            {
                return entry?.Title;
            }
        }

        public string BaseUrl 
        {
#if __ANDROID__
            get { return "file:///android_asset/"; }
#elif __IOS__
            get { return Foundation.NSBundle.MainBundle.ResourcePath; }
#else
            get { return "ms-appx-web:///"; }
#endif
        }

        public string Html { get { return FormatText(); } }

        public override string FormatText()
        {
            if (entry == null)
            {
                return "<html></html>";
            }

            StringBuilder builder = new StringBuilder();
            builder.Append(@"<html>  <head>  <title>");
            builder.Append(Title);
            builder.Append(@"</title>");
            builder.Append(@"<link type=""text/css"" rel=""stylesheet"" href=""Assets/css/site.css"" media=""all""/> </head> <body>");
            builder.Append(entry.Content);
            builder.Append(@"</body></html>");

            return builder.ToString();
        }
    }

[Nex-Code]

@owaits is that just rewriting the urls in the header section of the index.html?

[owaits]

@owaits is that just rewriting the urls in the header section of the index.html?

I bind the WebView BaseUrl to the BaseUrl property in HtmlEntryAdapter. This ensures that any urls within the webview point to the bundle resource path.

So in the xaml bellow the binding context is an instance of HtmlEntryAdaptor.

        <WebView>
            <WebView.Source>
                <HtmlWebViewSource BaseUrl="{Binding BaseUrl}" Html="{Binding Html}"/>
            </WebView.Source>
        </WebView>

[Nex-Code]

have you got a link to an example, as I can't see where that exists/would go inside the Blazor examples?

[Nex-Code]

@jfversluis - I can now confirm that it does work when paired with a mac.

[Eilon]

Possible dupe? #4061

[captainsafia]

@codeboop The app that you provided a link to doesn't contain any scoped CSS within the shared library. What happens if you remove this line.

My hunch is that the local device might be more eager about loading CSS files that weren't actually generated.

Inversely, what happens when you include the scoped CSS files back?

[Eilon]

@codeboop - I was looking at this with @captainsafia and I suspect that the various CSS files in the app got deleted somehow. The project is supposed to have the CSS files seen in this folder:

• https://github.com/dotnet/maui/tree/main/src/Templates/src/templates/maui-blazor/Shared

So you could try copying those files into your app, which I think might be the right solution here.

Can you confirm if that works for you? And also if you have some idea how those files got removed?

[Nex-Code]

@Eilon I'd love to attempt to, but I have seemingly lost the ability to connect to my local device.

I removed the files from the project to get it to compile, so hopefully the fix for #4061 fixes that issue. If I can get the option to test on my local device back I'll report back with a conclusion.