Closed noppud closed 4 years ago
The browser caches local js files thinking it wasn't changed. Try hitting ctrl+F5.
Tried that and using a different browser, still getting the same error.
Can you show me the content of your index.html or _Host.cshtml file?
@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
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.
Thank you! Works.
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>
@esamk Can you show me your index.html or _Host.cshtml file? Or even better create a repro project
@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>
I don't see any error in index file. Can you push your project to github?
Here you go:
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.
@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>
I have uploaded new Blazorise 0.8.8.3
@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?
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.
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.
Let me reiterate the error and what I've done.
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
updated Blazorise to 0.8.8.3.
updated to NetStandard 2.1 and AspNetCore.Blazor 3.1.0-preview4.19579.2 as per your instructions.
localhost/:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)
updated Blazor template to support NetStandard 2.1
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1
localhost/:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)
updated .net core SDK to 3.1.101 (the latest one)
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
I pushed the test project to github: (https://github.com/esamk/BlazorApp3)
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.
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>
Embarrassing, but now it works :) Thanks.
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: