Next.js: Import jQuery to next.config.js

[ghost]

Hi,

Is there any way to add a new providerPlugin to the next.config.js file and make a plugin accessible from anywhere in my app.

Example: This is my next.config.js

const webpack = require('webpack');

module.exports = {
  webpack: (config, { dev }) => {

    config.plugins.push(
      new webpack.ProvidePlugin({
        '$': 'jquery',
        jQuery: 'jquery'
      })
    );

    return config
  }
}

And if I try to console.log(jQuery) from my index.js file:

import React from 'react';

module.exports = () =>
  console.log(jQuery);

I still can't access jQuery on the server side, so I get an exception:
ReferenceError: jQuery is not defined

In the end my goal is to import Foundation which has a jQuery dependency and then can't be imported properly in my app.
Thanks for the help!

[arunoda]

@diskokevin Try to do this with a babel plugin.

[diskothibautha]

Here is my workaround for loading foundation:

//next.config.js

const webpack = require('webpack')

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

//index.js

import React from 'react';
import $ from 'jquery';

export default class Index extends React.Component {

    componentDidMount(){
        const foundation = require('foundation-sites');
        $(document).foundation();
    }
}

Work with next.js 2.0.0

[arunoda]

Since @diskothibautha's solution is pretty great, I'm gonna close this.

[ghost]

Thanks @diskothibautha! Amazing ;)

[baruchvlz]

When trying to use @diskothibautha 's solution, I'm running into this little ordeal.

EDIT
Works with jQuery 2.2.4 not 3+