私は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-create-appの一部です。この構文を有効にするには、これを削除してください。
Owl.carouselは$変数を使用するため、その中にjQuery
ライブラリをインポートする必要があります、これは問題であり、それがwebpack-loader-syntax
を削除する必要があります。
標準的な方法で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'
new webpack.ProvidePlugin({
$: path.resolve(path.join(__dirname, 'node_modules/jquery')),
jQuery: path.resolve(path.join(__dirname, 'node_modules/jquery')),
'window.jQuery': path.resolve(path.join(__dirname, 'node_modules/jquery')),
}),
それは私を助けました
カルーセルには独自のモジュールがあるため(node_modules/owl.carousel/node_modules/jquery
)そしてプラグインはそこからjQueryを受け取り、カルーセルをこのモジュールに書き込みます
「未定義のプロパティ 'fn'を読み取れません」という同じエラーで問題が発生しましたが、Jquery参照が最初であることを確認し、修正しました。
<!-- Webjar References -->
<script src="webjars/jquery/3.3.1/jquery.min.js"></script>
<script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="webjars/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet">