Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
RonSijm opened this issue Mar 9, 2022 · 2 comments
Open

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

RonSijm opened this issue Mar 9, 2022 · 2 comments

Comments

@RonSijm
Copy link

RonSijm commented Mar 9, 2022 •
edited
Loading

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
Copy link

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
Copy link

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!

@naiduv naiduv mentioned this issue Apr 27, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@RonSijm @fyziktom @bluegrassiot