从webpack导入owl.carousel [英] import owl.carousel from webpack
问题描述
我是F2E世界的新手. 我刚刚使用create-react-app创建了一个Web应用程序. ( https://github.com/facebookincubator/create-react-app )
我想将owl.carousel导入我的项目，以便遵循NPM的指南( https://www.npmjs.com/package/owl.carousel )，其语法为:
import $ from 'jquery';
import 'imports?jQuery=jquery!owl.carousel';
但是调试器控制台指示错误:
Unexpected '!' in 'imports?jQuery=jquery!owl.carousel'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax
我尝试了另一种语法:
import owlCarousel from 'owl.carousel'
，错误将是:
Uncaught TypeError: Cannot read property 'fn' of undefined
有人可以帮我弄清楚发生了什么吗?谢谢.
更新:我的webpack加载程序设置:
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]'
}
}
]
我的组件代码:
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;
我的webpack.config.dev.js插件设置:
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"
})]
错误弹出:
App.js:71 Uncaught TypeError: (0 , _jquery2.default)(...).owlCarousel is not a function(…)
删除阻止导入语法的插件
问题与导入语法有关，该语法不是默认的webpack语法.您已在项目中安装 https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md 阻止它，确保它是react-的一部分创建应用.请删除它以启用此语法.
Owl.carousel 需要在其中导入jQuery库，因为它使用了 $ 变量，因此这是有问题的，这就是为什么必须删除webpack-loader-syntax的原因. /p>
如果我们尝试以标准方式导入owl，则未在其中定义jQuery(webpack中的每个文件都有自己的作用域)，因此将引发错误:
Uncaught TypeError: Cannot read property 'fn' of undefined
(可选)使用匀场模块
如果删除插件有问题，那么您可以尝试将jQuery添加到每个模块中，并将其用作填充模块- https://webpack.github.io/docs/shimming-modules.html .
在webpack配置中，它看起来像:
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
//other config vars
};
然后通过以下方式添加它:
import 'owl.carousel'
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(…)
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'
这篇关于从webpack导入owl.carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
