Импорт Popper или Jquery не работает должным образом - PullRequest
Новая
       6

Импорт Popper или Jquery не работает должным образом

0 голосов
/ 29 декабря 2018

Я пытаюсь использовать панель навигации из начальной загрузки 4. Для этого я знаю, что нужны некоторые зависимости.Начальная загрузка CSS и JS.Popper Js и Jquery.

Вот пример кода, который у меня есть и который работает внутри jsFiddle.Вот почему я считаю, что мой импорт не очень хорош, потому что в проекте My Symfony раскрывающийся список не работает.Ни в меню, ни в свернутом трехстрочном меню. 

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

Я использую npm и пряжу для обработки зависимостей.

Вот мой package.json.Если что-то не так, я думаю, это здесь. 

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.0",
        "jquery.js": "0.0.2-security",
        "node-sass": "^4.11.0",
        "popper.js": "^1.14.6",
        "sass-loader": "^7.0.1",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "bootstrap": "^4.2.1",
        "jquery": "^3.3.1"
    }
}

Для сборки я использую команду yarn encore dev

А вот мой app.js, используемый для сборки. 

require('popper.js');
// Need jQuery? Install it with "yarn add jquery", then uncomment to 
require it.
const $ = require('jquery');


require('bootstrap');

Спасибо за вашу помощь, я надеюсь, вы увидите, что не так в этом импорте.

В моем node_modules у меня есть jquery и jquery.js, но, похоже, я могу толькотребовать jquery.Если я пытаюсь использовать jquery.js, у меня возникают ошибки при сборке.

...