Getting “SyntaxError: invalid range in character class” when I upgrade to Vue 2.6.0

[1housand]

Version

2.6.0

Reproduction link

https://codesandbox.io/s/7y6n3mk2o1

I cannot fully reproduce this issue in the online IDEs because this issue only occurs when I build and deploy for production, but I included my main.js file and added my dependencies.

Steps to reproduce

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. I've updated my Vue to 2.6.0 and I get an error message in my browser console.

The odd thing is that I only get it when I deploy to production with the npm run build command. 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.

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"
  },

What is expected?

I expect the page to at least load.

What is actually happening?

The page is blank and I get this error message:

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

---

When I use Vue-CLI 3 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.

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.

I think this might be related to this issue from 2016: #2291

I also made a stackoverflow post about it: https://stackoverflow.com/questions/54659200/why-am-i-getting-syntaxerror-invalid-range-in-character-class-when-i-upgrade

[sirlancelot]

Do you have this problem with v2.6.6 as well?

[1housand]

Do you have this problem with v2.6.6 as well?

Yes. I initially updated straight to 2.6.6 from 2.5.21 and when I kept seeing this error, downgraded back to 2.5.21 and did incremental updates until the error started appearing again in 2.6.0.

[sirlancelot]

It likely has something to do with 9c71852 which was introduced in v2.6. Can you share which browser you're using to produce this problem and add a screenshot of the error message as well?

PS: I likely can't fix the problem, but the devs will have better insight if those details are provided to them. Thanks!

[posva]

I tried locally with a fresh cli project and adding the CSS but I couldn't reproduce the problem. Maybe it comes from a dependency you are using.
If you find out what snippet is causing the error so we can reproduce, please ping me so I can check again

[1housand]

It likely has something to do with 9c71852 which was introduced in v2.6. Can you share which browser you're using to produce this problem and add a screenshot of the error message as well?

PS: I likely can't fix the problem, but the devs will have better insight if those details are provided to them. Thanks!

ok, I understand.
But to address your questions anyway, I'm using firefox and have attached the ss.

[1housand]

I tried locally with a fresh cli project and adding the CSS but I couldn't reproduce the problem. Maybe it comes from a dependency you are using.
If you find out what snippet is causing the error so we can reproduce, please ping me so I can check again

It doesn't look like the problem is in the CSS, but the error is gone when I delete the CSS block in that vue file that the error occurred. I will investigate some more with the dependencies. Thank you.

[Thyiad]

I have the same problem