尝试加载 Bootstrap js 文件时出现 webpack 错误

Question

I have a gridsome project (v0.7.23). I load the Bootstrap framework via npm. Im using node v14.18.0 via nvm.

When I import a Bootstrap JS component (collapse):

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

webpack fails to build and returns this error:

Module parse failed: Identifier directly after number (8:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| 
> 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's like webpack was not able to parse/read the const keyword.

Here is my package.json dependencies (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"
  }

Any idea? thanks

Answer 1

you just need to add following code in your webpack.config.js file in rules array.

first add babel-loader and @babel/preset-react in your devDepencies

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

hope this will help you...