Решено - Laravel Bootstrap развал навигационной панели - PullRequest
Новая
       54

Решено - Laravel Bootstrap развал навигационной панели

2 голосов
/ 12 апреля 2020

Я занимаюсь разработкой приложения на Laravel, и моя кнопка свертывания не работает, когда я нажимаю sh, когда консоль сказала "Ошибка ввода: невозможно преобразовать конфигурацию в приложение строки 3. js: 3449: 52

Моя посылка. json это: 

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.4.1",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

И мой код для моего свертка такой: 

<nav class="navbar bg-white shadow-sm navbar-light">
    <div class="container">
        <a class="navbar-brand" href="{‌{ route('home') }}">
            {‌{ config('app.name') }}
        </a>
        <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="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link {‌{ setActive('home') }}" href="{‌{ Route('home')}}">Home</a>
                </li>
                {‌{--<li class="nav-item">
                    <a class="nav-link {‌{ setActive('login') }}" href="{‌{ Route('login')}}">Login</a>
                </li>--}}
                <li class="nav-item">
                    <a class="nav-link {‌{ setActive('contact') }}" href="{‌{ Route('contact')}}">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {‌{ setActive('cookies') }}" href="{‌{ Route('cookies')}}">Cookies</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {‌{ setActive('legal') }}" href="{‌{ Route('legal')}}">Legal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {‌{ setActive('policy') }}" href="{‌{ Route('policy')}}">Policy</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Я зарегистрировался в firefox и chrome, и я я развиваю в Ubuntu 16.04

Ответы [ 3 ]

5 голосов
/ 14 апреля 2020

решено с этим 

npm remove jquery

npm install jquery@~3.4.1

Спасибо за все

0 голосов
/ 18 апреля 2020

Добавить к ответу Рикардо: Эта bootstrap проблема объясняет причину.

В ветке разработчика есть исправление, но оно еще не выпущено. Текущее решение - понизить ваш jQuery до v3.4.1.

0 голосов
/ 14 апреля 2020

Я только что исправил эту проблему, просто заменив public / js / app. js на этот файл

Я думаю, что на самом деле это не правильный способ исправить это, но Я новичок в этой области, вот что я мог сделать:)

...