Задать вопрос
alexey_bille
@alexey_bille
Web developer
vue

Ошибка при подключении boostrap 4 к vue?

Создал проект из шаблона https://github.com/vuejs-templates/webpack
Скачал bootstrap 4 https://bootstrap-vue.js.org/docs/setup
Хочу использовать Navbar https://bootstrap-vue.js.org/docs/components/navbar
Код компонента
<template>
    <b-navbar toggleable type="light" variant="info" toggle-breakpoint="md">

        <b-nav-toggle target="nav_collapse"></b-nav-toggle>

        <b-navbar-brand href="#">NavBar</b-navbar-brand>

        <b-collapse is-nav id="nav_collapse">

            <b-nav is-nav-bar>
                <b-nav-item href="#">Link</b-nav-item>
                <b-nav-item href="#" disabled>Disabled</b-nav-item>
            </b-nav>

            <!-- Right alignd nav items -->
            <b-nav is-nav-bar class="ml-auto">

                <b-nav-form>
                    <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
                    <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
                </b-nav-form>

                <b-nav-item-dropdown text="Lang" right>
                    <b-dropdown-item to="#">EN</b-dropdown-item>
                    <b-dropdown-item to="#">ES</b-dropdown-item>
                    <b-dropdown-item to="#">RU</b-dropdown-item>
                    <b-dropdown-item to="#">FA</b-dropdown-item>
                </b-nav-item-dropdown>

                <b-nav-item-dropdown right>
                    <!-- Using button-content slot -->
                    <template slot="button-content">
                        <em>User</em>
                    </template>
                    <b-dropdown-item to="#">Profile</b-dropdown-item>
                    <b-dropdown-item to="#">Signout</b-dropdown-item>
                </b-nav-item-dropdown>
            </b-nav>

        </b-collapse>
    </b-navbar>
</template>

<script>
  import {
    bNavbar,
    bDropdown,
    bNavItemDropdown,
    bCollapse,
    bDropdownItem,
    bNavToggle,
    bNavbarBrand,
    bNav,
    bNavForm,
    bButton,
    bFormInput,
    bNavItem
  } from 'bootstrap-vue/lib/components'
  import {
    bToggle,
    bModal,
    bScrollspy
  } from 'bootstrap-vue/lib/directives'
  export default {
    data: function () {
      return {
        hello: 123
      }
    },
    components: {
      bNavbar,
      bDropdown,
      bNavItemDropdown,
      bCollapse,
      bDropdownItem,
      bNavToggle,
      bNavbarBrand,
      bNav,
      bNavForm,
      bButton,
      bFormInput,
      bNavItem
    },
    directives: {
      bToggle,
      bModal,
      bScrollspy
    }
  }
</script>

<style>

</style>


При сборке проекта появляется ошибка
Ошибка

ERROR Failed to compile with 1 errors 16:07:51

error in ./~/bootstrap-vue/lib/mixins/dropdown.js

Module parse failed: C:\Users\alexey\PhpstormProjects\vue.git\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8)
You may need an appropriate loader to handle this file type.
| },
| methods: {
| ...clickOut.methods,
| noop() {
| // Do nothing event handler (used in visible watch)

@ ./~/bootstrap-vue/lib/mixins/index.js 2:0-38
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/bootstrap-vue/lib/components/collapse.vue
@ ./~/bootstrap-vue/lib/components/collapse.vue
@ ./~/bootstrap-vue/lib/components/index.js
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/header/ComponentHeaderNavbar.vue
@ ./src/components/header/ComponentHeaderNavbar.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/header/ComponentHeader.vue
@ ./src/components/header/ComponentHeader.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

> Listening at localhost:8080


Погуглив нашел ответ https://github.com/bootstrap-vue/bootstrap-vue/iss...
Установил https://babeljs.io/docs/plugins/transform-object-r...
но ошибка осталась
Файл .babelrc
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul","transform-object-rest-spread"]
    }
  }
}

  • Вопрос задан
  • 619 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
lavezzi1
@lavezzi1
У вас неверный babelrc

Нужно так
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  // место для плагина
  "plugins": ["transform-runtime", "transform-object-rest-spread"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul",]
    }
  }
}
Ответ написан
11 комментариев
11 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Middle Vue Frontend Developer
Fornex
от 100 000 до 200 000 ₽
Fullstack-разработчик (Vue 3, TypeScript, Firebase)
Onemoney
от 180 000 до 180 000 ₽
Фулстек разработчик
Creative Code
от 2 500 до 3 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Модификация раздела "Табличные знания"
25 дек. 2024, в 20:24
1000 руб./за проект
Верстка React
25 дек. 2024, в 20:04
1000 руб./в час
Создать ТГ бота для анализа графиков
25 дек. 2024, в 18:09
10000 руб./за проект
Ещё заказы