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]'     }   } ] 

my component 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: ["<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 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"   })] 

the error pops out:

App.js:71 Uncaught TypeError: (0 , _jquery2.default)(...).owlCarousel is not a function(…) 

回答1:

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' 

文章来源: import owl.carousel from webpack