dockerwebpacknuxt.jsnuxt3.jsnuxtjs2

Nuxt Fatal Error SyntaxError: Invalid or unexpected token

When I install bootstrap-vue-next for Nuxt v2.8.1 project, I use the command from the documentation (https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs.html): yarn add bootstrap bootstrap-vue-next @bootstrap-vue-next/nuxt -D It installed well. I configured the application to use bootstrap-vue-next as I added it in nuxt.config.js file. The issue comes when I run the project, one of my Docker containers fail with an error:

yarn run v1.22.5
$ NUXT_HOST=0.0.0.0 nuxt

WARN vendor has been deprecated due to webpack4 optimization

FATAL Invalid or unexpected token

coonst version = (nuxt?._vversion || nuxt?.version || nuxt?.constructor?.version || "").replace(/^v/g, "");

SyntaxError: Invalid or unexpected token

tput No value for $TERM and no -T specified

 ✖ Nuxt Fatal Error   
SyntaxError: Invalid or unexpected token

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Screenshot of Docker Error Log:

enter image description here

Is it possible this Error to be related to Nuxt version which I currently use? And if so, can I go through this issue without upgrading Nuxt to v3?

package.json

{
  "name": "adminv2",
  "version": "1.0.3",
  "description": "Admin",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "NUXT_HOST=0.0.0.0 nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "NUXT_ENV_CURRENT_GIT_SHA=`git rev-parse --short HEAD` nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,vue}": "eslint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.21",
    "@fortawesome/free-solid-svg-icons": "^5.10.1",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@fullcalendar/core": "^4.3.1",
    "@fullcalendar/daygrid": "^4.3.0",
    "@fullcalendar/list": "^4.3.0",
    "@fullcalendar/timegrid": "^4.3.0",
    "@hexdigital/nuxt-intercom": "^0.0.10",
    "@isneezy/vue-selectize": "^0.4.1",
    "@nuxt/kit": "^3.7.1",
    "@nuxtjs/axios": "^5.5.4",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/pwa": "^3.0.0-0",
    "@nuxtjs/redirect-module": "^0.3.1",
    "@popperjs/core": "^2.11.8",
    "@yabhq/nuxt-hotjar": "^0.2.0",
    "bootstrap": "^5.3.2",
    "bootstrap-multiselect": "^0.9.13-1",
    "bootstrap-select": "^1.13.18",
    "bootstrap-vue": "^2.23.1",
    "chart.js": "^2.8.0",
    "cookie-universal-nuxt": "^2.1.0",
    "d3": "^5.11.0",
    "dateformat": "^3.0.3",
    "deep-diff": "^1.0.2",
    "delete-sourcemap-webpack-plugin-stzhang": "^1.0.1",
    "flag-icon-css": "^3.3.0",
    "jquery": "^3.7.1",
    "jquery-ui": "^1.12.1",
    "keycloak-js": "4.5",
    "ladda": "1.0.6",
    "lodash.debounce": "^4.0.8",
    "lodash.get": "^4.4.2",
    "lodash.has": "^4.5.2",
    "node-sass": "^6.0.1",
    "nuxt": "^2.0.0",
    "nuxt-bugsnag": "^4.0.1",
    "nuxt-fontawesome": "^0.4.0",
    "nuxt-intercom": "^1.1.1",
    "popper.js": "^1.16.1",
    "query-builder-vue": "^1.0.6",
    "query-string": "^6.8.2",
    "sass-loader": "10.2.0",
    "save-as-js": "^1.0.0",
    "select2": "^4.0.8",
    "selectize": "^0.12.6",
    "v-jsoneditor": "^1.4.4",
    "vue-browser-acl": "^0.13.1",
    "vue-chartjs": "^3.4.2",
    "vue-content-placeholders": "^0.2.1",
    "vue-context": "^5.2.0",
    "vue-filter-date-format": "^1.2.5",
    "vue-grid-layout": "^2.3.6",
    "vue-infinite-scroll": "^2.0.2",
    "vue-multiselect": "^2.1.6",
    "vue-observe-visibility": "^0.4.6",
    "vue-recaptcha": "1.3.0",
    "vue-smooth-dnd": "^0.8.0",
    "vue-stickykit": "^1.0.5",
    "vue-the-mask": "^0.11.1",
    "vue2-datepicker": "^3.11.1",
    "vue2-daterange-picker": "^0.6.3",
    "vue2-editor": "^2.10.3",
    "vuejs-noty": "^0.1.3",
    "webpack-bugsnag-plugins": "^1.4.3",
    "xlsx": "^0.15.3",
    "@bootstrap-vue-next/nuxt": "^0.14.5"
  },
  "devDependencies": {
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@nuxtjs/toast": "^3.2.1",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "bootstrap-vue-next": "^0.14.5",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "husky": "^2.6.0",
    "jest": "^24.1.0",
    "lint-staged": "^8.2.1",
    "prettier": "^1.16.4",
    "vue-jest": "^4.0.0-0"
  }
}

nuxt.config.js

