jquery - import owl.carousel from webpack -

i new f2e world. created web application using create-react-app. (https://github.com/facebookincubator/create-react-app)

i wanted import owl.carousel projects, followed guide of npm (https://www.npmjs.com/package/owl.carousel) ,which of syntax is:

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

but debugger console indicated error :

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

i tried syntax:

import owlcarousel 'owl.carousel'  

and error be:

uncaught typeerror: cannot read property 'fn' of undefined 

could me figure out happened? thanks.

update: webpack loader settings:

loaders: [   // process js 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]'     }   } ] 

my component code:

import react, { component } 'react'; import './app.css'; import './css/style.css'; import './css/bootstrap.min.css'; import './css/owl.carousel.css'; import fruitselector './containers/fruit_selector'; import fruitdetail  './containers/fruit_detail'; import $ 'jquery'; import 'owl.carousel';  class app extends component { render() { $(document).ready(function(){    $(".content-slider").owlcarousel({       slidespeed: 350,       singleitem: true,       autoheight: true,       navigation: true,       navigationtext: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]   }); });  return (   <div classname="app">   <div classname="row">     <div classname="col-sm-4 col-md-3 sidebar">       <fruitselector/>     </div>     <div classname="col col-md-8">         <fruitdetail/>     </div>     </div>   </div> ); } }  export default app; 

my webpack.config.dev.js plugin setting:

plugins: [  new interpolatehtmlplugin({   public_url: publicurl }),  new htmlwebpackplugin({   inject: true,   template: paths.apphtml, }), new webpack.defineplugin(env), new webpack.hotmodulereplacementplugin(), // watcher doesn't work if mistype casing in path use // plugin prints error when attempt this. // see https://github.com/facebookincubator/create-react-app/issues/240 new casesensitivepathsplugin(), // if require missing module , `npm install` it, still have // restart development server webpack discover it. plugin // makes discovery automatic don't have restart. // see https://github.com/facebookincubator/create-react-app/issues/186 new watchmissingnodemodulesplugin(paths.appnodemodules), new webpack.provideplugin({       $: "jquery",       jquery: "jquery",       "window.jquery": "jquery"   })] 

the error pops out:

app.js:71 uncaught typeerror: (0 , _jquery2.default)(...).owlcarousel not function(…) 

remove plugin blocks import syntax

problem import syntax not default webpack syntax. have installed in project https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md block it, sure part of react-create-app. please remove enable syntax.

owl.carousel needs jquery library imported inside because uses $ variable, problem , why webpack-loader-syntax must removed.

if try import owl in standard way jquery not defined there ( every file in webpack has own scope ), throw error:

uncaught typeerror: cannot read property 'fn' of undefined 

---

( alternative )use shimming module

if removing plugin problem can try add jquery every module usage shimming module - https://webpack.github.io/docs/shimming-modules.html.

in webpack config like:

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

and add by:

import 'owl.carousel'