Vue-cli: New project with Vue 3 and typescript not working - SyntaxError: Unexpected token u in JSON at position 0

[pranay-91]

Version

4.5.4

Environment info

macos 10.14.4
node 14.5

Steps to reproduce

Create a new project with Vue version 3, typescript option

What is expected?

Build to work when npm run serve

What is actually happening?

Build failed.

---

@ ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-379 1:0-379
@ ./src/App.vue
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://192.168.0.149:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

error in ./src/views/About.vue?vue&type=template&id=039c5b43

Syntax Error: SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()

@ ./src/views/About.vue?vue&type=template&id=039c5b43 1:0-396 1:0-396
@ ./src/views/About.vue
@ ./src/router/index.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://192.168.0.149:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

error in ./src/views/Home.vue?vue&type=template&id=fae5bece

Syntax Error: SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()

@ ./src/views/Home.vue?vue&type=template&id=fae5bece 1:0-395 1:0-395
@ ./src/views/Home.vue
@ ./src/router/index.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://192.168.0.149:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

[sodatea]

Fixed in vue-loader 16.0.0-beta.7

[jirehnimes]

@sodatea What steps we need to do to fix this in our local setup? Do we need to install vue-loader with that version? Re-install the vue-cli?

[m1aw]

This is not fixed, the current version of @vue/cli is still installing an older vue-loader, why is this issue close?

[sodatea]

But it does install the newer version. https://github.com/vuejs/vue-cli/blob/v4.5.7/packages/@vue/cli-service/package.json#L83

[sodatea]

Update the dependencies.

[HTG-YT]

This issue is __still not fixed__ for me as of today:

Log:

 error  in ./src/components/dashboardComponents/ViewerComponent.vue?vue&type=template&id=b97faa74&bindings=undefined

Syntax Error: SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)


 @ ./src/components/dashboardComponents/ViewerComponent.vue?vue&type=template&id=b97faa74&bindings=undefined 1:0-380 1:0-380
 @ ./src/components/dashboardComponents/ViewerComponent.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/pages/dashboardPage/DashboardPage.vue?vue&type=script&lang=ts
 @ ./src/pages/dashboardPage/DashboardPage.vue?vue&type=script&lang=ts
 @ ./src/pages/dashboardPage/DashboardPage.vue
 @ ./src/pages/dashboardPage/entry.ts
 @ multi (webpack)-dev-server/client?http://<ipaddr>&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/pages/dashboardPage/entry.ts

 error  in ./src/components/dashboardComponents/tabsSubComponent/GuildConfigurationSubComponent.vue?vue&type=template&id=13421ccf&bindings=undefined

Syntax Error: SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)


 @ ./src/components/dashboardComponents/tabsSubComponent/GuildConfigurationSubComponent.vue?vue&type=template&id=13421ccf&bindings=undefined 1:0-410 1:0-410
 @ ./src/components/dashboardComponents/tabsSubComponent/GuildConfigurationSubComponent.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/dashboardComponents/tabsSubComponent/TabsSubComponent.vue?vue&type=script&lang=ts
 @ ./src/components/dashboardComponents/tabsSubComponent/TabsSubComponent.vue?vue&type=script&lang=ts
 @ ./src/components/dashboardComponents/tabsSubComponent/TabsSubComponent.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/dashboardComponents/ViewerComponent.vue?vue&type=script&lang=ts
 @ ./src/components/dashboardComponents/ViewerComponent.vue?vue&type=script&lang=ts
 @ ./src/components/dashboardComponents/ViewerComponent.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/pages/dashboardPage/DashboardPage.vue?vue&type=script&lang=ts
 @ ./src/pages/dashboardPage/DashboardPage.vue?vue&type=script&lang=ts
 @ ./src/pages/dashboardPage/DashboardPage.vue
 @ ./src/pages/dashboardPage/entry.ts
 @ multi (webpack)-dev-server/client?http://<ipaddr>&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/pages/dashboardPage/entry.ts

[HTG-YT]

Vue Version: 3.0.2
Vue Loader Version: 16.0.0-beta.8

[fangbinwei]

If you are using yarn, try

  "resolutions": {
    "vue-loader-v16": "npm:vue-loader@^16.0.0-beta.8"
  }

check the version of node_modules/vue-loader-v16 or node_modules/@vue/cli-service/node_modules/vue-loader-v16

the priority of node_modules/@vue/cli-service/node_modules/vue-loader-v16 is higher
@HTG-YT

[HTG-YT]

I am NOT using yarn

[sodatea]

In a TS project? I'm gonna release a patch later today.

[HTG-YT]

Yes, it is a TypeScript project

[HTG-YT]

Looking forward to the patch 👍

[sodatea]

Fixed in beta.9

[HTG-YT]

Are the corresponding dependencies that use it have been updated?

[sodatea]

Just remove the lockfiles and reinstall the dependencies.

[HTG-YT]

Yup - it worked. Thank you

[HomyeeKing]

need somebody help me :

vue : ^3.0.3