Error encountered while attempting to import a Bootstrap JavaScript file in webpack

I am currently working on a Gridsome project (v0.7.23) where I have loaded the Bootstrap framework via npm. In this project, I am using node v14.18.0 through nvm.

However, when attempting to import a Bootstrap JS component (specifically 'collapse') using the following code:

import Collapse from 'bootstrap/js/src/collapse'

I encounter an issue during webpack build which results in the following error:

Module parse failed: Identifier directly after number (8:17)
You may need an appropriate loader to handle this file type, as currently no loaders are configured to process this file. Refer to https://webpack.js.org/concepts#loaders for more information.
|  */
| 
> const MAX_UID = 1_000_000
| const MILLISECONDS_MULTIPLIER = 1000
| const TRANSITION_END = 'transitionend'

 @ ./node_modules/bootstrap/js/src/collapse.js 8:0-14:21 71:23-45 182:4-10 188:22-44 216:20-30 232:23-45 288:19-41 300:0-18
 @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/gridsome/node_modules/vue-loader/lib??vue-loader-options!./src/components/Nav.vue?vue&type=script&lang=js&
 @ ./src/components/Nav.vue?vue&type=script&lang=js&

It seems like webpack is having trouble parsing or reading the 'const' keyword in the imported file.

Below are the dependencies listed in my package.json file (which are up to date):

"dependencies": {
    "@gridsome/plugin-sitemap": "^0.4.0",
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.1",
    "gridsome": "^0.7.0",
    "gridsome-plugin-gtm": "^0.1.1",
    "gsap": "^3.6.1"
  },
  "devDependencies": {
    "node-sass": "^5.0.0",
    "sass-loader": "^13.2.0",
    "css-loader": "^6.7.2",
    "postcss-loader": "^7.0.2",
    "sass": "^1.56.1",
    "style-loader": "^3.3.1"
  }

If anyone has any insights or possible solutions to this issue, I would greatly appreciate it. Thank you!

javascriptwebpackbootstrap-5gridsome

Answer №1

To implement the desired functionality, simply insert the provided code snippet into your webpack.config.js file within the rules array.

Begin by adding both babel-loader and @babel/preset-react to your devDependencies.

 {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader",
      options: {
        presets: ['@babel/preset-react']
      }
    }
  }

We believe this solution will be beneficial for you...

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

What is the process of creating and customizing popovers in Bootstrap 5 with jquery?

