How to solve Module parse failed: Unexpected token (3:27) in Vue 3 project

Question

After trying to clone my project from GitHub, (Had to delete I locally). I started to get the following error.

error  in ./src/App.vue?vue&type=template&id=7ba5bd90&ts=true

Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
* ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { resolveComponent as _resolveComponent, createVNode as _createVNode, 
withCtx as _withCtx, openBlock as _openBlock, createElementBlock as 
_createElementBlock } from "vue"
| 
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: 
any,$options: any) {
|   const _component_router_view = _resolveComponent("router-view")!
|   const _component_AppLayout = _resolveComponent("AppLayout")!

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

I have searched a lot online and saw that a lot have similar errors, but the solutions in the different threads did not work for me, so I am trying to ask here in hope that someone can guide me a little.

As I see online the error could be related to Webpack but I don't have a Webpack.config.js file. I have the following package.json file

{
  "name": "book",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build && echo '/* /index.html 200' | cat >public/_redirects",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@headlessui/vue": "0.0.0-d60d2a5",
    "@heroicons/vue": "^1.0.2",
    "@tailwindcss/postcss7-compat": "^2.2.7",
    "axios": "^0.23.0",
    "core-js": "^3.6.5",
    "daisyui": "^1.14.2",
    "k-progress-v3": "^1.0.0",
    "node-sass": "^6.0.1",
    "prettier": "^2.3.2",
    "vue": "^3.2.20",
    "vue-jwt-decode": "^0.1.0",
    "vue-loader": "^16.2.0",
    "vue-router": "^4.0.10",
    "vue-router-multiguard": "^1.0.3",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "postcss": "^8.3.9",
    "prettier-plugin-tailwind": "^2.2.12",
    "sass": "^1.37.5",
    "sass-loader": "^10.1.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
    "vue-loader-v16": "^16.0.0-beta.5.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "settings": {},
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

The App.vue file looks like this

<template>
  <div>
    <AppLayout>
      <router-view />
    </AppLayout>
  </div>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

And the main.js file looks like this.

import { createApp } from "vue";
import App from "./App.vue";
import "./tailwind.css";
import router from "./router";
import store from "./store/store";
import AppLayout from "./layouts/appLayout.vue";

createApp(App)
  .use(store)
  .use(router)
  .component("AppLayout", AppLayout)
  .mount("#app");

And the last file I think could be part of the issue is the appLayout.vue, here you have it

<template>
  <component :is="layout">
    <slot />
  </component>
</template>

<script>
import { shallowRef} from 'vue'
import AppLayoutDefault from "./appLayoutDefault.vue";

export default {
  name: "AppLayout",
  data: () => ({
    layout: shallowRef(AppLayoutDefault),
  }),
  watch: {
    $route: {
      immediate: true,
      async handler(route) {
        try {
          const component = await import(`@/layouts/${route.meta.layout}.vue`);
          this.layout = component?.default || AppLayoutDefault;
        } catch (e) {
          this.layout = AppLayoutDefault;
        }
      },
    },
  },
};
</script>

Answer 1

The issue apparently was the lang="ts" in the App.vue component

<script lang="ts">
export default {
  name: "App",
};
</script>

Apparently, that broke the loader. Would love to know why though