Owlcarousel2: can't load owl with webpack

[tarponjargon]

I followed the instructions in the readme to install owl:

npm install owl-carousel --save-dev

Included this in the plugins section of webpack.config.js:

            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery"
            }),

and added this to my entry file (index.js)

import "jquery";
import "bootstrap";
import "owl.carousel";

but it's not finding it. when I try to build I get:

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'owl.carousel' in '/Volumes/Home/Sites/mysite/src'
 @ ./src/index.js 19:0-23
 @ multi ./src/index.js

I also tried import "owl-carousel"; with the same result. It's loading jquery and bootstrap, which are also node modules so I don't think it's a resolving issue.

I am using webpack, here is my current webpack.config.js

    // webpack v4
    //process.traceDeprecation = true
    const webpack = require('webpack');
    const path = require('path');
    const glob = require('glob-all');
    const assets = path.resolve(__dirname, 'flask_app/static');
    const templates = path.resolve(__dirname, 'flask_app/templates');

    const { getIfUtils,removeEmpty } = require('webpack-config-utils');
    const PurgecssPlugin = require('purgecss-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const StyleLintPlugin = require('stylelint-webpack-plugin');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');

    const { ifProduction, ifNotProduction } = getIfUtils(process.argv[3]);

    console.log("IFPRODUCTION", ifProduction());
    console.log("IFNOTPRODUCTION", ifNotProduction());

    module.exports = (env, argv) => {

        const devMode = argv.mode !== 'production';
        console.log("DEVMODE", devMode);

        return {
            watch: false,

            entry: [
                './src/index.js'
            ],
            output: {
                path: assets,
                filename: '[name].[chunkhash].js'
            },
            module: {
                rules: [{
                        test: /\.vue$/,
                        loader: 'vue-loader'
                    },
                    {
                        test: /\.js$/,
                        enforce: 'pre',

                        use: [{
                                loader: 'eslint-loader',
                                options: {
                                    emitWarning: true,
                                }
                            },
                            {
                                loader: "babel-loader",
                                options: {
                      presets: [
                        ['env']
                        ]
                                    }
                            }
                        ]
                    },
                    // {
                    //  test: /\.min\.js$/,
                    //   loader: 'imports-loader?jQuery=jquery,$=jquery,this=>window'
                    // },
                    {
                        test: /\.s?[ac]ss$/,
                        use: [{
                                loader: MiniCssExtractPlugin.loader
                            },
                            {
                                loader: 'css-loader',
                                options: {
                                    //url: false,
                                    sourceMap: ifNotProduction(),
                                },
                            },
                            {
                                loader: 'postcss-loader',
                                options: {
                                    ident: 'postcss',
                                    sourceMap: ifNotProduction(),
                                    plugins: () =>
                                        ifProduction([
                                            require('autoprefixer')({
                                                preset: 'default',
                                            }),
                                            require('cssnano'),
                                            require("css-mqpacker")
                                        ], [
                                            require('autoprefixer')({
                                                preset: 'default',
                                            }),
                                            require("css-mqpacker")
                                        ])
                                }
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sourceMap: ifNotProduction(),
                                },
                            }
                        ],
                    },
                    {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192
                    }
                  }
                ]
              },
                    {
                        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                        use: [{
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'fonts/'
                            }
                        }]
                    }
                ]
            },

            optimization: {
                minimizer: [
                    new UglifyJSPlugin({
                        uglifyOptions: {
                            sourceMap: ifNotProduction(),
                            compress: {
                                drop_console: true
                            }
                        }
                    })
                ]
            },
            plugins: removeEmpty([
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery"
                }),
                new VueLoaderPlugin(),
                new CleanWebpackPlugin('flask_app/static', {}),
                new MiniCssExtractPlugin({
                    filename: devMode ? 'style.css' : 'style.[chunkhash].css',
                }),
                new HtmlWebpackPlugin({
                    hash: true,
                    template: './src/store_layout.html.j2',
                    filename: `${templates}/store_layout.html.j2`
                }),
                ifProduction(new PurgecssPlugin({
                    paths: glob.sync([
                        path.join(__dirname, 'src/*.html'),
                        path.join(__dirname, 'src/*.html.j2'),
                        path.join(__dirname, 'src/site/*.html'),
                        path.join(__dirname, 'src/site/*.html.j2'),
                        path.join(__dirname, 'src/*.js')
                    ]),
                })),
                new CopyWebpackPlugin([{
                    from: 'src/img',
                    to: 'img'
                }]),
                new CopyWebpackPlugin([{
                    from: 'src/site',
                    to: `${templates}/site`
                }]),
                new StyleLintPlugin({
                    configFile: '.stylelintrc',
                    context: './src',
                    files: '**/*.s?[ac]ss',
                    failOnError: true
                })
            ])
        }
    };

[denisinla]

Try using resolve in your webpack.config file. This solved a lot of issues when using webpack4.

  resolve: {
    modules: ['node_modules'],
    alias: {
      'owl.carousel': 'owl.carousel/dist/owl.carousel.min.js'
    }
  }

Then you can just import in your js files accordingly. Also make sure you're installing/calling 'owl.carousel' not 'owl-carousel' per instructions.

[asaduzzaman1517]

@denisinla life saver!
Thanks a lot

[Lefthandmedia]

looks like this doesn't work anymore with Jquery 3.4.0

[behnamazimi]

You should add this code in your webpack config:

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