Vue-cli: Uncaught SyntaxError: Unexpected token '<'

[mirzaakhena]

Version

4.0.5

Environment info

  System:
    OS: macOS Mojave 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 12.11.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.12.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.97
    Firefox: Not Found
    Safari: 12.0.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.0.5 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.0.5 
    @vue/cli-plugin-babel: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-eslint: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-router:  4.0.5 
    @vue/cli-plugin-vuex:  4.0.5 
    @vue/cli-service: ^4.0.0 => 4.0.5 
    @vue/cli-shared-utils:  4.0.5 
    @vue/component-compiler-utils:  3.0.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.7.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.0.5

Steps to reproduce

1. run vue create . with all default selection.

2. copy vue.config.js file into root directory

module.exports = {
  productionSourceMap: false,
  assetsDir: '../static',
  outputDir: '../static',
  indexPath: '../templates/index.html'
};

1. run vue run serve

What is expected?

Show the page normally just like in vue cli version 3

What is actually happening?

blank page with console error

chunk-vendors.js:1 
Uncaught SyntaxError: Unexpected token '<'

app.js:1 
Uncaught SyntaxError: Unexpected token '<'

---

Before i copy the vue.config.js, and i run the vue run serve, everything is normal.

[LinusBorg]

assetsDir is defined realtive to outputDir, so now it's not a child folder of the latter.

Which means the webserver can't serve it.

It should be a child folder of the outputDir

[mirzaakhena]

@LinusBorg

assetsDir is defined realtive to outputDir, so now it's not a child folder of the latter.

Which means the webserver can't serve it.

It should be a child folder of the outputDir

In index.html file,
If i use the default value of assetsDir which is '' then it will looks like

<script src=/js/chunk-vendors.763c0f03.js>

What i am expecting is the output for assets is something like this

<script src=/../static/js/chunk-vendors.763c0f03.js>

How do i achieve it?

[mirzaakhena]

Ok solved!
Maybe i can share my solution and close this issue.

Actually I am using golang (with gin-gonic) for the backend and vue as frontend with structure

  - main.go
webapp
  - node_modules
  - public
  - src
  - package.json
  - other vue cli generated files..
dist
  - static
    - css
    - img
    - js
  - templates
    - index.html
  - favicon.ico

i use dist/ as output directory for npm run build and this directory also will used by golang as assets file.

main.go

package main

import (
    "net/http"
    "github.com/gin-gonic/gin"
)

func main() {
    router := gin.Default()
    router.GET("/", func(c *gin.Context) {
        c.HTML(http.StatusOK, "index.html", gin.H{"title": "MainMenu"})
    })

    router.StaticFile("./favicon.ico", "../dist/favicon.ico")
    router.Static("/static", "../dist/static")
    router.LoadHTMLGlob("../dist/templates/*")

    router.Run(":8081")
}

vue.config.js

module.exports = {
  productionSourceMap: false,  
  outputDir: '../dist',
  assetsDir: 'static',
  indexPath: 'templates/index.html'
};

[GitHubNull]

Ok solved!
Maybe i can share my solution and close this issue.

Actually I am using golang (with gin-gonic) for the backend and vue as frontend with structure

  - main.go
webapp
  - node_modules
  - public
  - src
  - package.json
  - other vue cli generated files..
dist
  - static
    - css
    - img
    - js
  - templates
    - index.html
  - favicon.ico

i use dist/ as output directory for npm run build and this directory also will used by golang as assets file.

_main.go_

package main

import (
  "net/http"
  "github.com/gin-gonic/gin"
)

func main() {
  router := gin.Default()
  router.GET("/", func(c *gin.Context) {
      c.HTML(http.StatusOK, "index.html", gin.H{"title": "MainMenu"})
  })

  router.StaticFile("./favicon.ico", "../dist/favicon.ico")
  router.Static("/static", "../dist/static")
  router.LoadHTMLGlob("../dist/templates/*")

  router.Run(":8081")
}

vue.config.js

module.exports = {
  productionSourceMap: false,  
  outputDir: '../dist',
  assetsDir: 'static',
  indexPath: 'templates/index.html'
};

thanks

[zmts]

@mirzaakhena 👍 Have similar issue. Solution in vue.config.js

fails with cli4

module.exports = {
  publicPath: 'a',
  outputDir: 'dist/a',
}

works with cli4

module.exports = {
  publicPath: '/a',
  outputDir: 'dist/a',
}

[mauroIstat]

Thank you very much, this solution solved my deployement problem :)