title: Rails 6 + webpack: TypeError: this.getOptions is not a function
body: <p>I am struggling the whole day with this error:</p>
  <pre><code>Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  TypeError: this.getOptions is not a function
      at Object.loader (:3000/Users/adam/rubydev/qualifyr/node_modules/sass-loader/dist/index.js:25)
      at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss (index.js:34)
      at __webpack_require__ (bootstrap:63)
      at Object../app/javascript/stylesheets/application.scss (application.scss:2)
      at __webpack_require__ (bootstrap:63)
      at Module.&lt;anonymous&gt; (application.js:1)
      at Module../app/javascript/packs/application.js (application.js:21)
      at __webpack_require__ (bootstrap:63)
      at bootstrap:198
      at bootstrap:198
  ./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss @ index.js:34
  __webpack_require__ @ bootstrap:63
  ./app/javascript/stylesheets/application.scss @ application.scss:2
  __webpack_require__ @ bootstrap:63
  (anonymous) @ application.js:1
  ./app/javascript/packs/application.js @ application.js:21
  __webpack_require__ @ bootstrap:63
  (anonymous) @ bootstrap:198
  (anonymous) @ bootstrap:198
  
  Uncaught ReferenceError: jQuery is not defined
      at jquery.inputmask.bundle.js:1554
  </code></pre>
  <p>when I run the Rails 6 application, the app starts without loading the CSS. The error above is copied from the JS console.</p>
  <p>The <code>package.json</code> looks like this:</p>
  <pre><code>{
    &quot;name&quot;: &quot;myapp&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@hotwired/turbo-rails&quot;: &quot;^7.0.0-beta.5&quot;,
      &quot;@rails/actioncable&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/activestorage&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/ujs&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/webpacker&quot;: &quot;5.2.1&quot;,
      &quot;@tailwindcss/forms&quot;: &quot;^0.3.2&quot;,
      &quot;@tailwindcss/postcss7-compat&quot;: &quot;^2.0.4&quot;,
      &quot;autoprefixer&quot;: &quot;^9&quot;,
      &quot;el-transition&quot;: &quot;^0.0.7&quot;,
      &quot;google-maps&quot;: &quot;^4.3.3&quot;,
      &quot;jquery&quot;: &quot;^3.6.0&quot;,
      &quot;jquery-ui&quot;: &quot;^1.12.1&quot;,
      &quot;postcss&quot;: &quot;^7&quot;,
      &quot;stimulus&quot;: &quot;^2.0.0&quot;,
      &quot;tailwindcss&quot;: &quot;npm:@tailwindcss/postcss7-compat&quot;
    },
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;devDependencies&quot;: {
      &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;
    }
  }
  </code></pre>
  <p>Here's <code>app/javascript/pack/application.js</code>:</p>
  <pre><code>import Rails from &quot;@rails/ujs&quot;;
  import &quot;@hotwired/turbo-rails&quot;;
  import * as ActiveStorage from &quot;@rails/activestorage&quot;;
  import &quot;channels&quot;;
  import &quot;controllers&quot;;
  
  Rails.start();
  ActiveStorage.start();
  
  import &quot;stylesheets/application.scss&quot;;
  
  var jQuery = require('jquery')
  global.$('.div')
  global.$ = global.jQuery = jQuery;
  window.$ = window.jQuery = jQuery;
  </code></pre>
  <p>Node version:</p>
  <pre><code>node-v
  v14.18.1
  </code></pre>
  <p>Locked versions:</p>
  <pre><code>Webpacker (`@rails/webpacker`): 5.2.1
  `css-loader` is not in `package-lock.json`, but in `yarn.lock` is `css-loader &quot;^3.5.3&quot;`
  `style-loader` is &quot;^1.2.1&quot;
  `&quot;sass-loader&quot;` is  &quot;^8.0.2&quot;
  </code></pre>
  <p>It's gradually driving me crazy. I tried different version of packages, different setups, however, nothing seems to be working.</p>
  <p>Any idea how to solve this issue?</p>