search

Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.29k stars 531 forks source link

Microsoft.JSInterop.JSException with textedits #562

Closed noppud closed 4 years ago

noppud commented 4 years ago

As I updated to Blazorise" Version="0.8.8.2", all of my textedits seem to be broken.

For example this page raises error when loaded:

@page "/test"

<TextEdit @bind-Text="name"></TextEdit>

@code{
    string name = "";
}


Microsoft.JSInterop.JSException: element.addEventListener is not a function
TypeError: element.addEventListener is not a function
    at Object.initialize (https://localhost:44335/blazorise.js:176:21)
    at https://localhost:44335/_framework/blazor.server.js:8:31421
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44335/_framework/blazor.server.js:8:31390)
    at https://localhost:44335/_framework/blazor.server.js:1:19202
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44335/_framework/blazor.server.js:1:19173)
    at e.processIncomingData (https://localhost:44335/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (https://localhost:44335/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (https://localhost:44335/_framework/blazor.server.js:1:38091)
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Blazorise.BaseTextEdit.OnFirstAfterRenderAsync()
   at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'RSRVXO4rL51pby9y5AfV-tBFYgsY58NX6ZI1OqV9uV8'.
stsrki commented 4 years ago

The browser caches local js files thinking it wasn't changed. Try hitting ctrl+F5.

noppud commented 4 years ago

Tried that and using a different browser, still getting the same error.

stsrki commented 4 years ago

Can you show me the content of your index.html or _Host.cshtml file?

noppud commented 4 years ago 
@page "/"
@namespace PROJECT
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PROJECT</title>
    <base href="~/" />
    <link href="css/site.css" rel="stylesheet" />

    @*Blazorise stuff*@
    <link href="~/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="~/blazorise.js"></script>
    <script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
    <script src="_content/BlazorInputFile/inputfile.js"></script>

    <!-- inside of head section -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

    <!-- JavaScript interop-->
    <script type="text/javascript">
        function saveAsFile(filename, bytesBase64) {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    </script>
</head>
<body>
    <app>
        @* Remove the following line of code to disable prerendering *@
        @(await Html.RenderComponentAsync<App>
            (RenderMode.Server))
    </app>
    <!-- inside of body section and after the <app> tag  -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="_framework/blazor.server.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="_content/Blazorise.Charts/blazorise.charts.js"></script>
    <!-- Reference the included moment.js javascript file. -->
    <script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>

    <!-- Reference the included ChartJs javascript file. -->
    <script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>

    <!-- This is the glue between the C# code and the ChartJs charts -->
    <script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>

    <!-- Some styling -->
    <link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />
</body>
</html>

_Host.cshtml

stsrki commented 4 years ago

Replace this <script src="~/blazorise.js"></script> with <script src="_content/Blazorise/blazorise.js"></script>. The same with CSS file(s). I guess you're still using local Blazorise files located in wwwroot. Those are not needed any more. They are now embedded in NuGet along with .dlls.

Edit* fixed js sources.

noppud commented 4 years ago

Thank you! Works.

esamk commented 4 years ago

The same error still exists. The fix that worked for noppud does not work for me. I've tried different browsers and cleared caches. Doesn't help.

Simply adding <TextEdit /> to index.razor page will raise the error:

blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: element.addEventListener is not a function
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: TypeError: element.addEventListener is not a function
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at Object.initialize (http://localhost:55909/_content/Blazorise/blazorise.js:192:21)
...

My setup: Clean new Blazor Client project (vs 2019 template) Installed Blazorise + Blazorise.Bootstrap from nuget (0.8.8.2 version)

My _index.html head section

   <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
    <script src="_content/Blazorise/blazorise.js"></script>
    <script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
stsrki commented 4 years ago

@esamk Can you show me your index.html or _Host.cshtml file? Or even better create a repro project

esamk commented 4 years ago

@stsrki, here's the index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Blazor app</title>
    <base href="/" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
    <script src="_content/Blazorise/blazorise.js"></script>
    <script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>

    <link href="css/site.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
stsrki commented 4 years ago

I don't see any error in index file. Can you push your project to github?

esamk commented 4 years ago

Here you go:

https://github.com/esamk/BlazorApp1

stsrki commented 4 years ago

So, I think I know whats happening. It's really weird and I have no ides how this happened.

Basically, you are using netstandard2.0 and Blazorise 0.8.8.2 is using netstandard2.1. Thats the first problem. Now here comes the fun part. The NuGet package for 0.8.8.2 also includes Blazorise dll 0.8.7.2 that is running on netstandard2.0. And since your project matches netstandard2.0 it will pull that one instead of latest 0.8.8.2. 🤯

Why NuGet have both versions I really don't know. Probably it was picked from some old build.

I will now try to publish fixed NuGet. Hopefully it will help.

stsrki commented 4 years ago

@esamk I also found how you can handle your project with current Blazorise version. You need to use Blazor 3.1.0-preview4.19579.2 instead of older version 3.1.0-preview2.19528.8. Copy this code to your .csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netstandard2.1</TargetFramework>
    <RazorLangVersion>3.0</RazorLangVersion>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Blazorise" Version="0.8.8.2" />
    <PackageReference Include="Blazorise.Bootstrap" Version="0.8.8.2" />
    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.8.8.2" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.1.0-preview4.19579.2" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.1.0-preview4.19579.2" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.1.0-preview4.19579.2" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.1.0-preview4.19579.2" PrivateAssets="all" />
  </ItemGroup>

</Project>
stsrki commented 4 years ago

I have uploaded new Blazorise 0.8.8.3

esamk commented 4 years ago

@stsrki

No luck. I made the project file changes and also updated the nuget packages. Now I've got error in dev tools console: localhost/:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)

I'd rather try another approach. I already updated my blazor template to 3.2:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

As the startup has changed in 3.2, I have to figure out how to configure blazorise. (there is no startup.cs anymore). Do you happen to have code I could paste to Program.cs?

stsrki commented 4 years ago

Here you go:

public class Program
    {
        public static async Task Main( string[] args )
        {
            var builder = WebAssemblyHostBuilder.CreateDefault( args );

            builder.Services
                .AddBlazorise( options =>
                {
                    options.ChangeTextOnKeyPress = true;
                } )
                .AddBootstrapProviders()
                .AddFontAwesomeIcons();

            builder.RootComponents.Add<App>( "app" );

            var host = builder.Build();

            host.Services
                .UseBootstrapProviders()
                .UseFontAwesomeIcons();

            await host.RunAsync();
        }
    }

PS: if you're willing to try, you can also go with Blazorise 0.9-p1. It's still in beta and you can download it from MyGet. But you need to configure nuget package manager.

esamk commented 4 years ago

Still got the same error (with blazor 3.2 and Blazorise 0.8.8.3)

localhost/:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)

I bet this is some simple thing I just seem to be unable to spot right now.
Anyway, I'll need to call it a day. I'll continue tomorrow with fresh eyes and try the beta version from MyGet.

Btw, huge thanks for your help and really quick responses.

esamk commented 4 years ago

Let me reiterate the error and what I've done.

  1. When the error first occurred, my environment was:
Visual Studio 16.4.0 Preview 4.0
.net core SDK 3.1.100-preview3-014645
AspNetCore.Blazor 3.1.0-preview-2.19528.8
Blazorise 0.8.8.2
NetStandard.Library 2.0.3

  1. updated Blazorise to 0.8.8.3.

    • no change. The error still persisted.

  2. updated to NetStandard 2.1 and AspNetCore.Blazor 3.1.0-preview4.19579.2 as per your instructions.

    • got error localhost/:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)
    • this turned out to be a compatibility issue with .net core SDK (but I didn't know that at this point).

  3. updated Blazor template to support NetStandard 2.1

    • dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1
    • still the errorlocalhost/:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)

  4. updated .net core SDK to 3.1.101 (the latest one)

    • the program runs and the original error is gone, but now I've got a new error.
    • when I add a TextEdit component to Index.Razor of a clean, new Blazor project this happens: (to be clear, when I remove the TextEdit, no errors in console).
blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: Could not find 'blazorise' in 'window'.
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Error: Could not find 'blazorise' in 'window'.
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at https://localhost:44378/_framework/blazor.webassembly.js:1:8937
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at Array.forEach (<anonymous>)
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at p (https://localhost:44378/_framework/blazor.webassembly.js:1:8898)
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at https://localhost:44378/_framework/blazor.webassembly.js:1:9605
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at new Promise (<anonymous>)
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at Object.beginInvokeJSFromDotNet (https://localhost:44378/_framework/blazor.webassembly.js:1:9579)
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at _mono_wasm_invoke_js_marshalled (https://localhost:44378/_framework/wasm/dotnet.js:1:166149)
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at wasm-function[6199]:0x1187e2
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at wasm-function[1432]:0x40349
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at wasm-function[635]:0x146fe
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at System.Threading.Tasks.ValueTask`1[TResult].get_Result () <0x20ff9e0 + 0x0002c> in <filename unknown>:0 
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at Blazorise.BaseTextEdit.OnFirstAfterRenderAsync () <0x20a1378 + 0x00102> in <filename unknown>:0 
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at Blazorise.BaseComponent.OnAfterRenderAsync (System.Boolean firstRender) <0x20a06f8 + 0x000ec> in <filename unknown>:0 
l.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x20b7c10 + 0x000c2> in <filename unknown>:0
esamk commented 4 years ago

I pushed the test project to github: (https://github.com/esamk/BlazorApp3)

esamk commented 4 years ago

Attempted to test the new beta. Blazorise MyGet feed at https://www.myget.org/feed/Packages/blazorise gives an error:

[Blazorise MyGet] 'doctype' is an unexpected token. The expected token is 'DOCTYPE'. Line 1, position 3.

The package manager does not show any packages. Dismissing the error doesn't help.

stsrki commented 4 years ago

Tried your project. You forgot to add:

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
esamk commented 4 years ago

Embarrassing, but now it works :) Thanks.