Unexpected Token Problems

[mvatansever]

Hi there,

I'm newly at front-end development so this question may be very amateur. I get the error when working the theme:

ERROR  Failed to compile with 11 errors                                                         20:45:08

 error  in ./src/App.vue

Syntax Error: Unexpected token, expected { (15:6)

  13 | 
  14 | // Loading some plugin css asynchronously
> 15 | import('sweetalert2/dist/sweetalert2.css')
     |       ^
  16 | import('vue-notifyjs/themes/default.css')
  17 | export default {}

This a long list as you guess. I run in order to follow commands:

npm install
npm run build (and this command same error returns with next command)
npm run dev

How to solve this problem? Which options cause the problems in webpack or another?

[cristijora]

Hi @mvatansever Thanks for using the dashboard and for posting the issue. Don't worry about beginner questions since we all went through this.

The "errors" or "warnings" you get are actually are due to Javascript Linting In short, linting is a set of coding style rules which you may or may not want to use. They enforce stricter syntax like defining spaces, not having unused variables etc.

To disable the linting go in package.json and change

"dev": "cross-env ENABLE_ESLINT=true node build/dev-server.js",
 "build": "cross-env ENABLE_ESLINT=true node build/build.js",

to this

"dev": "cross-env ENABLE_ESLINT=false node build/dev-server.js",
 "build": "cross-env ENABLE_ESLINT=false node build/build.js",

And run npm run dev again.

There is also a file called .eslintrc.json which defines this set of rules I described above. It extends "extends": "standard" the standard code style Linting is usually helpful if you want to enforce very strict rules and cleaner code but can get in your way sometimes. This is why there are those "ENABLE_ESLINT" options which you can disable/enable easily

[mvatansever]

Yes, I guess this and tried ESLint to disable but the same problem is here. My package.json file "scripts" value changed like this:

    "dev": "cross-env ENABLE_ESLINT=false node build/dev-server.js",
    "build": "cross-env ENABLE_ESLINT=false node build/build.js",

Executed the following command:

npm run build

Again it return this:

Hash: 424ed025b1aac644fbba
Version: webpack 2.7.0
Time: 16578ms
                                                  Asset     Size  Chunks                    Chunk Names
                  static/js/app.4a5366e58ffd1e2fefa9.js   401 kB       0  [emitted]  [big]  app
               static/js/vendor.40e7af831301e4ecc062.js   674 kB       1  [emitted]  [big]  vendor
             static/js/manifest.56edd5f2ff356a0e61b6.js  1.51 kB       2  [emitted]         manifest
    static/css/app.e227fcb686af101a8a3e704629f285f1.css   270 kB       0  [emitted]  [big]  app
              static/js/app.4a5366e58ffd1e2fefa9.js.map   715 kB       0  [emitted]         app
static/css/app.e227fcb686af101a8a3e704629f285f1.css.map   305 kB       0  [emitted]         app
           static/js/vendor.40e7af831301e4ecc062.js.map  4.13 MB       1  [emitted]         vendor
         static/js/manifest.56edd5f2ff356a0e61b6.js.map  14.6 kB       2  [emitted]         manifest
                                             index.html  1.23 kB          [emitted]         

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module build failed: SyntaxError: Unexpected token, expected { (15:6)

  13 | 
  14 | // Loading some plugin css asynchronously
> 15 | import('sweetalert2/dist/sweetalert2.css')
     |       ^
  16 | import('vue-notifyjs/themes/default.css')
  17 | export default {}
  18 | 

[cristijora]

Hm that's very strange. I just tried it with a linting error and ENABLE_ESLINT="false" and it worked ok. Did you save package.json file before running npm run build ? Does it work for npm run dev ? Is this the full error or there is something else?

[cristijora]

Also, do you have a different project setup? It seems that your webpack version is slightly newer than the one in the dashboard config. Would you mind posting a picture of package.json and .babelrc ?

[mvatansever]

I remove all the project and extract the files from zip and ran the command which I wrote below comments and this works. Really I don't have any idea why is working :) Because of I didn't do any changing of the old project.

I put the configuration files content's here if I across the same problem again I think remove node_modules folder. Then edit the config files and just execute "npm install" :)

I thank you for interesting the strange problem.

package.json

{
  "name": "vue-paper-dashboard-pro",
  "version": "1.0.0",
  "description": "A premium Vue.js admin dashboard for bootstrap. Coded by Cristi Jora, designed by Creative Tim.",
  "author": "cristian.jora <cristian.jora@corebuild.eu>",
  "private": true,
  "scripts": {
    "dev": "cross-env node build/dev-server.js",
    "build": "cross-env node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "unit:watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --watch",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "dependencies": {
    "chartist": "^0.10.1",
    "easy-pie-chart": "^2.1.7",
    "element-ui": "^1.4.2",
    "fullcalendar": "^3.4.0",
    "google-maps": "^3.2.1",
    "jquery": "^3.2.1",
    "jvectormap": "^2.0.4",
    "perfect-scrollbar": "^0.7.1",
    "sweetalert2": "^6.6.5",
    "vee-validate": "^2.0.0-rc.14",
    "vue": "^2.3.4",
    "vue-clickaway": "^2.1.0",
    "vue-form-wizard": "^0.6.4",
    "vue-nav-tabs": "^0.5.1",
    "vue-notifyjs": "^0.1.8",
    "vue-router": "^2.7.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^6.2.10",
    "babel-plugin-component": "^0.9.1",
    "babel-plugin-istanbul": "^3.1.2",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^3.5.0",
    "chalk": "^1.1.3",
    "chromedriver": "^2.27.2",
    "connect-history-api-fallback": "^1.3.0",
    "cross-env": "^3.1.4",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^2.0.3",
    "eslint-plugin-import": "^2.6.1",
    "eslint-plugin-node": "^4.2.2",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.2",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^2.0.1",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sinon-chai": "^1.2.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^2.0.2",
    "lolex": "^1.5.2",
    "marked": "^0.3.6",
    "mocha": "^3.2.0",
    "nightwatch": "^0.9.12",
    "node-sass": "^4.5.0",
    "opn": "^4.0.2",
    "ora": "^1.1.0",
    "phantomjs-prebuilt": "^2.1.14",
    "raw-loader": "^0.5.1",
    "sass-loader": "^5.0.1",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^1.17.7",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.3.0",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.4.2",
    "vue-unit": "^0.1.0",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

.babelrc:

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime",["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
  ]]],
  "comments": false,
  "env": {
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

[cristijora]

I wanted to suggest the same thing. Try deleting node_modules and running npm install or yarn install. Check your npm version and if it's 5.0.x or 5.1.x try updating it as those versions were kind of buggy when installing packages (especially when adding new packages). I usually use Yarn as it's more stable and a bit faster. You could give that a try

The only thing I observed is that in your build output you have Version: webpack 2.7.0 but the version of webpack in package.json is 2.2.1 and respectively you should get Version: webpack 2.2.1 when building. Also from the package.json you sent

 "dev": "cross-env node build/dev-server.js",
 "build": "cross-env node build/build.js",

"ENABLE_ESLINT" is missing. If you changed anything in the webpack.base.conf.js just check that

if(process.env.ENABLE_ESLINT && process.env.ENABLE_ESLINT === 'true'){
  webpackConfig.module.rules.unshift(esLintRule) //add eslint
}

this is present at the end of webpack.base.conf.js

[mvatansever]

Yes the ENABLE_ESLINT if condition existed when I get the errors.

I didn't change the webpack package version. If the version might be 2.2.1 then the dependency versioning at the package.json must be without ^ prefix. I think you must change it at the dashboard pro dependencies.

Thank you.

[cristijora]

Try the suggstions from the last comment.

1. Update npm to latest version npm install npm@latest -g

2. Delete node_modules and npm install again

3. Set ENABLE_ESLINT = "false"

4. If it doesn't work try the same with yarn

5. Delete node_modules

6. yarn install

7. yarn run dev

[mvatansever]

It work I sad before comments but additionaly I want to run with yarn. It's worked with default dashboard-pro packages but when I install a package which name is @websanova/vue-auth it's return an error with the package (I know it's not the dashboard-pro error)

Following commands are executed in order:

yarn

[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@1.0.17: The platform "linux" is incompatible with this module.
info "fsevents@1.0.17" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning "ajv-keywords@1.5.1" has incorrect peer dependency "ajv@>=4.10.0".
[5/5] Building fresh packages...
success Saved lockfile.
Done in 232.21s.

yarn run build

yarn run v1.0.2
$ cross-env node build/build.js

Hash: 782dc221b1642d306617 Version: webpack 2.2.1 Time: 23437ms Asset Size Chunks Chunk Names static/js/0.af1b2295237c570446fa.js.map 418 kB 0, 13 [emitted]
static/fonts/element-icons.b02bdc1.ttf 13.2 kB [emitted]
static/js/1.386c34b36639760c515c.js 455 kB 1, 13 [emitted] [big]
static/js/2.758536f06c9bb902cfda.js 22.5 kB 2, 13 [emitted]
static/js/3.a4a6281063ced853e15c.js 90.8 kB 3, 4, 13 [emitted]
static/js/4.c9489551f802533e7bfc.js 89.3 kB 4, 13 [emitted]
static/js/5.1928b3498913aac2ab7d.js 5.07 kB 5, 13 [emitted]
static/js/6.e70974e35e56a96ae794.js 49.6 kB 6, 13 [emitted]
static/js/7.e3b5b821ab565f20c26d.js 13.2 kB 7, 13 [emitted]
static/js/8.badc3f6e8bded41fb261.js 3.85 kB 8, 13 [emitted]
static/js/app.3d2a8ebdf159e4ed3288.js 263 kB 9, 13 [emitted] [big] app static/js/vendor.2e71ff8ee0492fa827ce.js 1.26 MB 10, 13 [emitted] [big] vendor static/js/11.1c16c6d3f6055a6e6b62.js 47.3 kB 11, 13 [emitted]
static/js/12.4ca93a5240fbd58fdf07.js 143 kB 12, 13 [emitted]
static/js/manifest.e06ed64bf606fe3656a0.js 1.78 kB 13 [emitted] manifest static/css/app.40efa5f4460cd244effbb38977077aa3.css 378 kB 9, 13 [emitted] [big] app static/js/0.af1b2295237c570446fa.js 39.5 kB 0, 13 [emitted]
static/js/1.386c34b36639760c515c.js.map 3.06 MB 1, 13 [emitted]
static/js/2.758536f06c9bb902cfda.js.map 126 kB 2, 13 [emitted]
static/js/3.a4a6281063ced853e15c.js.map 757 kB 3, 4, 13 [emitted]
static/js/4.c9489551f802533e7bfc.js.map 746 kB 4, 13 [emitted]
static/js/5.1928b3498913aac2ab7d.js.map 13.6 kB 5, 13 [emitted]
static/js/6.e70974e35e56a96ae794.js.map 105 kB 6, 13 [emitted]
static/js/7.e3b5b821ab565f20c26d.js.map 30 kB 7, 13 [emitted]
static/js/8.badc3f6e8bded41fb261.js.map 25.9 kB 8, 13 [emitted]
static/js/app.3d2a8ebdf159e4ed3288.js.map 1.24 MB 9, 13 [emitted] app static/css/app.40efa5f4460cd244effbb38977077aa3.css.map 435 kB 9, 13 [emitted] app static/js/vendor.2e71ff8ee0492fa827ce.js.map 1.59 MB 10, 13 [emitted] vendor static/js/11.1c16c6d3f6055a6e6b62.js.map 177 kB 11, 13 [emitted]
static/js/12.4ca93a5240fbd58fdf07.js.map 312 kB 12, 13 [emitted]
static/js/manifest.e06ed64bf606fe3656a0.js.map 15 kB 13 [emitted] manifest index.html 1.23 kB [emitted]

ERROR in static/js/vendor.2e71ff8ee0492fa827ce.js from UglifyJs SyntaxError: Unexpected token punc «(», expected punc «:» [./~/@websanova/vue-auth/src/auth.js:502,0][static/js/vendor.2e71ff8ee0492fa827ce.js:30879,22]

Build complete.

Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.

If remind you something please tell why the error get? 

Thanks again for your help.

[mvatansever]

I completely removed node_modules folder and install again with yarn without any errors. I learn it's most important at front-end development :)

[cristijora]

Alright glad you solved it. Use yarn as it's more stable. Latest npm versions have some bugs. When you want to add packages, also use yarn to avoid further issues. yarn add package-name will add the package to dependencies yarn add -D package-name will add the package to devDependencies

Closing the issue. Good luck with the coding and learning 👍

[mvatansever]

Thanks ;)