import webpack from 'webpack'
import { BugsnagSourceMapUploaderPlugin } from 'webpack-bugsnag-plugins'
import DeleteSourceMapWebpackPlugin from 'delete-sourcemap-webpack-plugin-stzhang'
import applicationPackage from './package'

require('dotenv').config()

export default {
  mode: 'spa',

  env: process.env,
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.APP_NAME + ' Admin panel' || 'Admin panel',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.APP_NAME + ' Admin panel' || ''
      },
      {
        hid: 'og:description',
        name: 'og:description',
        content: process.env.APP_NAME + ' Admin panel' || ''
      },
      {
        hid: 'og:title',
        name: 'og:title',
        content: process.env.APP_NAME + ' Admin panel' || ''
      },
      {
        hid: 'og:site_name',
        name: 'og:site_name',
        content: process.env.APP_NAME + ' Admin panel'
      },
      {
        hid: 'apple-mobile-web-app-title',
        name: 'apple-mobile-web-app-title',
        content: process.env.APP_NAME + ' Admin panel'
      },
      { hid: 'robots', name: 'robots', content: 'noindex, nofollow' }
    ],
    link: [{ hid: 'icon', rel: 'icon', type: 'image/x-icon', href: process.env.FAVICON }],
    script: [
      {
        src:
          'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js',
        type: 'text/javascript'
      }
    ]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: '~/components/loader.vue',
  /*
   ** Global CSS
   */
  css: ['~/assets/sass/app.scss'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '~/plugins/tenancy.js',
    '~/plugins/keycloak.js',
    '~/plugins/api.js',
    '~/plugins/clickbit.js',
    '~/plugins/object.js',
    '~/plugins/strings.js',
    '~/plugins/bulker.js',
    '~/plugins/sticky-kit.js',
    '~/plugins/bootstrap-v5.js',
    '~/plugins/bootstrap.js',
    '~/plugins/bus.js',
    '~/plugins/noty.js',
    '~/plugins/filters.js',
    '~/plugins/global-components.js',
    '~/plugins/ladda.js',
    '~/plugins/has-offers.js',
    '~/plugins/auth.js',
    '~/plugins/infinite-scroll.js',
    '~/plugins/content-placeholders.js',
    '~/plugins/hotjar.js',
    '~/plugins/observe-visibility.js'
  ],

  router: {
    linkActiveClass: 'active',
    middleware: ['tenancy'],
    base: '',
    parseQuery: (query) => {
      const querystring = require('query-string')

      return querystring.parse(query, {
        arrayFormat: 'index',
        skipNull: false,
      })
    },
    stringifyQuery: (data) => {
      const querystring = require('query-string')
      const query = querystring.stringify(data, {
        arrayFormat: 'index',
        skipNull: false,
      })
      return query.length > 0 ? '?' + query : ''
    }
  },

  /*
   ** Nuxt.js dev-modules
   */
  devModules: [

  ],

  /*
   ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/toast',
    '@nuxtjs/moment',
    '@nuxt/kit',
    'cookie-universal-nuxt',
    'vue2-editor/nuxt',
    'nuxt-intercom',
    '@bootstrap-vue-next/nuxt',
    ...(process.env.HOTJAR_ID
      ? [
          [
            '@yabhq/nuxt-hotjar',
            {
              hjid: process.env.HOTJAR_ID,
              defer: false,
              async: false,
              dev: false
            }
          ]
        ]
      : []),
    ...(process.env.BUGSNAG_API_KEY
      ? [
          [
            'nuxt-bugsnag',
            {
              enabledReleaseStages: ['production'],
              apiKey: process.env.BUGSNAG_API_KEY,
              config: {
                appVersion: applicationPackage.version
              },
              publishRelease: true
            }
          ]
        ]
      : []),
    [
      'nuxt-fontawesome',
      {
        component: 'fa',
        imports: [
          // import whole set
          {
            set: '@fortawesome/free-solid-svg-icons',
            icons: ['fas']
          }
        ]
      }
    ]
  ],
  intercom: {
    api_base: 'https://api-iam.eu.intercom.io',
    appId: 'hqh86aq6',
    hideDefaultLauncher: false
  },

  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},

  moment: {
    timezone: true
  },


  /*
   ** Build configuration
   */
  build: {
    vendor: ['jquery', 'bootstrap'],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ],

    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      config.resolve.alias['jquery-ui'] = 'jquery-ui/ui'

      if (process.env.NODE_ENV === 'development') {
        config.devtool = 'source-map'
      }

      if (process.env.BUGSNAG_API_KEY) {
        config.devtool = 'source-map'
        config.plugins.push(
          new BugsnagSourceMapUploaderPlugin({
            apiKey: process.env.BUGSNAG_API_KEY,
            appVersion: applicationPackage.version,
            overwrite: true
          })
        )
        config.plugins.push(new DeleteSourceMapWebpackPlugin())
      }
    }
  }
}

THE ANSWER

Bootstrap-vue-next library doesn't support Vue2 and Nuxt 2. Vue 3 is needed.

Solution

  • The package you are trying to use (bootstrap-vue-next) requires vue3/nuxt3 to work, you are using Nuxt v2.8.1 that uses vue2.

    As far as I know, there's no way to make it work.