Could not find 'Toolbelt.Head.Title.query' ('Toolbelt' was undefined). about toolbelt.blazor.headelement

[Alerinos]

i fix it

    <PackageReference Include="Toolbelt.Blazor.HeadElement" Version="6.0.0-preview.3" />
    <PackageReference Include="Toolbelt.Blazor.HeadElement.ServerPrerendering" Version="6.0.0-preview.3" />

I had to add it manually to the project, nuget refused to download this version for me.

The next problem is that I have a blank page, nothing renders. No html tag (empty in source)

Console log:

[14:10:32 INF] Now listening on: https://localhost:5001
[14:10:32 INF] Application started. Press Ctrl+C to shut down.
[14:10:32 INF] Hosting environment: Production
[14:10:32 INF] Content root path: C:\Git\Stand\Stand\bin\Debug\net6.0
[14:10:42 INF] Request starting HTTP/2 GET https://localhost:5001/ - -
[14:10:42 INF] Executing endpoint '/_Host'
[14:10:42 INF] Route matched with {page = "/_Host", area = ""}. Executing page /_Host
[14:10:42 INF] Executing an implicit handler method - ModelState is Valid
[14:10:42 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[14:10:43 INF] Executed page /_Host in 888.5204ms
[14:10:43 INF] Executed endpoint '/_Host'
[14:10:43 INF] Request finished HTTP/2 GET https://localhost:5001/ - - - 200 - text/html;+charset=utf-8 1058.6362ms
[14:10:45 INF] Request starting HTTP/2 GET https://localhost:5001/ - -
[14:10:45 INF] Executing endpoint '/_Host'
[14:10:45 INF] Route matched with {page = "/_Host", area = ""}. Executing page /_Host
[14:10:45 INF] Executing an implicit handler method - ModelState is Valid
[14:10:45 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[14:10:46 INF] Executed page /_Host in 796.384ms
[14:10:46 INF] Executed endpoint '/_Host'
[14:10:46 INF] Request finished HTTP/2 GET https://localhost:5001/ - - - 200 - text/html;+charset=utf-8 805.7219ms
[14:10:47 INF] Request starting HTTP/2 GET https://localhost:5001/ - -
[14:10:47 INF] Executing endpoint '/_Host'
[14:10:47 INF] Route matched with {page = "/_Host", area = ""}. Executing page /_Host
[14:10:47 INF] Executing an implicit handler method - ModelState is Valid
[14:10:47 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[14:10:48 INF] Executed page /_Host in 801.1824ms
[14:10:48 INF] Executed endpoint '/_Host'
[14:10:48 INF] Request finished HTTP/2 GET https://localhost:5001/ - - - 200 - text/html;+charset=utf-8 824.8403ms
[14:10:48 INF] Request starting HTTP/2 GET https://localhost:5001/ - -
[14:10:48 INF] Executing endpoint '/_Host'
[14:10:48 INF] Route matched with {page = "/_Host", area = ""}. Executing page /_Host
[14:10:48 INF] Executing an implicit handler method - ModelState is Valid
[14:10:48 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[14:10:49 INF] Executed page /_Host in 816.2826ms
[14:10:49 INF] Executed endpoint '/_Host'
[14:10:49 INF] Request finished HTTP/2 GET https://localhost:5001/ - - - 200 - text/html;+charset=utf-8 826.5096ms

            #region Blazor
            services.AddServerSideBlazor();
            #endregion

            services.AddHeadElementHelper();

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            // Proxy
            app.UseForwardedHeaders();

            if (env.IsDevelopment()) {
                app.UseDeveloperExceptionPage();
            } else {
                app.UseExceptionHandler("/Error"); //TODO: Dodaj obsługę błedów
                app.UseHsts();
            }

            app.UseHeadElementServerPrerendering();

            app.UseResponseCompression();   // Compression
            app.UseImageSharp();            // Add the image processing middleware.
            app.UseHttpsRedirection();      // wwwroot
            app.UseStaticFiles();

            var dir = Path.Combine(Directory.GetCurrentDirectory(), "Public");
            var compositeProvider = new CompositeFileProvider(env.WebRootFileProvider, new PhysicalFileProvider(dir));
            env.WebRootFileProvider = compositeProvider;
            app.UseStaticFiles(new StaticFileOptions {
                OnPrepareResponse = ctx => {
                    ctx.Context.Response.Headers.Append(
                        "Cache-Control", $"public, max-age={_configuration["Server:Website:Cache:MaxAge"]}");
                }
            });

            app.UseRouting();

            // Plugin
            app.UseMiddleware<Utilities.Help.Notification>();

            // Language
            //app.UseRewriter(new RewriteOptions().Add(new FirstLoadRewriteRule()));
            app.UseRequestLocalization();

            // app.UseAuthorization(); // Disabled

            app.UseEndpoints(endpoints => {


                //endpoints.MapRazorPages();
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");

            });

            #region CodePages
            app.UseStatusCodePages(context => {
                var request = context.HttpContext.Request;
                var response = context.HttpContext.Response;
            
                if (response.StatusCode == StatusCodes.Status404NotFound)
                    response.Redirect("/Error/404");
            
                return Task.CompletedTask;
            });
            #endregion
        }

[jsakamoto]

@Alerinos Thanks for your cooperation. 👍

I could reproduce the problem, and I could find the reason for the problem.

Currently your code is like this:

app.UseHeadElementServerPrerendering();
app.UseResponseCompression();
app.UseHttpsRedirection();
app.UseStaticFiles();

Could you try to change the code above to below?

app.UseResponseCompression();
app.UseHttpsRedirection();
app.UseHeadElementServerPrerendering(); // 👈 Place this just before `UseStaticFile()`
app.UseStaticFiles();

The UseHeadElementServerPrerendering() feature rewrites the HTML text response to change a title, meta, and link elements.

But if the UseResponseCompression() is placed after the UseHeadElementServerPrerendering(), then the UseHeadElementServerPrerendering() will receive an after compressed contents.
So the UseHeadElementServerPrerendering() could not rewrite it.

[Alerinos]

I did, and it only works for server rendering. Blazor has a rendering problem. The problem seems to me to be running it from another project. (See zip package above).
We have a "www" project + a "start" project

Another problem I see is when we do this:

<Title>Counter(2) - Server Side App</Title>
<Meta Name="description" Content="" />
<Link href="css/site2.css" rel="stylesheet" />

The server takes a long time to render the content. The more tags, the longer the server response. Maybe a loop?

Use this and test the times. Something is wrong, the server renders for a long time.

<Title>Counter(2) - Server Side App</Title>
<Meta Name="description" Content="" />
<Link href="css/site2.css" rel="stylesheet" />
<Link href="css/site3.css" rel="stylesheet" />
<Link href="css/site4.css" rel="stylesheet" />
<Link href="css/site5.css" rel="stylesheet" />
<Link href="css/site6.css" rel="stylesheet" />
<Link href="css/site7.css" rel="stylesheet" />
<Link href="css/site8.css" rel="stylesheet" />
<Link href="css/site9.css" rel="stylesheet" />
<Link href="css/site10.css" rel="stylesheet" />
<Link href="css/site11.css" rel="stylesheet" />
<Link href="css/site12.css" rel="stylesheet" />

16:01:52-16:02:09 It took 17 seconds to render the page.

[16:01:52 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[16:02:09 INF] Executed page /_Host in 16626.7141ms
[16:02:09 INF] Executed endpoint '/_Host'
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/ - - - 200 - text/html;+charset=utf-8 16734.3472ms
[16:02:09 INF] Request starting HTTP/2 POST https://localhost:5001/_blazor/disconnect multipart/form-data;+boundary=----WebKitFormBoundaryB8BBCH8t1sUXhG0V 359
[16:02:09 INF] Executing endpoint 'Blazor disconnect'
[16:02:09 INF] Executed endpoint '/_blazor'
[16:02:09 INF] Request finished HTTP/1.1 GET https://localhost:5001/_blazor?id=zNhs4vFSdCjci8jRltBkdg - - - 101 - - 494419.4210ms
[16:02:09 INF] Executed endpoint 'Blazor disconnect'
[16:02:09 INF] Request finished HTTP/2 POST https://localhost:5001/_blazor/disconnect multipart/form-data;+boundary=----WebKitFormBoundaryB8BBCH8t1sUXhG0V 359 - 200 0 - 4.8332ms
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/lib/bootstrap/5.0.1/css/bootstrap.min.css?v=hHKA3d_HttC8OW3Sl093W8DoZudhHJDj--kZYo6MLzA - -
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/lib/font-awesome/5.15.3/css/all.min.css?v=2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y - -
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/css/site.css - -
[16:02:09 INF] The file /lib/bootstrap/5.0.1/css/bootstrap.min.css was not modified
[16:02:09 INF] The file /lib/font-awesome/5.15.3/css/all.min.css was not modified
[16:02:09 INF] The file /css/site.css was not modified
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/lib/bootstrap/5.0.1/css/bootstrap.min.css?v=hHKA3d_HttC8OW3Sl093W8DoZudhHJDj--kZYo6MLzA - - - 304 - text/css 4.2597ms
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/lib/font-awesome/5.15.3/css/all.min.css?v=2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y - - - 304 - text/css 6.4942ms
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/css/site.css - - - 304 - text/css 7.2785ms
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/_framework/blazor.server.js - -
[16:02:09 INF] The file /_framework/blazor.server.js was not modified
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/_framework/blazor.server.js - - - 304 - application/javascript 2.8204ms
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/css/open-iconic/font/css/open-iconic-bootstrap.min.css - -
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/css/open-iconic/font/css/open-iconic-bootstrap.min.css - - - 302 0 - 1.1444ms
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/Error/404 - -
[16:02:09 INF] Executing endpoint '/Error'
[16:02:09 INF] Route matched with {page = "/Error", area = ""}. Executing page /Error
[16:02:09 INF] Executing handler method Website.Pages.ErrorModel.OnGet - ModelState is Valid
[16:02:09 INF] Executed handler method OnGet, returned result .
[16:02:09 INF] Executing an implicit handler method - ModelState is Valid
[16:02:09 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[16:02:09 INF] Executed page /Error in 4.1749ms
[16:02:09 INF] Executed endpoint '/Error'
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/Error/404 - - - 200 - text/html;+charset=utf-8 9.6651ms
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/template/image/header.webp - -
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/lib/font-awesome/5.15.3/webfonts/fa-solid-900.woff2 - -
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/template/image/background.webp - -
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/lib/font-awesome/5.15.3/webfonts/fa-brands-400.woff2 - -
[16:02:09 INF] The file /template/image/header.webp was not modified
[16:02:09 INF] The file /lib/font-awesome/5.15.3/webfonts/fa-solid-900.woff2 was not modified
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/template/image/logo_white.svg - -
[16:02:09 INF] The file /lib/font-awesome/5.15.3/webfonts/fa-brands-400.woff2 was not modified
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/template/image/header.webp - - - 304 - image/webp 4.6688ms
[16:02:09 INF] The file /template/image/background.webp was not modified
[16:02:09 INF] Request starting HTTP/2 POST https://localhost:5001/_blazor/negotiate?negotiateVersion=1 text/plain;charset=UTF-8 0
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/lib/font-awesome/5.15.3/webfonts/fa-solid-900.woff2 - - - 304 - font/woff2 8.0968ms
[16:02:09 INF] The file /template/image/logo_white.svg was not modified
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/lib/font-awesome/5.15.3/webfonts/fa-brands-400.woff2 - - - 304 - font/woff2 10.0705ms
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/template/image/background.webp - - - 304 - image/webp 13.2684ms
[16:02:09 INF] Executing endpoint '/_blazor/negotiate'
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/template/image/logo_white.svg - - - 304 - image/svg+xml 9.7513ms
[16:02:09 INF] Executed endpoint '/_blazor/negotiate'
[16:02:09 INF] Request finished HTTP/2 POST https://localhost:5001/_blazor/negotiate?negotiateVersion=1 text/plain;charset=UTF-8 0 - 200 - application/json 18.5151ms
[16:02:09 INF] Request starting HTTP/1.1 GET https://localhost:5001/_blazor?id=Qbt3Cl2ZfV9ORlBGQcxi3w - -
[16:02:09 INF] Executing endpoint '/_blazor'
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/_content/Toolbelt.Blazor.HeadElement.Services/script.module.min.js?v=6.0.0-preview.3 - -
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/_content/Toolbelt.Blazor.HeadElement.Services/script.module.min.js?v=6.0.0-preview.3 - - - 302 0 - 1.1099ms
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/Error/404 - -
[16:02:09 INF] Executing endpoint '/Error'
[16:02:09 INF] Request starting HTTP/2 GET https://localhost:5001/template/image/logo_white.svg - -
[16:02:09 INF] Route matched with {page = "/Error", area = ""}. Executing page /Error
[16:02:09 INF] The file /template/image/logo_white.svg was not modified
[16:02:09 INF] Executing handler method Website.Pages.ErrorModel.OnGet - ModelState is Valid
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/template/image/logo_white.svg - - - 304 - image/svg+xml 3.5160ms
[16:02:09 INF] Executed handler method OnGet, returned result .
[16:02:09 INF] Executing an implicit handler method - ModelState is Valid
[16:02:09 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[16:02:09 INF] Executed page /Error in 10.1768ms
[16:02:09 INF] Executed endpoint '/Error'
[16:02:09 INF] Request finished HTTP/2 GET https://localhost:5001/Error/404 - - - 200 - text/html;+charset=utf-8 17.0600ms

[Alerinos]

I just did a test on "BlazorToolbelt.zip", I have no idea why I'm having such a long time. I am using Microsoft Edg. On Google Chrome it is 5.4 seconds. I also use Visual Studio 2022 windows 11. My CPU is ryzen 9 3900xt and the NVME disk so it shouldn't be a problem.

I just did a debug to release test, the time dropped from 8 seconds to 4 but that may be the case.

[jsakamoto]

@Alerinos Thanks for reporting.

I tried to reproduce your problem on my hand, but unfortunately, I couldn't.

So to isolate the cause of the problem, could you try to comment out "app.UseHeadElementServerPrerendering()" and rerun it, and let me know if you still get an empty response?

Or, I welcome you to zip & attach the whole project that can reproduce the problem to this thread.

[Alerinos]

At the moment of commenting, the page works, the content is rendered, but the title is not changed. The title is hidden in the source of the page. At the time of uncommenting, the site also works until I put <title>

My project is like a library, blazor server page is running by another project. It is also a migration from Razor Pages. Will try to create a new project and see if it works.

[Alerinos]

Found a bug, add this:

            #region Compression
            services.Configure<BrotliCompressionProviderOptions>(o => {
                o.Level = CompressionLevel.Optimal;
            });
            services.Configure<GzipCompressionProviderOptions>(o => {
                o.Level = CompressionLevel.Optimal;
            });
            services.AddResponseCompression(options => {
                options.EnableForHttps = true;
                options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[] {
                    "application/javascript",
                    "application/json",
                    "application/xml",
                    "application/xhtml+xml",
                    "text/css",
                    "text/json",
                    "text/plain",
                    "text/html",
                    "text/plain",
                    "text/xml",
                    "image/jpeg",
                    "image/png",
                    "image/webp",
                    "application/font-woff2",
                    "image/svg+xml",
                    "image/x-icon",
                    "image/svg+xml",
                    "font/woff2",
                });
                options.Providers.Add<BrotliCompressionProvider>();
                options.Providers.Add<GzipCompressionProvider>();
            });
            #endregion

             app.UseResponseCompression();   // Compression

[Alerinos]

BlazorToolbeltTest.zip
There is one more error here, when you don't compress the title doesn't change dynamically.
The server renders well blazor no.

[jsakamoto]

@Alerinos

I could not reproduce the "the server takes a long time to render the content" problem on the BlazorToolbelt.zip.

info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[104]
      Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
info: Microsoft.AspNetCore.Mvc.RazorPages.Infrastructure.PageActionInvoker[4]
      Executed page /_Host in 129.215ms
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[1]
      Executed endpoint '/_Host'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished HTTP/2 GET https://localhost:5001/ - - - 200 - text/html;+charset=utf-8 397.0514ms

I have no idea at this time that this problem is caused by "HeadElement" or not.

[Alerinos]

Hi, did you find the problem?
You need help? I can help, there are generally two mistakes.
The first one is the loading time increases, the second one does not work dynamically changing the text when we start a project from another project.

[jsakamoto]

@Alerinos

Sorry too late.

The first one is the loading time increases,

I still can't reproduce this problem.
Could you build and run the project I attached to this post below and try to reproduce that problem in your environment?

📂 BlazorToolbeltTest - Aug 29, 2021 - J.Sakamoto.zip

If you can't reproduce that problem with the project that I attached, the reason for the problem will not be the "Head Element Helper" library, I think.

the second one does not work dynamically changing the text when we start a project from another project.

Your fault will cause this problem.

You must use the "Sdk=Microsoft.NET.Sdk.Web" instead of the "Sdk=Microsoft.NET.Sdk" to create an ASP.NET Core project, especially in the case that the project reference other ASP.NET Core web or component projects.

If you don't do that, it will not work fine not only in the "Head Element Helper" library but any NuGet Packages that include JavaScript code.

The project that I attached to this post above is modified at this point, and that project works fine.
Please see also the comment in the "Start.csproj" file in that project I attached.

[Alerinos]

You must use the "Sdk=Microsoft.NET.Sdk.Web" instead of the "Sdk=Microsoft.NET.Sdk" to create an ASP.NET Core project, especially in the case that the project reference other ASP.NET Core web or component projects.

Thanks it works, I thought the main project didn't need to have this.

I still can't reproduce this problem.
Could you build and run the project I attached to this post below and try to reproduce that problem in your environment?

Still the same problem, how can i help you? How can I take a memory or program dump?

BlazorToolbeltTest.zip
I am sending the whole project (debug, release etc.)

[Alerinos]

You must use the "Sdk=Microsoft.NET.Sdk.Web" instead of the "Sdk=Microsoft.NET.Sdk" to create an ASP.NET Core project, especially in the case that the project reference other ASP.NET Core web or component projects.

There is another way to do this? Unfortunately my main project runs other projects (SignalR, RestAPI, Bot etc). After switching to Web, the console application does not work for me. :(

[jsakamoto]

@Alerinos

the console application does not work for me. :(

Could you explain in more detail what happened?
Did an exception happen?
If so, what was that exception said?

There is nothing that I can do because the hint is only "doesn't work".
I don't have mind-reading skills.😅

By the way, is your project that includes this problem hosted in any Git repository cloud services like GitHub?
If the answer is yes, can I join that repository even if that repository is private?
If I can touch the whole of your project on my local PC and run it in debug mode, I can know a lot of information about the problem.

Please consider it.