AirNoir AirNoir - 29 days ago 55
jQuery Question

import owl.carousel from webpack

I am new to the F2E world.
I just created a web application using create-react-app. (https://github.com/facebookincubator/create-react-app)

I wanted to import owl.carousel into my projects, so that I followed the guide of NPM (https://www.npmjs.com/package/owl.carousel) ,which of the syntax is:

import $ from 'jquery';
import 'imports?jQuery=jquery!owl.carousel';


but the debugger console indicated the error :

Unexpected '!' in 'imports?jQuery=jquery!owl.carousel'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax


I tried another syntax:

import owlCarousel from 'owl.carousel'


and the error would be:

Uncaught TypeError: Cannot read property 'fn' of undefined


Could somebody help me figure out what happened? thanks.

Update: my webpack loader settings:

loaders: [
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel-loader',
query: {
cacheDirectory: findCacheDir({
name: 'react-scripts'
})
}
},
{
test: /\.css$/,
loader: 'style!css?importLoaders=1!postcss'
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
loader: 'file',
query: {
name: 'static/media/[name].[hash:8].[ext]'
}
},
{
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
}
]

Answer

Remove plugin which blocks import syntax

Problem is with import syntax which is not default webpack syntax. You have installed in Your project https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md to block it, for sure it is part of react-create-app. Please remove it to enable this syntax.

Owl.carousel needs jQuery library imported inside it because it uses $ variable, so this is problem and it is why webpack-loader-syntax must be removed.

If we try to import owl in standard way then jQuery is not defined there ( every file in webpack has own scope ), so it will throw an error:

Uncaught TypeError: Cannot read property 'fn' of undefined

( Alternative )Use shimming module

If removing plugin is problem then You can try to add jQuery to every module with usage it as shimming module - https://webpack.github.io/docs/shimming-modules.html.

In webpack config it will look like:

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
    })
]
//other config vars
};

And just add it by:

import 'owl.carousel'