twitter-bootstrapblazorlibman

Need Assistance With Blazor and LibMan to install Bootstrap and associated components (i.e., Popper and jQuery)

I am working on a Blazor project in which I am using Bootstrap; which, of course, requires jQuery and Popper for the tooltips and popovers to work.

Originally, I just "manually" downloaded the required files:

and put them where they need to go:

The structure of wwwroot looked like this:

/wwwroot
|
|- css/
|  |
|  |- bootstrap/
|  |
|  `- site.css
|
|- images/
|
`- js/
   |
   |- bootstrap/
   |
   |- jquery/
   |
   |- popper/
   |
   |- BootstrapJavascript.js
   |
   `- JavaScript.js

However, the "powers that be" have decided they would like to make this more efficient and automatic, so I now need to use LibMan to install everything, and I am using this method:

Solution Explorer -> Project -> Add -> Client-Side Library...

So, everything went smoothly when installing, however I am having trouble with Popper. After installing, wwwroot now looks like this:

/wwwroot
|
|- css/
|  |
|  |- bootstrap*.*
|  |
|  `- site.css
|
|- images/
|
|- js/
|  |
|  |- bootstrap*.*
|  |
|  |- cjs/
|  |
|  |- esm/
|  |
|  |- umd/
|  |
|  `- BootstrapJavascript.js
|
`- scss/

And I am receiving errors indicating that the application cannot find certain libraries or components of libraries.

Originally, when using LibMan to install Popper, LibMan wanted to put Popper here:

wwwroot/lib/popper.js/

However, I elected to put Popper in:

wwwroot/js/

Also, on Bootstraps website, they instruct to pre-load the ability to use tooltips and popovers like this:

// For Bootstrap's Tooltips
// https://getbootstrap.com/docs/5.2/components/tooltips/
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))


// For Bootstrap's Popovers
// https://getbootstrap.com/docs/5.2/components/popovers/
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Which I have in my BootstrapJavascript.js file.

Some of the errors I am getting:

ReferenceError: exports is not defined
    at https://localhost:5003/js/cjs/popper.js:7:23

Error at App.razor:line 48, which is in here:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/cjs/popper.js"); // THIS IS LINE #48
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/bootstrap.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/BootstrapJavaScript.js");
    }
}

The application was working "perfectly" when I was hand installing Bootstrap, Popper, and jQuery, now it is not.

What do I need to do to get this working like when I was hand-installing?

EDIT:

libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.6.1",
      "destination": "wwwroot/js/jquery/"
    },
    {
      "library": "popper.js@2.11.6",
      "destination": "wwwroot/js/popper/"
    },
    {
      "library": "twitter-bootstrap@5.2.2",
      "destination": "wwwroot/"
    }
  ]
}

App.razor

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/jquery/jquery.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/popper/cjs/popper.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/bootstrap.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/BootstrapJavaScript.js");
    }
}

_Host.cshtml:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="~/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>

...

    </div>
    <script>
        var blackpearlScript = document.createElement('script');
        blackpearlScript.setAttribute('src', '/js/JavaScript.js');
        document.head.appendChild(blackpearlScript);
    </script>
</body>
Solution

  • First, I don't know why you put your js files in App.razor, I think it is better ot add them in your MainLayout.razor or _Host.cshtml: 

    <script src="~/lib/jquery/jquery.min.js"></script>

    Second, I don't think that you need to include Popper because Bootstrap has already this library in bootstrap.bundle.js, see this link. You can add this file like this:

    Solution Explorer -> right click on Project -> Add -> Client-Side Library -> twitter-bootstrap -> choose specific files -> js -> bootstrap.bundle.min.js.

    Please note that the files will be added in lib folder, if you want to change the location, then you need to change your libman.json and I don't think that necessary to change location, just keep them in libfolder.

    Then, your script in MainLayout.razor or _Host.cshtml will be:

    <script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/js/BootstrapJavaScript.js"></script>