import owl.carousel from webpack
<p>I am new to the F2E world.
I just created a web application using create-react-app. (<a href="https://github.com/facebookincubator/create-react-app" rel="noreferrer">https://github.com/facebookincubator/create-react-app</a>)</p>

<p>I wanted to import owl.carousel into my projects, so that I followed the guide of NPM (<a href="https://www.npmjs.com/package/owl.carousel" rel="noreferrer">https://www.npmjs.com/package/owl.carousel</a>) ,which of the syntax is:  </p>

<pre><code>import $ from 'jquery';
import 'imports?jQuery=jquery!owl.carousel';
</code></pre>

<p>but the debugger console indicated the error :</p>

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

<p>I tried another syntax: </p>

<pre><code>import owlCarousel from 'owl.carousel' 
</code></pre>

<p>and the error would be:</p>

<pre><code>Uncaught TypeError: Cannot read property 'fn' of undefined
</code></pre>

<p>Could somebody help me figure out what happened? thanks.</p>

<p>Update:  my webpack loader settings:</p>

<pre><code>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]'
    }
  }
]
</code></pre>

<p>my component code:</p>

<pre><code>import React, { Component } from 'react';
import './App.css';
import './css/style.css';
import './css/bootstrap.min.css';
import './css/owl.carousel.css';
import FruitSelector from './containers/fruit_Selector';
import FruitDetail  from './containers/fruit_Detail';
import $ from 'jquery';
import 'owl.carousel';

class App extends Component {
render() {
$(document).ready(function(){

  $(".content-slider").owlCarousel({
      slideSpeed: 350,
      singleItem: true,
      autoHeight: true,
      navigation: true,
      navigationText: ["&lt;i class='fa fa-angle-left'&gt;&lt;/i&gt;", "&lt;i class='fa fa-angle-right'&gt;&lt;/i&gt;"]
  });
});

return (
  &lt;div className="App"&gt;
  &lt;div className="row"&gt;
    &lt;div className="col-sm-4 col-md-3 sidebar"&gt;
      &lt;FruitSelector/&gt;
    &lt;/div&gt;
    &lt;div className="col col-md-8"&gt;
        &lt;FruitDetail/&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
);
}
}

export default App;
</code></pre>

<p>my webpack.config.dev.js plugin setting:</p>

<pre><code>plugins: [

new InterpolateHtmlPlugin({
  PUBLIC_URL: publicUrl
}),

new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
}),
new webpack.DefinePlugin(env),
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
  })]
</code></pre>

<p>the error pops out: </p>

<pre><code>App.js:71 Uncaught TypeError: (0 , _jquery2.default)(...).owlCarousel is not a function(…)
</code></pre>