Rails6集成stimulus-autocomplete报Module parse failed错误排查

Rails 6 默认的 Webpacker + Babel 配置会跳过node_modules目录下的文件转译，而当前引入的是stimulus-autocomplete包src目录下的未编译源码，源码中使用的ES类静态字段语法（static targets/static classes/static values）没有对应的loader处理，直接触发模块解析失败报错。

直接引入包内已经预编译完成的生产构建产物，跳过源码解析步骤：

1. 打开app/javascript/controllers/index.js文件，修改stimulus-autocomplete的导入语句

// 替换原有导入行
// import { Autocomplete } from 'stimulus-autocomplete'
import Autocomplete from 'stimulus-autocomplete/dist/stimulus-autocomplete.esm.js'

2. 清理Webpack缓存后重启开发服务

bin/rails webpacker:clobber
bin/rails s

如果上述方案引入后出现其他兼容问题，可以调整Babel配置，让构建工具主动转译stimulus-autocomplete的源码：

1. 安装缺失的Babel语法插件

yarn add @babel/plugin-proposal-class-properties --dev

2. 修改项目根目录下的babel.config.js文件，把stimulus-autocomplete加入Babel转译白名单

module.exports = function(api) {
  api.cache(true)

  return {
    presets: [
      ['@babel/preset-env', {
        targets: "defaults"
      }]
    ],
    plugins: [
      '@babel/plugin-proposal-class-properties'
    ],
    // 排除node_modules时保留stimulus-autocomplete不被跳过
    exclude: /node_modules\/(?!stimulus-autocomplete)/
  }
}

3. 清理Webpack缓存后重启服务即可生效。

修复完成后，在页面添加符合控制器约定的DOM结构即可正常使用自动补全组件：

<div data-controller="autocomplete">
  <input type="text" data-autocomplete-target="input" />
  <input type="hidden" data-autocomplete-target="hidden" />
  <ul data-autocomplete-target="results"></ul>
</div>

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