質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

webpack4でnpmでインストールしたjQueryを使いたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 264

xyunow

score 119

webpack4+jQuery+sass環境を作りたいのですが、
jQueryを読み込む設定がうまくいかず、下記のようなエラーが出てしまいます。

ERROR in ../js/index.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/index.js 1:0-17

ERROR in ../js/calender.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/calender.js 1:0-17
 @ ../js/index.js

ERROR in ../js/utility.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/utility.js 1:0-17
 @ ../js/index.js

ERROR in ../js/validate.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/validate.js 1:0-17
 @ ../js/index.js

npm install jquery

上記のコマンドを実行し、node_modulesの中にjqueryパッケージは存在している状態です。

●ディレクトリ構成

.
├── common
│   └── static
│       └── webpack
│           └── bundle.js
└── resource
    └── env
        ├── node_modules
        └── package-lock.json
        └── package.json
        └── webpack.config.js
    └── js
        └── index.js
        └── utility.js
        └── calender.js
        └── validate.js
    └── scss
        └── style.scss
            └── utility
                └── utility.scss


●index.js

import '../scss/style.scss';
import * as util from './utility.js'
import * as calender from './calender.js'
import * as validate from './validate.js'
///////////////////////////////////////////////////////////////////////
$(".js_backdrop_trigger").on("click", util.backdropOpen);
$(".js_backdrop_area").on("click", util.backdropAreaClose);
$(".js_backdrop_close").on("click", util.backdropButtonClose);

$(".js_dialog_trigger").on("click", util.dialogOpen);
$(".js_dialog_close").on("click", util.dialogAreaClose);
$(".js_dialog_close").on("click", util.dialogButtonClose);

if($(".js_calender").length!=0){
    $(window).on('load', calender.initialSelect);
    $(window).on('load', calender.changeSendDate);
}
$(".js_calender_prev").on("click", calender.prev);
$(".js_calender_next").on("click", calender.next);

$(".js_select_role").on("change", validate.contractCheck);

●package.json

{
  "scripts": {
    "w": "webpack --watch"
  },
  "dependencies": {
    "css-loader": "^3.4.2",
    "jquery": "^3.5.1",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}


●webpack.config.js

// プラグインを利用するためにwebpackを読み込んでおく

const webpack = require('webpack');
const path = require('path');

module.exports = {
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: "../js/index.js",
    mode: "production",
    // ファイルの出力設定
    output: {
        //  出力ファイルのディレクトリ名
        path: path.resolve(__dirname, '../../common/static/webpack'),
        // 出力ファイル名
        filename: "bundle.js"
        // hash値自動付与 変更時はwebpack再起動
        // filename: "bundle_[hash].js"
    },
    module: {
        rules: [
            {
                test: /\.scss/,
                //ローダーの処理対象となるディレクトリ
                include: path.resolve(__dirname, '../scss'),
                use: [
                    // linkタグに出力する機能
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
        }),
    ],
};


webpack.config.js内のplugins:をまるごと削除して、index.jsの1行目にimport $ from 'jquery';を記載しても以下のようなエラーが出てしまいます。

ERROR in ../js/index.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/index.js 1:0-23 8:0-1 9:0-1 10:0-1 12:0-1 13:0-1 14:0-1 16:3-4 17:4-5 18:4-5 20:0-1 21:0-1 23:0-1


公式ドキュメントを読んでも、色々な記事を読んでみても自分と同じ状態らしきものがなく、お手上げ状態です…
長いですがアドバイスいただけると幸いです。よろしくおねがいします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

index.jsに

import $ from '../env/node_modules/jquery';

を追加したらいけました。
●index.js

import '../scss/style.scss';
import $ from '../env/node_modules/jquery';
import * as util from './utility.js'
import * as calender from './calender.js'
import * as validate from './validate.js'
///////////////////////////////////////////////////////////////////////
$('.js_slider').slick({
    arrows: false,
    dots: true,
});
$(".js_backdrop_trigger").on("click", util.backdropOpen);
$(".js_backdrop_area").on("click", util.backdropAreaClose);
$(".js_backdrop_close").on("click", util.backdropButtonClose);

$(".js_dialog_trigger").on("click", util.dialogOpen);
$(".js_dialog_close").on("click", util.dialogAreaClose);
$(".js_dialog_close").on("click", util.dialogButtonClose);

if($(".js_calender").length!=0){
    $(window).on('load', calender.initialSelect);
    $(window).on('load', calender.changeSendDate);
}
$(".js_calender_prev").on("click", calender.prev);
$(".js_calender_next").on("click", calender.next);

$(".js_select_role").on("change", validate.contractCheck);

webpack.config.jsに記載していた、以下は不要でした
●webpack.config.js

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
        }),
    ],

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る