jQuery не доступен как "$" при использовании ProvidePlugin веб-пакета

Question

Я пытаюсь использовать jQuery в качестве $ в файле ввода index.js приложения моего веб-пакета, и я получаю эту ошибку при запуске приложения в браузере:

Uncaught TypeError: Cannotчитать свойство 'fn' из неопределенного

Это связано с тем, что строка в импортируемом модуле называется bootstrap-switch, а рассматриваемая строка:

$.fn.bootstrapSwitch = function() {

Так что у меня нет $, работающего как глобальная переменная.Я следовал инструкциям ProvidePlugin docs , как показано ниже.Я также попытался ответить на вопрос в на этот вопрос , но это не сработало.

Это сокращенная версия моего webpack.config.js файла:

module.exports = {
    entry: {
        main: './src/index.js'
    },
    plugins: {
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    }
}

Иэто мой src/index.js файл:

import 'bootstrap-switch';

console.log('I am running');

Любая помощь будет принята с благодарностью.

РЕДАКТИРОВАТЬ

Предыдущая версия этого вопросаоб ошибке сборки, которая на самом деле была ошибкой ESLint.Спасибо @ UjinT34 за помощь в решении этой проблемы и за внимание к фактической ошибке, описанной выше.

Answer 1

no-undef - ошибка ESlint.Он не знает о настройке вашего веб-пакета.Вы можете указать глобальные переменные в конфигурации esling :

{
    "globals": {
        "$": "readonly",
        "jQuery": "readonly"
    }
}

Answer 2

Я добавляю это как ответ для будущих пользователей, чтобы найти.

Попробуйте добавить 'window.jQuery': 'jquery' в настройки webpack.ProvidePlugin().

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        } )
    ]
};