SyntaxError was not caught and an unexpected token export occurred at line 2371 in the popper.js file

I'm a beginner with bootstrap and jquery, and I'm attempting to utilize the datatables feature for sorting. However, when I run my code, I encounter the following error in the console:

uncaught SyntaxError: Unexpected token export at popper.js:2371

The version of my popper.js is 1.14.3 and I include it in my layout like this:

<body>
    @Html.Partial("_navbar")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year -www.vidly.com @*My ASP.NET Application*@</p>
        </footer>
    </div>
 @*   @Scripts.Render("~/bundles/lib")*@
  @Scripts.Render("~/Scripts/jquery-3.3.1.js")
  @Scripts.Render("~/Scripts/DataTables/jquery.dataTables.min.js")
  @Scripts.Render("~/Scripts/DataTables/dataTables.bootstrap4.min.js")

  @Scripts.Render("~/Scripts/popper.js")
  @Scripts.Render("~/Scripts/bootstrap.js")
  @Scripts.Render("~/Scripts/bootbox.js")
  @Scripts.Render("~/Scripts/respond.js")
  @Scripts.Render("~/Scripts/DataTables/jquery.dataTables.js")
  @Scripts.Render("~/Scripts/DataTables/DataTables.bootstrap.js")
    @*@Styles.Render("~/Content/css")*@

    @RenderSection("scripts", required: false)
</body>

Here is https://i.sstatic.net/oqKn9.png the screenshot from my browser. I have two questions: 1. Why am I getting this error:

uncaught SyntaxError: Unexpected token export at popper.js:2371

2. Why are the datatables features like page numbers and sorting methods not displaying correctly in my browser (as shown in the screenshot)? These are my CSS bundles:

 bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap-lumen.css",
                      "~/Content/DataTables/css/dataTables.bootstrap.css",
                      "~/Content/site.css"));

I include it in my _layout like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @*@Scripts.Render("~/bundles/lib")*@
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @Html.Partial("_navbar")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year -www.vidly.com @*My ASP.NET Application*@</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/lib")

    @RenderSection("scripts", required: false)
</body>
</html>

Thanks in advance

javascriptasp.net-mvcdatatablesbootstrap-4popper.js

Answer №1

Encountering an unexpected token export error in popper.js during bundling indicates that the Popper library requires the UMD build version of the corresponding JS file. It seems that the incorrect version is being used here (potentially an ESNext version):

@Scripts.Render("~/Scripts/popper.js")

Importing the UMD version is essential as we aim to import it using the <script> tag generated by the bundling mechanism (System.Web.Optimization), as stated on the official page.

If you intend to import it using a <script> tag, utilize the UMD version.

Here are the steps to use the UMD version with MVC bundling:

1) Obtain the UMD version from the dist package located here: https://unpkg.com/[email protected]/dist/umd/

2) Save the UMD package in the /Scripts/umd folder.

3) In the RegisterBundles() method, create JS bundles with specified paths as shown in the example below:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-*",
    // other jQuery scripts here
));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/umd/popper.js", // set to UMD version
    "~/Scripts/bootstrap.js",
    "~/Scripts/bootbox.js",
    "~/Scripts/respond.js",

    // other Bootstrap scripts here
));

4) Utilize the @Scripts.Render() helper in the layout page to include them (remember that the script order is important):

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

Note: If you are seeking the ESNext version of Popper.js compared to the UMD version, the latter includes a header that the former does not:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Popper = factory());
}(this, (function () {
    // skipped for brevity
})));

The function( global, factory ) allows Popper to be injected into the global scope using a <script> tag reference, which is a potential reason for utilizing the UMD bundle.

Regarding your second issue, it appears that the CSS files are not being included correctly. Consult the Bundling and Minification section for guidance on importing CSS bundles.

For further reference, check out:

How to use Popper.js with Bootstrap 4 beta

popper.js in bootstrap 4 gives SyntaxError Unexpected token export

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delaying loops with JQuery Ajax

