vue + webpack: SyntaxError: invalid range in character class

Question

I am working on webpack 4.29.3 and vue.js 2.6.3. I just tried to create a simple hello world project with vue js and webpack. I expected index.html to be rendered well. I get the error, though: SyntaxError: invalid range in character class which is really weird because I don't do anything with regular expression. that's why I am not sure which part to fix it.

vue-first.js:

import Vue from 'vue';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

index.html:

<!doctype html>
<html>
 <head>
   <title>Getting Started</title>
 </head>
 <body>
   <div id="app">
     {{ message }}
   </div>
   <script src="todo.js"></script>
 </body>
</html>

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/js/vue-first.js',
  output: {
    filename: 'todo.js',
    path: path.resolve(__dirname, 'dist')
  }
};

package.json

{
  "name": "vue-first",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "vue": "^2.6.3"
  }
}

the full error message (from Safari) :

[Error] SyntaxError: Invalid regular expression: range out of order in character class
    RegExp (todo.js:7:3226)
    (anonymous function) (todo.js:7:3226)
    (anonymous function) (todo.js:7:63703)
    n (todo.js:1:115)
    (anonymous function) (todo.js:7:63775)
    n (todo.js:1:115)
    (anonymous function) (todo.js:1:904)
    Global Code (todo.js:1:912)

for more detail, you can checkout my Github.

Do you get the error from webpack or from the browser? What source code line does it refer to? (The error reads like a regex syntax problem, but there are no regular expressions in the code posted here.) — Richard
– Richard, Commented Feb 8, 2019 at 8:39
from browsers. npm run build and npx webpack works fine. it happens in the line 7 from todo.js. I've listed the full error message. Thank you in advance. — inherithandle
– inherithandle, Commented Feb 8, 2019 at 8:44
What is in todo.js? (No such file on your github repo.) And enable map files for your JS so the browser can give you the pre-minification/packing source code reference. — Richard
– Richard, Commented Feb 8, 2019 at 8:50
it is an output from webpack. it is minified code that contains Vue.js and vue-first.js. that's why I didn't pushed it on Github. but I've pushed it now for your convenience. — inherithandle
– inherithandle, Commented Feb 8, 2019 at 8:54

Yom T. · Accepted Answer · 2019-02-08 09:00:00Z

1

It seems that you need to, at the very least, specify the build mode and tell Webpack to use its built-in optimizations and add an alias for Vue.

const path = require('path');

module.exports = {
  mode: 'development',

  entry: './src/js/vue-first.js',
  output: {
    filename: 'todo.js',
    path: path.resolve(__dirname, 'dist')
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  }
};

answered Feb 8, 2019 at 9:00

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

inherithandle Over a year ago

it makes sense that I need to specify the build mode. but I don't know why we need the resolve part. I imported Vue in vue-first.js. I think that makes Webpack add up vue-first.js and vue.js into todo.js. and I don't have the directory vue/dist.

Yom T. Over a year ago

@inherithandle Without the alias, you would have to type in the fully qualified name like import Vue from 'vue/dist/vue.js'. It simply is there for importing or requiring certain modules more easily.

Yom T. Over a year ago

and I don't have the directory vue/dist NPM creates that for you when you run npm install) -- Have a look at node_modules/vue/dist/...

inherithandle Over a year ago

Thanks for mentioning that. now I understand what's wrong with. I thought the ES6 import statement would work like the require function in node.js and would automatically find the Vue instasnce from node_modules.

inherithandle Over a year ago

hmmm.. I thought it would work. it doesn't. Could you help me out? I tried resolve and some import statements like import Vue from vue/dist/vue.js, import Vue from 'node_modules/vue/dist/vue.js', './vue/dist/vue.js', './node_modules/vue/dist/vue.js'. they all don't work for me.

|

Collectives™ on Stack Overflow

vue + webpack: SyntaxError: invalid range in character class

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related