5

I still have a few dependencies on jQuery. With Rails 6 and Webpack it's required to expose jquery otherwise errors occur. I have been using expose-loader 1.0.3 for some time without issue but, if I upgrade to expose-loader 2.0.0 or 3.0.0 I get:

ERROR in ./node_modules/jquery/dist/jquery.js
Module build failed (from ./node_modules/expose-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/drama/Sites/FlightRecord/node_modules/expose-loader/dist/index.js:19:24)
ℹ ｢wdm｣: Failed to compile.

There are a few blog posts regarding this issue, but all center around the formatting of associated syntax in environment.js... I've tried several different syntax stylings and they all result in the same error.

With expose-loader 1.0.3 I simply add the following in environment.js to expose jQuery:

environment.loaders.append("jquery", {
  test: require.resolve("jquery"),
  use: [
    { loader: "expose-loader", options: { exposes: ["$", "jQuery"] } }
  ],
});

This same syntax results in the error above if used with expose-loader >= 2. So, it seems the unhappy code lies in the environment.loaders.append call. I've read the Changelog, and the docs, and stackoverflow, and blogs...but, nothing I try seems to satisfy the new expose-loader.

For now, I'm back to just using 1.0.3...but I would like to conquer this and get 3.0.0 working.

How do I expose jQuery for Webpacker in Rails 6.1 using expose-loader 3.0.0?

My environment.js file contains the folling:

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    Rails: ['@rails/ujs'],
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  })
)

environment.loaders.append("jquery", {
  test: require.resolve("jquery"),
  use: [
    { loader: "expose-loader", options: { exposes: ["$", "jQuery"] } }
  ],
});
hellion
  • 4,602
  • 6
  • 38
  • 77

1 Answers1

0

You don't need expose-loader anymore, to load jQuery.

Add to config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  );
Sergii Chub
  • 107
  • 1
  • 3