How do I include bootstap.js file to bundle?

Question

1.00/5 (1 vote)

See more:

Inside scripts folder's bootstrap.js not happening include on bundle. Showing error message inside layout page while runtime.

This is the code inside BundleConfig page:

C#

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                     "~/Scripts/jquery-{version}.js"));

         bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                     "~/Scripts/jquery.validate*"));

         // Use the development version of Modernizr to develop with and learn from. Then, when you're
         // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
         bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                     "~/Scripts/modernizr-*"));

         bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"));

         bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                   "~/Content/site.css"));

This is the code inside layout page:

@Scripts.Render("~/bundles/bootstrap")

error showing:

System.NullReferenceException: 'Object reference not set to an instance of an object.'

Please find below the link of error page image

error image

What I have tried:

I changed the bundles/bootstrap to bundles/Scripts then project run without any error.

C#

bundles.Add(new ScriptBundle("~/bundles/scripts")
                .Include("~/Scripts/jquery-{version}.js")
                .Include("~/Scripts/jquery.validate*")
                .Include("~/Scripts/bootstrap.js")
        );

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/bootstrap.css",
                "~/Content/site.css"));

But the MVC header menu design get broken.

How can I solve the problem?

Posted 12-Jul-21 23:05pm

Member 12955507

Updated 24-Nov-21 10:14am

PIEBALDconsult

v4

Add a Solution

Comments

Nono Calero 15-Jan-22 6:59am

I don't know why the boostrap team are include the @ in the javascript code, that is having conflict in the razor pages.

3 solutions

Solution 2

After updating to Bootstrap 5,
.Include("~/Scripts/bootstrap.js") this line is not allowed.
Remove this line and it works fine.

Posted 7-Aug-21 9:26am

Member 13755870

Solution 4

I don't know why the boostrap team are include the @ in the javascript code, that is having conflict in the razor pages.

Posted 15-Jan-22 0:59am

Nono Calero

Updated 20-Apr-22 12:28pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-07-12T23:18:00

Solution 1

Quote:

Razor

@Scripts.Render("~/bundles/bootstrap")

Look at your BundleConfig.cs file - the bundles you have registered are:

"~/bundles/jquery"
"~/bundles/jqueryval"
"~/bundles/modernizr"
"~/bundles/Scripts"
"~/Content/css"

There is no bundle registered for ~/bundles/bootstrap.

Either change the bundle path to match the Render call, or change the Render call to match the registered bundle path.

Posted 12-Jul-21 23:18pm

Richard Deeming

Comments

Member 12955507 13-Jul-21 5:22am

I have added bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js")); inside BundleConfig.cs but still the error raising

Richard Deeming 13-Jul-21 5:27am

Did you recompile after changing the bundles file?

Does the bootstrap.js file exist in the ~/scripts/ folder?

Member 12955507 13-Jul-21 5:56am

Yes dear. It is there. I don't know what is the reason behind this. I googled like " @Scripts.Render("~/bundles/bootstrap") showing Object reference not set to an instance of an object" But didn't get any result related to my problem.

Richard Deeming 13-Jul-21 5:58am

If you click on the "View details" link, what's the full stack trace of the exception?

It's possible that the bundler & minifier package is struggling to minify the Bootstrap JS file.

Member 12955507 13-Jul-21 6:08am

Here is the view details page kindly check it error image

Richard Deeming 13-Jul-21 6:00am

Here's one example where newer JS syntax caused a NullReferenceException in the bunder:
Visual Studio Feedback[^]

Member 12955507 13-Jul-21 6:08am

Ok. I will check it. Thank you