Use UseMaui=true in a razor component breaks the _content/PackageId

[mattleibow]

Description

Adding <UseMaui>true</UseMaui> to a razor component library causes the static we assets not to be packaged correctly.

I think this has to do with the fact our maui blazor targets assume an app and thus force set the BasePath to be / instead of first checking the context - final app or library,

Steps to Reproduce

1. Create a maui blazor app that references a plain razor component library
2. Observe a successful run
3. Add UseMaui=true to the razor compoent
4. Observe that the razor component no longer loads

Expected Behavior

Actual Behavior

Basic Information

• Version with issue:
• Last known good version:
• IDE:
• Platform Target Frameworks:
  • iOS:
  • Android:
  • UWP:
• Android Support Library Version:
• Nuget Packages:
• Affected Devices:

Screenshots

Reproduction Link

Workaround

[javiercn]

I don't think we want to support people using Maui inside RCLs.

RCLs are supposed to be "netstandard-like" pieces that can be referenced by web/maui/webassembly and we don't support transitive behaviors across web, wasm or maui projects with regards to static web assets.

[Eilon]

See comment here: https://github.com/dotnet/maui/issues/3536#issuecomment-1012800568

@javiercn I'm not sure I understand this reasoning because it doesn't seem to align with any particular restriction that I know of. We should discuss more before deciding on this because it seems very limiting.

[mkArtakMSFT]

We've discussed this within the team and have decided to wait for more feedback on this and see whether this will be a real problem for many customers or not.

[Eilon]

The workaround is to:

1. Place all the Razor code (*.razor files) in a regular Razor Class Library (RCL)
2. The .NET MAUI library can have <UseMaui>true</UseMaui> and reference the RCL for whatever types it needs

[lvendramini]

We are wanting to do the same thing. We added <UseMaui>true</UseMaui> to our maui project . Is this correct? Do we (and how do we ) reference the RCL?

[Eilon]

@lvendramini you would set UseMaui=true in the MAUI app or library. And then add a regular project reference to the RCL that contains any razor files or other static assets (JS/CSS/etc.). That RCL would not have UseMaui=true (because that would hit the bug described in this issue).

[VincentBu]

Verified on Android. Adding <UseMaui>true</UseMaui> in csproj makes build fail. Here is a repro sample: MauiApp1.zip

[John0x]

@lvendramini you would set UseMaui=true in the MAUI app or library. And then add a regular project reference to the RCL that contains any razor files or other static assets (JS/CSS/etc.). That RCL would not have UseMaui=true (because that would hit the bug described in this issue).

In this scenario, the RCL cannot reference the maui library, right? This is kinda bonkers. My razor components consume a lot of code, that relies on maui, therefore they need a reference to it.

[XamlTest]

Verified this issue on Visual Studio Enterprise 17.6.0 Preview 2.0. Repro on Windows with below Project: 3288.zip

[densen2014]

try only use maui in ios and mac ,

	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' or $([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">
		<UseMaui>true</UseMaui>	
		<SingleProject>true</SingleProject>
	</PropertyGroup>

and

    <!--启用maui支持,直接忽略共享库并到主项目,所以不用引用共享库名称-->
    <link href="css/app.css" rel="stylesheet" />
    <!--不启用maui支持,引用共享库名称的css-->
    <link href="_content/BlazorHybrid.Shared/css/app.css" rel="stylesheet" />

[datvm]

We need this as well, right now our MAUI Blazor library looks like this which is crazy:

Common
^
| -- CommonRcl  --> CommonCore
| -- CommonMaui ----^

Now I got the chance to rewrite it using a single package by using <Project Sdk="Microsoft.NET.Sdk.Razor"> and <UseMaui>true</UseMaui> but the only issue right now is wwwroot content are not copied. A solution is probably another RCL assembly just for the files alone, which is less crazy but I wish I could do it in one assembly:

Common <-- CommonRCL

[datvm]

I also just found out all css of Blazor components are not packed as well. Please follow my upper comment:

In Common project, I have MyComponent.razor and MyComponent.razor.css: No CSS is generated and therefore no Demo.styles.css is created in the final consuming project as well.

In CommonRCL project, add TestComponent.razor and TestComponent.razor.css: Demo.styles.css is created.

This means all components in Common project cannot be styled. Problem with "just move it to the RCL project" is that those component use services that are implemented by MAUI APIs so if I want to move them, I have to move all interfaces as well, and then implement those interfaces in the MAUI project (Common).

[densen2014]

@datvm

 <!--Enable maui support, directly ignore the shared library and go to the main project, so there is no need to quote the shared library name-->
    <link href="css/app.css" rel="stylesheet" /> 

[datvm]

@densen2014 that defeats the point of shared library.