Unexpected token (1:0)> error when bundling Vue using parcel

Asked 2 years ago, Updated 2 years ago, 107 views

I'm trying to bundle Vue using parcel, but
The first line of App.vue displays the error Unexpected token (1:0) >.
I looked into the solution, but I didn't really understand it.
Only during the first build
The error message "npm WARN vue-loader @13.7.3 requires a peer of css-loader @*but none is installed. You must install peer de" was displayed.
All of the following files have the same hierarchy.

  • package.json
"dependencies": {
    "vue": "^2.6.8"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "parcel-bundler": "^1.11.0",
    "parcel-plugin-vue": "^1.5.0"
  }
  • App.vue
<template>
  <div>
    {{ message}}
  </div>
</template>
<style>
</style>
<script>
export default {
  name: 'App',
  data(){
    US>return{
      message: 'Hello Vue!'
    }
  }
}
</script>
  • index.html
<!DOCTYPE html>
<head>
  <metacharset="utf-8">
</head>

<html>

<body>
  <divid="app">
    <script src="./index.js"></script>
  </div>
</body>

</html>
  • index.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render —h=>h(App)
}).$mount('#app')



Another case,
If you write the following in package.json,

"scripts": {
    "start": "parcel index.html-o"
  }

Why do I get errors with the -o option?
error:option-o, --out-file'argument missing`

vue.js npm build

2022-09-30 15:38

1 Answers

Error because the plug-in for vue in parcel was deprecated.
Uninstall parcel-plugin-vue and
Resolved by adding alias"vue":"./node_modules/vue/dist/vue.common.js" to package.json.


2022-09-30 15:38

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.