Error generating Vue Bundle: Module parse failed: Unexpected token (1:0)

Asked

Viewed 269 times

-1

I’m trying to install Vue in a project made in php without framework, what I want is to transform parts of the template into components (menu, top.). When trying to generate Bundle I have this error:

ERROR in ./App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <div id="app">
|     <h1>{{ msg }}</h1>
 @ ./main.js 2:0-27

I will leave below some information that I think are useful: package json.

{
  "dependencies": {
    "vue": "^2.6.12"
  },
  "name": "exemploo",
  "version": "1.0.0",
  "main": "main.js",
  "devDependencies": {
    "i": "^0.3.6",
    "npm": "^7.6.1",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0"
  },
  "scripts": {
    "build": "webpack --mode development"
  },

  "author": "",
  "license": "ISC",
  "description": ""
}

webpack.config.js

const path = require('path')
module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    }

};

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app'
  })

App.

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

index php.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="dist/bundle.js"></script>
</html>
php vue.js mvc components

1 answer

0


Browser other questions tagged php vue.js mvc components

You are not signed in. Login or sign up in order to post.