1

I've updated my vue to 2.6.0 and I get this error message in my browser console: 

SyntaxError: invalid range in character class vue.runtime.esm.js:495
2b0e/<     vue.runtime.esm.js:495
2b0e     vue.runtime.esm.js:1
s     bootstrap:78
56d7     ExportTable.vue:1:556
s     bootstrap:78
[0]     bootstrap:151
s     bootstrap:78
n     bootstrap:45
<anonymous>     bootstrap:151
<anonymous>     https://mywebsite.com:8443/js/app.ee42fe22.js:1:2

My backend is Spring Boot. I'm building the frontend by running npm run build and having it copied to the resources folder of my Spring Boot set up via the pom.xml.

Before upgrading to 2.6.0, I was on 2.5.22 and everything was working great. To try and narrow down the problem, I tried a lot of things that were a waste of time, but what I noticed was that when I deleted the <style>...</style> block of the ExportTable.vue file that I was getting the error in, the error would no longer come up in ExportTable.vue and instead show up in the parent component.

<style>
.title-search {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-left: 35px;
}

#hiddenDailyLimitFld {
  color: #c21232;
  background-color: #f9dede;
  border: 1px solid #c21232;
  padding: 8px 5px;
  margin-bottom: 15px;
  border-radius: 2px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  font-weight: 500;
}

.content-searchLinkBtn {
  position: relative;
  padding-right: 35px;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
}

.newSearchBtn {
  color: #ffffff;
  background-color: #4679b2;
  width: 8em;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 3px;
  float: right;
}
</style>

I also tried deleting each css selector block 1 by 1 and building/deploying to production to see if it was a particular css block that was causing it, but the error continued to show up until I deleted all the CSS blocks and the <style>...</style> tags themselves.

The odd thing is that I only get it when I deploy to production with the npm run build command. My package.json looks like it's running the correct commands according to this block:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

When I use vue-cli3 to "serve" under the task menu, which looks like it runs the command $ vue-cli-service serve --mode development --dashboard, there are no errors and everything works fine. I tried deploying to prod with vue-cli-service build --mode development and it worked fine so it looks like there seems to be an issue when it gets minified or built for production.

I think this might be related to this issue from 2016: https://github.com/vuejs/vue/issues/2291

UPDATE: Here's my main.js file:

import './plugins/vuetify'
import '@/resources/css/global.css'
import '@/resources/css/font-awesome-4.7.0/css/font-awesome.css'

import Vue from 'vue';

import App from './App';
import Error from '@/view/Error/Error.vue';
import router from './router.js';
import store from './store.js'
import rest from '@/services/RestService.js';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import './resources/js/font-awesome.js'

Vue.component('font-awesome-icon', FontAwesomeIcon);

Vue.config.productionTip = true;
Vue.config.devtools = true;

var vue_opts = { el: '#app', render: h => h(Error) };
rest.check().then((response) => {
  if (response.user) {
    vue_opts.render = h => h(App);
    vue_opts.router = router;
    vue_opts.store = store;
  }
  new Vue(vue_opts);
})
  .catch((res) => {
    new Vue(vue_opts);
  });
1housand
  • 508
  • 7
  • 16
  • are you using `regex` anywhere? – saibbyweb Feb 13 '19 at 13:53
  • I am not. at first, I thought it might be that because I saw a post about it, but their error message indicated that it was a regular expression syntax error. And I checked for regex, but no regex. – 1housand Feb 13 '19 at 15:36

1 Answers1

1

Did you upgrade your Spring Boot backend as well?

In my case, having same errormessage, my backend was sending wrong Charset-Header. Starting my jar from Windows resulting in Header windows-1252, from Linux US-ASCII.

I had to set my vertx default charset to UTF-8. In spring How to set UTF-8 character encoding in Spring boot? might be your solution?

Otherwise just depending on frontend this https://forum.vuejs.org/t/misplaced-meta-charset-utf-8-fun/55800 might be useful.

Again, in the end I think you are sending wrong encoding to the browser.

Heiniken85
  • 11
  • 2