javascript - magnificPopup is not working with webpack - Stack Overflow

I have installed magnificPopup via "npm i magnific-popup" mand after that imported it in the app.js file. But in the browser console it shows (magnificPopup is not a function )

app.js

import $ from "jQuery";
window.$ = window.jQuery = $;
import "magnific-popup";

$(document).ready(function() {
    $('.play-btn').magnificPopup({ type: 'video' });

});

webpack.config.js

var path = require("path");
var webpack = require('webpack');


module.exports = {
    entry: {
        app: "./app/assets/scripts/app.js",
        vendor: "./app/assets/scripts/vendor.js"
    },
    output: {
        path: path.resolve(__dirname, "./app/temp/scripts"),
        filename: "[name].js"
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["es2015"]
                    }
                }
            }

        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        }),
    ]
}

I have installed magnificPopup via "npm i magnific-popup" mand after that imported it in the app.js file. But in the browser console it shows (magnificPopup is not a function )

app.js

import $ from "jQuery";
window.$ = window.jQuery = $;
import "magnific-popup";

$(document).ready(function() {
    $('.play-btn').magnificPopup({ type: 'video' });

});

webpack.config.js

var path = require("path");
var webpack = require('webpack');


module.exports = {
    entry: {
        app: "./app/assets/scripts/app.js",
        vendor: "./app/assets/scripts/vendor.js"
    },
    output: {
        path: path.resolve(__dirname, "./app/temp/scripts"),
        filename: "[name].js"
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["es2015"]
                    }
                }
            }

        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        }),
    ]
}

• javascript
• jquery
• webpack
• magnific-popup

Share Improve this question Follow edited May 22, 2018 at 8:16 Shifut Hossain asked May 22, 2018 at 7:50 Shifut HossainShifut Hossain 1,71933 gold badges1616 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I've fixed the problem

jQuery doesn't need to import in app.js

After fixing app.js file looks like this

import "magnific-popup";

$(document).ready(function() {
    $('.play-btn').magnificPopup({ type: 'video' });

});

Its simple, your files are not on the import location. Please check your path or file location/position once. Moreover please check your JQuery library if that included then it should be above this library files/code.