Is there a way to dynamically create and add content to Bootstrap 5 popovers using JavaScript or jQuery? In Bootstrap 3, I used the following method: $('#element').popover({ placement : 'left', trigger : 'focus', html: true } ...

javascriptjquerypopoverbootstrap-5

Showing AngularJS information on Views

After successfully implementing static HTML with views, as shown in this example: https://embed.plnkr.co/MJYSP01mz5hMZHlNo2HC/ I am now facing a challenge with integrating the angular-ui accordion within ng-view. You can view the accordion I am attemptin ...

javascriptangularjsng-viewangularjs-ng-includeng-app

pause in execution between iterations of a for loop

Challenge I'm currently working on a function that processes a list of strings by printing each one on a new line, with CSS animations that gradually display the string over a few seconds. However, I'm struggling to make sure that the next strin ...

javascripthtmlcssarraysinput

Finding specific data with MongoDB's query syntax

I am working with a mongoDB "users" collection in JSON format. My objective is to retrieve all the data where privacy is set to true. How can I accomplish this? { "name" : "Maria Kari", "social" : [ { "facebook" : "www.fb.com/ ...

javascriptnode.jsmongodbmongodb-query

How can I stop full-page auto-scroll screenshot extensions from automatically scrolling?

As the owner of a membership website, I'm faced with the challenge of preventing users from easily taking full page screenshots of the valuable text content in my members area. Many browser extensions, such as Fireshot and GoFullPage, enable auto-scro ...

javascripthtmljquery

JavaScript: Creating an array of images from a directory

I've encountered a problem that has proven to be more complex than expected - I am struggling to find resources related to my specific question. My goal is to store 36 images from a folder on my computer into an array using Javascript. Below, you will ...

javascriptarraysimagepath

Passing parent HTML attributes to child components in Angular 2

Is there a way to pass HTML attributes directly from parent to child without creating variables in the parent's .ts class first? In the sample code below, I am trying to pass the "type=number" attribute from the parent to the app-field-label component ...

javascriptangularangular2-formsangular2-directives

Retrieve custom content from a database using Laravel and Ajax when clicking on a navigation bar

Recently, I've started working with Laravel 7 and AJAX. One of the features I want to implement is a 'product's name' navbar that displays product details in a div without refreshing the page when clicked. I came across a demo showcasin ...

javascriptjqueryajaxlaravellaravel-blade

Determine the cost for every individual line

I need help figuring out how to calculate the price for each row. Whenever I choose a quantity, it's showing the same price for both rows. Check out my demo here: https://jsfiddle.net/keyro/fw8t3ehs/2/ Thank you in advance! HTML: <table class=" ...

javascriptjquery

Strategies for bypassing Jquery form validation within a single form element

I want to implement form validation for all form elements, but I need to exempt one if a specific checkbox is checked. HTML <form id="reg_form"> <div class="control-group"> <div class="control"& ...

javascriptjqueryjquery-validate

What is the best way to combine two arrays into a single array using AngularJS?

Here is a code snippet: $scope.studentDetails=[]; $scope.studentDetails=[0][id:101,name:one] [1][id:102,name:two] [2][id:103,name:three] $scope.studentMarks=[]; $scope.studentMarks=[0][id:101,marks:78] ...

javascriptangularjsunderscore.js

Progress bar carousel component based on advancement movements

Here is the mockup I am working with: https://i.sstatic.net/bIepQ.png So far, I have made good progress with this code: https://codesandbox.io/s/codepen-with-react-forked-16t6rv?file=/src/components/TrendingNFTs.js However, I am facing a couple of challe ...

javascripthtmlcssreactjs

Is it possible to use multiple schemas for one collection name?

I am currently working on creating different schemas for a single collection, such as User or subUser. I aim to store both User and subuser data in the same collection but with different schemas. Here is an example of my schema file: export const AryaSchem ...

javascriptnode.jsmongodbmongoosenestjs

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

Dynamically showcasing content in an HTML table

Having trouble with this code snippet. It's supposed to iterate through array objects and display them in an HTML table. The third row should have buttons, but nothing is showing up. Can you spot the issue? Here's the HTML code: <html> & ...

javascripthtmlhtml-table

Error: AJAX responseText Mismatch detected

When I make an AJAX call in my code, everything seems to be working correctly. The PHP script responds with "success" when it should, and the response text is indeed "success". However, even though the output appears to be correct, the line if(returnVal == ...

javascriptphpjqueryajax

The functionality of json_encode seems to vary when applied to different PHP arrays, as it successfully encodes data for

My current challenge involves importing three arrays from PHP into JS using json_encode. Below is the code snippet I am currently working on: <?php $query2 = "SELECT * FROM all_data"; $result2 = $conn->query($query2); $bu = []; ...

javascriptphpmysqljsonmariadb

When starting a new project with Angular 7, the option to set up routing is automatically included without asking for confirmation

After switching from Angular 6 to version 7, I encountered an issue while creating a new project in CLI using ng new [app-name]. It simply starts without giving me the option to include routing or styling in my project. Just a heads up, I am currently run ...

javascriptangularnpmcommand-line-interfaceangular7

Having trouble with your mobile dropdown menu not responding to clicks?

I'm having trouble getting a dropdown menu to work on the mobile version of my website. When I click on the dropdown menu image, it's supposed to appear, but it's not working as expected. JSFiddle: https://jsfiddle.net/xfvjv184/ Included ...

javascriptjqueryhtmlcssdrop-down-menu

Creating a custom Angular HTTP interceptor to handle authentication headers

Necessity arises for me to insert a token into the 'Authorization' header with every HTTP request. Thus, I created and implemented an HttpInterceptor: @Injectable() export class TokenInterceptor implements HttpInterceptor { constructor(public ...

javascriptangulartypescriptangular-http-interceptors