Gridsome项目引入Bootstrap Collapse组件时Webpack构建报错求助

错误原因分析 #

报错并非const关键字解析问题，而是Bootstrap 5源码中使用了ES2021数字分隔符语法（如1_000_000），而你的Gridsome v0.7.x项目默认Babel配置未支持该语法，导致Webpack无法解析。

解决方法 #

方法一：添加Babel插件支持数字分隔符 #

1. 安装必要的Babel插件：

npm install --save-dev @babel/plugin-proposal-numeric-separator

2. 配置项目Babel规则：
   在项目根目录创建或修改babel.config.js：

module.exports = {
  presets: ['@gridsome/babel-preset-app'],
  plugins: ['@babel/plugin-proposal-numeric-separator']
}

3. 让Webpack转译Bootstrap源码：
   修改gridsome.config.js，添加Webpack配置规则，确保node_modules中的Bootstrap文件被Babel处理：

module.exports = {
  // 保留原有配置
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          include: /node_modules\/bootstrap/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@gridsome/babel-preset-app'],
              plugins: ['@babel/plugin-proposal-numeric-separator']
            }
          }
        }
      ]
    }
  }
}

方法二：引入Bootstrap预编译版本（更简便） #

直接使用Bootstrap官方预编译好的UMD版本，跳过源码转译步骤：

// 替换原有的import语句
import Collapse from 'bootstrap/dist/js/bootstrap.collapse'

注：你已安装@popperjs/core，Bootstrap 5会自动依赖该库，无需额外配置。

额外检查 #

• Node.js v14.18.0本身已支持ES2021语法，但Gridsome的Webpack构建流程依赖Babel转译第三方依赖，因此仍需上述配置。
• 确保@gridsome/babel-preset-app版本与Gridsome v0.7.x兼容，避免版本冲突。

内容的提问来源于stack exchange，提问作者superfive33