Created a Web-Assembly project and added Blazorize to my project per the instructions and it works without errors. Runtime Exception occurs after adding this component Addon:
<Addons>
<Addon AddonType="AddonType.Start">
<AddonLabel>@@</AddonLabel>
</Addon>
<Addon AddonType="AddonType.Body">
<TextEdit Placeholder="Username" />
</Addon>
</Addons>
It renders on the page as such
but debug output reports this exception:
Unhandled exception rendering component: Could not find 'blazorise.textEdit.initialize' ('blazorise' was undefined).
Error: Could not find 'blazorise.textEdit.initialize' ('blazorise' was undefined).
at http://localhost:5000/_framework/blazor.webassembly.js:1:288
at Array.forEach (<anonymous>)
at r.findFunction (http://localhost:5000/_framework/blazor.webassembly.js:1:256)
at w (http://localhost:5000/_framework/blazor.webassembly.js:1:2414)
at http://localhost:5000/_framework/blazor.webassembly.js:1:3267
at new Promise (<anonymous>)
at Object.beginInvokeJSFromDotNet (http://localhost:5000/_framework/blazor.webassembly.js:1:3248)
at Object.ut [as invokeJSFromDotNet] (http://localhost:5000/_framework/blazor.webassembly.js:1:53981)
at _mono_wasm_invoke_js_blazor (http://localhost:5000/_framework/dotnet.6.0.0-preview.7.21377.19.js:1:191287)
at <anonymous>:wasm-function[2545]:0x7e724
Why?
Code
Index.html
Head
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>STRTRK.App</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="STRTRK.App.Client.styles.css" rel="stylesheet" />
<!--Blazorize-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 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" />
Body
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src ="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src ="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src ="_content/Blazorise/blazorise.js"></script>
_Imports.razor
...
@using Blazorise
...
Program.cs
builder.Services
.AddBlazorise(options => { options.ChangeTextOnKeyPress = true;})
.AddBootstrapProviders()
.AddFontAwesomeIcons();
builder.Services.AddSingleton
(new HttpClient {
BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});
Visual Studio
| -WWWRoot- | -Nuget- |
|---|---|
 |
 |
Blazorize Github
Similar error reported on Blazorize's Github repository:
blazorise.button.initialize ('blazorise' was undefined). #2245