fix: v3 Library with Blazor Web App .NET 8 #623

timheuer · 2023-08-18T04:17:43Z

🐛 Bug Report

When using the library with the new Blazor Web App (.NET8 Preview 7) template, I'm not getting any of the styles loading like the Header, etc. The content is rendering, no errors in outputs/console log/etc. just not getting any UI that is expected.

💻 Repro or Code Sample

(install .NET 8 Preview 7)

File...New Blazor Web App
Add 3.0.0-RC1 package and configure project
Add element to MainLayout

<FluentHeader>
    My Dashboard
</FluentHeader>

🤔 Expected Behavior

Header renders like documentation indicates

😯 Current Behavior

Header content renders, but nothing else

The text was updated successfully, but these errors were encountered:

vnbaaij · 2023-08-18T11:06:48Z

There seems to be an issue with loading the needed script (_content/Microsoft.Fast.Components.FluentUI/js/web-components.min.js) from the static assets. Need to dig into that.
In the meantime, as a workaround you can add a script tag to the App.razor file which points to a hosted CDN version of the script, i.e.:

<script type="module" src="https://cdn.jsdelivr.net/npm/@@fluentui/web-components@@2.5.16/dist/web-components.min.js"></script>

That should get you in a working state again.

danroth27 · 2023-08-18T16:24:35Z

There seems to be an issue with loading the needed script (_content/Microsoft.Fast.Components.FluentUI/js/web-components.min.js) from the static assets. Need to dig into that.

@vnbaaij How does this script normally get loaded? Are you using a JavaScript initializer?

timheuer · 2023-08-18T16:27:11Z

That should get you in a working state again.

Thanks @vnbaaij -- got the UI working...interactivity is not (sorting does nothing on clicking on the grid now)

vnbaaij · 2023-08-18T16:34:43Z

@vnbaaij How does this script normally get loaded? Are you using a JavaScript initializer?

Yes, the lib.module.js file uses beforeStart initializer to load the we components script

vnbaaij · 2023-08-18T16:45:19Z

Thanks @vnbaaij -- got the UI working...interactivity is not (sorting does nothing on clicking on the grid now)

The behavior has changed with . NET 8. I'm in contact with Mackinnon to see what would be a solution for this

vnbaaij · 2023-08-19T15:18:01Z

@timheuer this how it works with .NET 8 at the moment (JS initializers behavior is not yet finalized, see also dotnet/aspnetcore#50187)

With Blazor's server-side rendering model, JS initializers don't get called until interactive components get loaded on the page for the first time. That is, when a WebAssembly component gets added to the page, the beforeStart callback is executed and the WebAssembly runtime loads and starts, then the afterStarted callback executes. Callbacks will be re-executed if a Blazor Server component then gets added to the page.

By using the new template (which generates a SSR site) the module script (that loads the web components script and hooks up the custom events)) does not get called. Adding the web components script tag, as suggested by me before, only solves part of the problem.

I solved it in my copy of a site generated with the template as follows:
1 - Change Program.cs to add .AddServerComponents(), so from

// Add services to the container.
builder.Services.AddRazorComponents();

to

// Add services to the container.
builder.Services.AddRazorComponents().AddServerComponents();

2 - Add @attribute [RenderModeServer] to the Index page directives to force it to be a Server component so library script (.lib.module.js) gets called

I guess adding .AddWebAssemblyComponents(); to Program.cs and @attribute [RenderModeWebAssembly] to Index.razor would have the same effect.

tlmii · 2023-09-11T21:22:29Z

@vnbaaij Just curious if there's been any progress on this issue. Looking at the related issue from aspnetcore, it doesn't look like there's been much movement.

It does appear that the above workarounds seem to work for me for individual pages. But it does NOT seem to work for me for things that are part of the MainLayout. E.g. if I have

MainLayout.razor:

<FluentMainLayout>
    <Header><h3>My Page</h3></Header>
    <Body>
        @Body
    </Body>
    <NavMenuContent>
        <FluentNavMenuLink Href="/" Text="Home" />
        <FluentNavMenuLink Href="/SomeRoute" Text="Some Route" />
    </NavMenuContent>
</FluentMainLayout>

And then on my page, I have a FluentDataGrid (details don't really matter, since it works), then:

The datagrid renders and is fully interactive as far as I can tell (at minimum, sorting is working, which @timheuer noted didn't work for him until the workarounds)
The nav menu renders (mostly) properly, but is not interactive at all. Collapsing the menu doesn't work, clicking the links doesnt work and it doesn't detect which page you're on.

I can't set @attribute [RenderModeServer] on the MainLayout.razor file itself (as done on the individual pages as part of the workaround), as that throws an exception.

Is there a different workaround for the layout file? Or do we need to wait for resolution of the underlying issue?

vnbaaij · 2023-09-11T21:32:23Z

Hi,

See also #706. We are blocked on this till .NET 8 RC2. The issue with MainLayout/@Attribute will be addressed then.

mahald · 2023-09-16T17:07:33Z

Will we get the .net8 FluentUI version of the "Blazor-Web-App" Template fully functional and with support for SSR and a Mainlayout and NavMenu that supports SSR with RC2/RTM? Setting the MainLayout or NavMenu to @Attribute [RenderModeServer] kinda defeats the ability to choose rendermodes on a per page base. (With Add Dynamic WebAssembly component option) supported ?

vnbaaij · 2023-09-17T12:55:26Z

We will work on such a template, but it probably won't come before the next major release of the library (which will be .NET 8 and higher only).

As I understand it, you can't change rendermodes for child components (ie if parent gets rendermode server set, then child components get rendermode server as well) so if we would set @attribute[RenderModeServer] on MainLayout, that would indeed dictate that mode basically for the whole site. That is not the case with the NavMenu I think.

mahald · 2023-09-17T14:15:09Z

Thank you for your encouraging feedback, @vnbaaij.

Although the NavMenu doesn't strictly impose its render mode on the 'pages', it implies that a SignalR connection would be necessary on every page where the NavMenu is featured. I am quite fond of the concept where this connection is initiated only if a particular page necessitates it, thereby avoiding unnecessary SignalR connections on WASM or SSR pages. Consequently, I am on the lookout for a NavMenu that is compatible with SSR (or WASM or static ?) mode.

tlmii · 2023-10-12T04:02:10Z

Now that dotnet/aspnetcore#50187 has been fixed and RC2 released, is there work that needs to be done in the code here? Or should we be able to remove some of the workarounds now?

Gareth064 · 2023-10-23T18:06:13Z

I'm running RC2 and I am getting no styles applied.
I am using FluentLayout, FluentHeader, FluentNav etc.... without setting a rendermode.

I want to use SSR for basic components like this that don't need interactivity.

vnbaaij · 2023-11-01T16:20:59Z

When using SSR, you will need to include the web components script. As there is no Blazor script being loaded/used, our script will also not get loaded.
Include the following in your App.razor:

<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js" type="module" async></script>

If you would later add interactivity, the Blazor script will kick in and try to load the web component script again but JavaScript will handle that gracefully by design.

p.s. the new V4 templates will take care of inserting the script based on the choices you make when creating an app from the template

vnbaaij · 2023-11-27T22:06:54Z

Closing this as there is no action from our side. There are templates from us that set everything up correctly (for v4). Rest is more a case of awareness and education.

Gabriel123N mentioned this issue Nov 19, 2023

fix: In v3 library in .NET 8. Interactivity does not work with @rendermode="@(new InteractiveServerRenderMode(prerender: false))" #993

Closed

vnbaaij closed this as completed Nov 27, 2023

danielgreen mentioned this issue Dec 15, 2023

fix: 404 for web-components-v2.5.16.min.js in 4.2.0 template #1131

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: v3 Library with Blazor Web App .NET 8 #623

fix: v3 Library with Blazor Web App .NET 8 #623

timheuer commented Aug 18, 2023

vnbaaij commented Aug 18, 2023 •

edited

Loading

Uh oh!

danroth27 commented Aug 18, 2023

Uh oh!

timheuer commented Aug 18, 2023

Uh oh!

vnbaaij commented Aug 18, 2023 •

edited

Loading

Uh oh!

vnbaaij commented Aug 18, 2023

Uh oh!

vnbaaij commented Aug 19, 2023

Uh oh!

tlmii commented Sep 11, 2023

Uh oh!

vnbaaij commented Sep 11, 2023

Uh oh!

mahald commented Sep 16, 2023 •

edited

Loading

Uh oh!

vnbaaij commented Sep 17, 2023

Uh oh!

mahald commented Sep 17, 2023 •

edited

Loading

Uh oh!

tlmii commented Oct 12, 2023

Uh oh!

Gareth064 commented Oct 23, 2023

Uh oh!

vnbaaij commented Nov 1, 2023

Uh oh!

vnbaaij commented Nov 27, 2023

Uh oh!

fix: v3 Library with Blazor Web App .NET 8 #623

fix: v3 Library with Blazor Web App .NET 8 #623

Comments

timheuer commented Aug 18, 2023

🐛 Bug Report

💻 Repro or Code Sample

🤔 Expected Behavior

😯 Current Behavior

vnbaaij commented Aug 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danroth27 commented Aug 18, 2023

Uh oh!

timheuer commented Aug 18, 2023

Uh oh!

vnbaaij commented Aug 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vnbaaij commented Aug 18, 2023

Uh oh!

vnbaaij commented Aug 19, 2023

Uh oh!

tlmii commented Sep 11, 2023

Uh oh!

vnbaaij commented Sep 11, 2023

Uh oh!

mahald commented Sep 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vnbaaij commented Sep 17, 2023

Uh oh!

mahald commented Sep 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tlmii commented Oct 12, 2023

Uh oh!

Gareth064 commented Oct 23, 2023

Uh oh!

vnbaaij commented Nov 1, 2023

Uh oh!

vnbaaij commented Nov 27, 2023

Uh oh!

vnbaaij commented Aug 18, 2023 •

edited

Loading

vnbaaij commented Aug 18, 2023 •

edited

Loading

mahald commented Sep 16, 2023 •

edited

Loading

mahald commented Sep 17, 2023 •

edited

Loading