Open Closed

Error while trying to integrate third-party JS library with ABP Blazor WASM #4045


User avatar
0
ccernat created
  • ABP Framework version: v6.0.1
  • UI type: Blazor wasm
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

Hello, Support Team!

Thank you for all the hard work that you are doing!

I have a problem integrating a third-party JS library into the Blazor wasm project of the ABP Framework template app.

I will start by saying that with the standard Blazor WASM template from Visual Studio works like a charm.

Index.html:

.razor file:

.razor.cs file:

I've created a folder js and a js file under root:

Whatever I do in ABP Framework Blazor template I get the error bellow and no component rendering in the UI:

As apposed to Blazor WASM app from standard Visual Studio template which works by doing the exact same things:

The steps are exactly the same.

What could have gone wrong in the ABP app? Did I miss something that should be configured which is purely related to ABP internals?

Any tips / help appreciated.

Tks alot!

PS:

Trying to use blockcode in the editor, when posting, will get you the dreaded "You have been blocked page!". When I got it I imagined FBI descending on ropes on top on my head for doing je ne sais quoi. Maybe its worth investigating more.


5 Answer(s)
  • User Avatar
    0
    ccernat created

    Hello!

    Any updates on this?

    Thank you.

  • User Avatar
    0
    ccernat created

    Hello again!

    Someone help, please? :)

    Tks.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Can you provide a simple project that can reproduce the problem with me? thanks. shiwei.liang@volosoft.com

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You need to put the https://unpkg.com/survey-jquery/survey.jquery.min.js" reference after <!--/ABP:Scripts--> and remove https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js.

    It looks like this:

    Remove context.Add("./js/survey.js"); from JavaScriptLibraryBlazorBundleContributor and run the abp bundle command.

    The last thing is you try using $("#surveyContainer") element, but there is no element with id surveyContainer on your page.

  • User Avatar
    0
    ccernat created

    Works perfectly!

    Tks alot.

    PS. The problem was indeed the placement of the survey.jquery.min.js!

Made with ❤️ on ABP v9.1.0-preview. Updated on December 13, 2024, 06:09