I am attempting to implement a delay in my AJAX data processing so that the loop runs a bit slower. Here's the code I'm working with: $(document).ready(function (){ $('#button').click(function(){ $('#hide').show ...

javascriptphpjqueryajax

Issues Persist with Bootstrap Tree View - object passed but no output显示

After going through numerous discussions and solving several issues along the way, I have encountered a major problem where there is no output. As mentioned before, I am utilizing Bootstrap Tree View: To establish the hierarchical structure required for ...

javascriptjsontwitter-bootstrap

Automatically update and reload Express.js routes without the need to manually restart the server

I experimented with using express-livereload, but I found that it only reloaded view files. Do you think I should explore other tools, or is there a way to configure express-livereload to monitor my index.js file which hosts the server? I've come ac ...

javascriptnode.jsexpress

How to optimize the utilization of Javascript variables within a Jquery function?

Currently, I am working on implementing an HTML5 min and max date range function. Initially, I wrote the code using variables and then embedded them in the correct attribute locations. However, after reviewing my code, my client (code reviewer) suggested ...

javascriptjquery

Using the createElement method in React to restart a GIF animation

In my React project, I'm attempting to develop a function that generates a new element displaying a gif for one loop before removing it. My current approach looks like this: function playGif() { var gif = document.createElement('img') ...

javascripthtmlcssreactjs

What is the best way to combine Node.js MySQL tables into a JSON format and transfer the data to the client?

I'm looking for a way to retrieve MySQL related tables as JSON from NodeJS and send it back to the client. For example, let's say I have a 'students' table and a 'studentCountry' table. The 'students' table has a fie ...

javascriptnode.js

Encountered an error while trying to create a new NestJS project using yarn: Command execution failure - yarn install --

Having trouble installing a new NestJs project using yarn. Operating system : Microsoft Windows [version 10.0.19044.3086] Node version : 18.17.1 npm version : 9.6.7 yarn version : 1.22.19 Nest cli version : 10.1.16 I attempted to install by running : npm ...

javascriptnode.jsnpmnestjshadoop-yarn

Encountering a frustrating internal server error 500 when attempting to insert values from JavaScript into SQL Server within Visual Studio

Here is a JavaScript code that calls a C# webmethod: var _data = { '_mStart': document.getElementById("St_Period").value, '_mEnd': document.getElementById("En_Period").value }; $.ajax({ type: "POST", url: "maps.aspx/my ...

c#javascriptjqueryajaxjson

Tips for effectively creating and appending elements using JavaScript

Code Sample var result=$.getJSON("http://search.twitter.com/search.json?callback=?",{q:query}, function(data) { ... question. }); Query: In order to display each tweet result, I want to ...

javascriptjquery

Ensure all <li> tags within a HTML document exhibit consistent jquery mousedown and hover effects, abstaining from the assignment of unique IDs to each

I understand that this approach might not be correct, but I wanted to create a simulation of what I am trying to achieve. Is there a way for each <li> element within a specific <ul class="myul"> to have separate mousedown, mouseout, hover effe ...

javascriptjquery

Traversing an array of objects using D3.js

I'm attempting to create a row of bars that are all the same height and width based on their titles. I have an array of 100 objects, each with a key called results containing another array of 20 objects. This means I should end up with a row of 2000 b ...

javascriptarraysjsonobjectd3.js

The code is not executing properly in the javascript function

Hello there! I've created a basic login form with JavaScript validation, but for some reason, the code below isn't functioning properly. Here is my HTML and JS code: <head> <script type="text/javascript"> function ha ...

javascriptjqueryhtml

AngularJS Accordion Component: A Handy Tool for Organ

I have been trying to implement an Accordion in my angular project by sending HTML structure from a controller. However, despite following the documentation closely, the Accordion is not displaying as expected. Here is a snippet of the code I am using: v ...

javascriptangularjs

Pausing the audio playback with a click of the mouse

As a beginner in front end development, I recently designed a simple website incorporating the Lightbox kit. One functionality I am currently working on is starting an audio track when a user clicks on a thumbnail image. However, I am seeking guidance on h ...

javascriptjqueryhtmlhtml5-audiolightbox

Are asynchronous promises thenable for chaining?

Can someone explain to me how asynchronous chaining works with thenable? I am new to using promises in Node.js and I am a bit confused about the concept. In the code example provided below, it seems like the promise returned from the previous Promise.the ...

javascriptnode.jspromise

A guide on renewing authentication tokens in the Nestjs framework

import { ExtractJwt, Strategy } from 'passport-jwt'; import { AuthService } from './auth.service'; import { PassportStrategy } from '@nestjs/passport'; import { Injectable, UnauthorizedException } from '@nestjs/common&apo ...

javascriptnode.jstypescriptpassport.jsnestjs

Insert a JavaScript object into the rendered HTML using the componentDidMount lifecycle method

I'm trying to incorporate a JavaScript object into the template once the component has mounted for tracking purposes. Here is how I want the object to be rendered: var tracking = { pagename: 'page name', channel: 'lp&ap ...

javascriptreactjstracking

What is the reason for having to add my IP to the white-list daily?

As a beginner, I am delving into the world of back-end development with Node.js, Express.js, and Mongoose for educational purposes. My database is hosted on Atlas-Mongo DB. Initially, everything seemed to be running smoothly as I configured it with the fre ...

javascriptnode.jsmongodbexpressbackend

SWR Fails to Recognize Environment Variables

I'm struggling to utilize ENV variables when using the SWR hook for data fetching. My current approach is as follows: const videoURLWithEnv = `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCwkj9jcrMZCcbcIa6nF5LNQ&ma ...

javascriptreactjsnext.jsswr

Effects of incorporating unnecessary packages on Vue.js performance

In my Vue.js component, I have imported the module useI18n from "vue-i18n" but have not utilized it anywhere within the component. Concerned about how this could affect performance, particularly in terms of bundle size and load times. Will importing a mod ...

javascriptvue.js