Rails 6 + webpack运行报TypeError: this.getOptions is not a function如何解决

一、修复CSS加载失败报错 #

该报错核心原因是sass-loader版本与Webpacker 5.x内置的Webpack 4版本不兼容，按以下步骤操作即可：

• 先删除本地依赖缓存与锁定文件：删除项目根目录下的node_modules文件夹、yarn.lock、package-lock.json
• 在package.json的devDependencies中固定以下兼容版本：

  "sass-loader": "10.1.1",
  "css-loader": "3.6.0",
  "style-loader": "2.0.0"
  

• 重新安装依赖：如果使用yarn执行yarn install，使用npm则执行npm install
• 清理Webpacker缓存：执行rails tmp:cache:clear，再重启Rails服务即可

二、修复jQuery未定义报错 #

该报错由jQuery挂载到全局的顺序错误导致，按以下步骤调整：

• 删掉app/javascript/packs/application.js中多余的global.$('.div')代码行
• 调整jQuery挂载代码的位置，移到所有导入语句的最前方、样式导入之前，调整后完整代码如下：

  import Rails from "@rails/ujs";
  import "@hotwired/turbo-rails";
  import * as ActiveStorage from "@rails/activestorage";
  import "channels";
  import "controllers";
  
  // 先挂载jQuery到全局
  const jQuery = require('jquery')
  global.$ = global.jQuery = jQuery;
  window.$ = window.jQuery = jQuery;
  
  Rails.start();
  ActiveStorage.start();
  
  // 再导入样式和其他依赖jQuery的插件
  import "stylesheets/application.scss";
  

• （可选）也可以直接通过Webpacker的ProvidePlugin自动注入jQuery，无需手动挂载，在config/webpack/environment.js中添加以下配置即可：

  const { environment } = require('@rails/webpacker')
  const webpack = require('webpack')
  
  environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  )
  
  module.exports = environment
  

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