Webpacker: 2.x to 3.x : how to load plugins in new config (like jQuery, Popper...) ?

[kikan]

I have a working app I'd like to migrate from webpacker 2.x to 3.x, and I load plugins in shared.js via ProvidePlugin :

  plugins: [
    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
    new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
    new ManifestPlugin({
      publicPath: output.publicPath,
      writeToFileEmit: true
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
      'window.Tether': "tether",
      Popper: ['popper.js', 'default'],
      ActionCable: 'actioncable',
      Vue: 'vue',
      VueResource: 'vue-resource',
    })
  ],

and I resolve things :

  resolve: {
    extensions: settings.extensions,
    modules: [
      resolve(settings.source_path),
      'node_modules'
    ],
    alias: {
      jquery: "jquery/src/jquery",
      vue: "vue/dist/vue.js",
      vue_resource: "vue-resource/dist/vue-resource",
    }
  },

What is the best new place to do this in the new config syntax ?

[gauravtiwari]

// config/webpack/development.js
const { environment } = require('@rails/webpacker')

// Add an ProvidePlugin 
environment.plugins.set('Provide',  new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
      'window.Tether': "tether",
      Popper: ['popper.js', 'default'],
      ActionCable: 'actioncable',
      Vue: 'vue',
      VueResource: 'vue-resource',
    })
)

const config = environment.toWebpackConfig()

config.resolve.alias = {
      jquery: "jquery/src/jquery",
      vue: "vue/dist/vue.js",
      vue_resource: "vue-resource/dist/vue-resource",
    }

// export the updated config
module.exports = config

[kikan]

Thanks, but how can I then use something like $('h1').hide() (basic example). I don't get it.

[gauravtiwari]

@kikan That should work out the box after you have migrated the config.

So, under your packs/application.js you can reference $ or vue etc. that are defined globally using ProvidePlugin

1. Another way is to use es6 import syntax if you don't want to use provide plugin but I guess plugin is simpler you don't need to import again:

import * as Turbolinks from 'turbolinks'
import * as $ from 'jquery'

// Start turbolinks
Turbolinks.start()

makes sense?

[kikan]

Yes ! It works ! Thank you very much for your time and your good feedback.

[rossta]

@gauravtiwari Thanks for the example—do you mean to export config after modifying?

[gauravtiwari]

@rossta Oh yes, fixed it 👍 thanks 🍰

[kikan]

Sorry for my newbie question, but in the example, when I modules.export = config, I get this :

module.exports = environment.toWebpackConfig()
                             ^
TypeError: environment.toWebpackConfig is not a function

whereas when I module.exports = environment, it works.

And, btw, I had to add this in top of file :

const webpack = require('webpack')

I'm I missing something ?

[gauravtiwari]

@kikan Pushed an example here: https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration

[kikan]

That's great 😁 ! Thanks a lot.

[LeoArouca]

Hi,

I am also migrating from shared.js to the new 3.x. I tried the example above from @gauravtiwari but I keep getting :
`environment.plugins.set('Provide', new webpack.ProvidePlugin({
^

TypeError: environment.plugins.set is not a function`

When I try to run ./bin/webpack-dev-server

If I use the prepend option as per the docs, all the assets fail (even though webpack compiles with no errors).

Any ideas?

[iToshk]

@LeoArouca I got the same error, and I hope this is the answer. ↓
https://stackoverflow.com/questions/49107725/i-got-webpacker-error-when-running-the-rails-app-typeerror-environment-plugin

[gauravtiwari]

@LeoArouca @iToshk set is deprecated and removed in 3.3. Please either use append or prepend - see loaders and plugins section in documentation.