Unhandled exception rendering component: $ is not a function

RonSijm commented 2 years ago

I was trying to use this library. I have the .js referenced in my index.html,

Using it like so:

<JsonViewer @ref="JsonViewerInstance"></JsonViewer>

@code
{
    protected JsonViewer JsonViewerInstance { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JsonViewerInstance.Render(JsonConvert.SerializeObject(@User.Value));
        await base.OnAfterRenderAsync(firstRender);
    }

}

I'm getting the following error:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: $ is not a function
      TypeError: $ is not a function
          at Object.JsonViewer (https://localhost:10001/_content/Texnomic.Blazor.JsonViewer/scripts/JsonViewer.js:9:13)
          at https://localhost:10001/_framework/blazor.webassembly.js:1:3332
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:10001/_framework/blazor.webassembly.js:1:3306)
          at Object.St [as invokeJSFromDotNet] (https://localhost:10001/_framework/blazor.webassembly.js:1:59849)
          at _mono_wasm_invoke_js_blazor (https://localhost:10001/_framework/dotnet.6.0.2.jez5zq7uy0.js:1:194973)
          at wasm://wasm/00970812:wasm-function[219]:0x1a129
          at wasm://wasm/00970812:wasm-function[167]:0xcaf7
          at wasm://wasm/00970812:wasm-function[166]:0xba0a
          at wasm://wasm/00970812:wasm-function[2810]:0xabacf
Microsoft.JSInterop.JSException: $ is not a function
TypeError: $ is not a function
    at Object.JsonViewer (https://localhost:10001/_content/Texnomic.Blazor.JsonViewer/scripts/JsonViewer.js:9:13)
    at https://localhost:10001/_framework/blazor.webassembly.js:1:3332
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:10001/_framework/blazor.webassembly.js:1:3306)
    at Object.St [as invokeJSFromDotNet] (https://localhost:10001/_framework/blazor.webassembly.js:1:59849)
    at _mono_wasm_invoke_js_blazor (https://localhost:10001/_framework/dotnet.6.0.2.jez5zq7uy0.js:1:194973)
    at wasm://wasm/00970812:wasm-function[219]:0x1a129
    at wasm://wasm/00970812:wasm-function[167]:0xcaf7
    at wasm://wasm/00970812:wasm-function[166]:0xba0a
    at wasm://wasm/00970812:wasm-function[2810]:0xabacf
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Texnomic.Blazor.JsonViewer.JsonViewerBase.Render(String Json)
   at redacted.Main.DebugPage.OnAfterRenderAsync(Boolean firstRender) in c:\redacted\Main\DebugPage.razor:line 32
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Not sure if I'm using it right or if I have add anything else

fyziktom commented 2 years ago

I had same issue. It is caused by missing jQuery before loading of the lib in head of the index.html.

This is modified index.html which works for me:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorApp1.styles.css" rel="stylesheet" />

    <!--Add jQuery first -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Add JsonViewer.js -->
    <script src="_content/Texnomic.Blazor.JsonViewer/scripts/JsonViewer.js" type="text/javascript"></script>
</head>

<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>
</body>

</html>

bluegrassiot commented 1 year ago

I had same issue. It is caused by missing jQuery before loading of the lib in head of the index.html.

This is modified index.html which works for me:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorApp1.styles.css" rel="stylesheet" />

    <!--Add jQuery first -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Add JsonViewer.js -->
    <script src="_content/Texnomic.Blazor.JsonViewer/scripts/JsonViewer.js" type="text/javascript"></script>
</head>

<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>
</body>

</html>

Thank you for posting this!

Texnomic / JsonViewer

Unhandled exception rendering component: $ is not a function #45