Client MatBlazor matbutton could not find init (matblazor was undefined

3.2k Views Asked by At

I am trying to add MatBlazor to my WASM client and I am getting the error:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'matBlazor.matButton.init' ('matBlazor' was undefined).
      Error: Could not find 'matBlazor.matButton.init' ('matBlazor' was undefined).
          at https://localhost:5001/_framework/blazor.webassembly.js:1:1287
          at Array.forEach (<anonymous>)
          at e.findFunction (https://localhost:5001/_framework/blazor.webassembly.js:1:1247)
          at b (https://localhost:5001/_framework/blazor.webassembly.js:1:2989)
          at https://localhost:5001/_framework/blazor.webassembly.js:1:3935
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3908)
          at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:64218)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.1.js:1:190800)
          at do_icall (<anonymous>:wasm-function[10596]:0x194e58)
Microsoft.JSInterop.JSException: Could not find 'matBlazor.matButton.init' ('matBlazor' was undefined).

It was working on .NET Core, but started throwing an error on .Net 5.0.

I must be missing a step or something.

Suggestions?

1

There are 1 best solutions below

2
Darryl Wagoner WA1GON On

The problem turned out to be I forgot to include the MatBlazor links in index.html

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>BlazingShows</title>
  <base href="/" />
  <!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazingShows.Client.styles.css" rel="stylesheet" />
  <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
  <link href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
  <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
  <script src="_content/MatBlazor/dist/matBlazor.js"></script>
</head>