CODEWITHSUNDEEP
vue.jsbootstrap-vue
IWI
IWI

Reputation: 1608

After dependency upgrade, bootstrap and bootstrap-vue no longer working

I was bring a 4 year old vue app up to date, and when doing so, i lost all the styles for the app from bootstrap and bootstrap-vue. I saw in other SOF questions that its commonly related to webpack or the way they are inported

index.js is currently

import { BootstrapVue } from 'bootstrap-vue';
import Vue from 'vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';

// linter doesn't get that bootstrap css comes from bootstrap-vue
/* eslint-disable import/no-extraneous-dependencies */
import 'bootstrap/dist/css/bootstrap.css';

import App from './App.vue';
import router from './router';
import store from './store';

Vue.use(BootstrapVue);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

And nothing shows. When i add the actual links in the portion of the index.html, i get some styles, but not all, so I would like to continue to use the way I have above, and figure out why the styles wont show

Heres my webpack config, as I suspect there is an issue in there

const config = require('../config')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.conf')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = {

  mode: 'development',

  devServer: {
    hot: true,
    watchOptions: {
      poll: true
    }
  },  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }, {
        test: /\.js$/,
        use: 'babel-loader'
      }, {
        test: /\.styl(us)?$/,
        use: [ 'vue-style-loader', 'css-loader', 'stylus-loader' ]
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ]
      }
    ]
  },plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery'
    }),
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
  ]
}

packagejson

{
  "name": "surveyxpress",
  "version": "1.0.0",
  "description": "SurveyXpress",
  "author": "enric ",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
    "ace-builds": "^1.2.0",
    "ansi-styles": "^3.2.1",
    "babel-loader": "^8.2.2",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "color-convert": "^1.9.3",
    "escape-string-regexp": "^1.0.5",
    "firebase": "^8.2.7",
    "firebase-admin": "^9.5.0",
    "firebaseui": "^4.7.3",
    "fs.realpath": "^1.0.0",
    "glob": "^7.1.6",
    "jquery": "^3.5.0",
    "lodash": "^4.17.20",
    "survey-knockout": "^1.8.31",
    "surveyjs-editor": "^1.1.25",
    "vue": "^2.6.12",
    "vue-router": "^3.5.1",
    "vuefire": "^1.4.3",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.17",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.12.17",
    "@vue/compiler-sfc": "^3.0.5",
    "autoprefixer": "^10.2.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-istanbul": "^6.0.0",
    "babel-plugin-transform-runtime": "^7.0.0-beta.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "chai": "^4.3.0",
    "chalk": "^2.4.2",
    "chromedriver": "^2.46.0",
    "connect-history-api-fallback": "^1.6.0",
    "copy-webpack-plugin": "^7.0.0",
    "cross-env": "^7.0.3",
    "cross-spawn": "^7.0.3",
    "css-loader": "^5.0.2",
    "cssnano": "^4.1.10",
    "eslint": "^7.20.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-import-resolver-webpack": "^0.13.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-html": "^6.1.1",
    "eslint-plugin-import": "^2.22.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.17.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^6.2.0",
    "firebase-functions-test": "^0.2.3",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^5.1.0",
    "http-proxy-middleware": "^1.0.6",
    "inject-loader": "^4.0.1",
    "karma": "^6.1.1",
    "karma-coverage": "^2.0.3",
    "karma-mocha": "^2.0.1",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-phantomjs-shim": "^1.5.0",
    "karma-sinon-chai": "^2.0.2",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-spec-reporter": "0.0.32",
    "karma-webpack": "^5.0.0",
    "lolex": "^6.0.0",
    "mocha": "^8.3.0",
    "nightwatch": "^1.5.1",
    "node-sass": "^5.0.0",
    "opn": "^6.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "ora": "^5.3.0",
    "phantomjs-prebuilt": "^2.1.16",
    "rimraf": "^3.0.2",
    "sass-loader": "^11.0.1",
    "selenium-server": "^3.141.59",
    "semver": "^7.3.4",
    "shelljs": "^0.8.4",
    "sinon": "^9.2.4",
    "sinon-chai": "^3.5.0",
    "stylus": "^0.54.8",
    "stylus-loader": "^5.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.23.0",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^5.7.3"
  },
  "engines": {
    "node": ">= 14.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Upvotes: 0

Views: 891

Answers (1)

Mike
Mike

Reputation: 805

If it's been four years, you most likely just upgraded from a pre-v2.0 version of BootstrapVue to 2.21.x.

I'd recommend you read about breaking changes and step through the migration guide in case the elements in your templates have been deprecated or retooled:

https://bootstrap-vue.org/docs/reference/changelog#v200

Upvotes: 2

Related Questions