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);
});
