How to use JQuery plugin with other plugins

[adueck]

I apologize if this is an obvious question, but unfortunately I need to use JQuery for an external rich text editor.

I am able to use the following plugin by itself with this setup:

//next.config.js

const webpack = require('webpack')

module.exports = {
    webpack: (config, { dev }) => {
        config.plugins.push(
            new webpack.ProvidePlugin({
                '$': 'jquery',
                'jQuery': 'jquery',
            })
        )
        return config
    }
}

But I have not been able to include the webpack JQuery plugin in my list of other plugins below.

const withPlugins = require("next-compose-plugins");
const withTypescript = require('@zeit/next-typescript');
const withCSS = require('@zeit/next-css');

module.exports = withPlugins([withTypescript, withCSS]);

Any help would be greatly appreciated.

[cyrilwanner]

Hi @adueck
With the nextConfiguration parameter mentioned in the Usage Section, you can pass in any config which you had before using this plugin. So I think in your case, it should look something like this:

module.exports = withPlugins([withTypescript, withCSS], {
    webpack: (config, { dev }) => {
        config.plugins.push(
            new webpack.ProvidePlugin({
                '$': 'jquery',
                'jQuery': 'jquery',
            })
        )
        return config
    }
});

Please tell me if you still have problems with it, I'll then try to debug your specific case :)

[adueck]

Perfect. Works great, thank you! 👍