Unable to compile Electron App due to incorrect parser

Question

So I'm trying to get a simple electron app up and running with Vue 3 and Typescript. Currently, I have run the following commands that allow an electron + Vue 3 app to run successfully:

vue create app_name
cd .\app_name\
vue add electron-builder
npm run electron:serve

After that, things go downhill when I try to implement typescript. I tried to change the <script> to <script lang="ts"> and the app crashes with an error about "Parsing error: No Babel config file detected". If anyone has any insight as to what it takes to get it working at this point, please let me know!

As far as troubleshooting steps I've tried:

I tried installing babel-eslint, @babel/core, @babel/eslint-parser + I created a .eslintrc.js file. Then I got a bunch of errors about:

Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.js': Cannot find module '@typescript-eslint/parser'

So then I tried installing some packages @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vue/cli-plugin-babel, @vue/cli/plugin-eslint, @vue/cli-service, eslint-plugin-vue, and typescript a second time just to check my sanity. After this I began getting odd errors about my string literals not terminating and it was highlighting a basic <div>test</div> I had in the template saying that was not compliant.

I also tried following this guide, but I could not get it to work: https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error

I also tried moving the installed app directory to the root directory of VSCode because a few places online mentioned that might be an issue, made no difference in the errors.

At this point I began changing up the eslintrc.js file to try to choose a correct parser, and it kept generating odd errors about my test vue file. As it currently sits:

module.exports = {
  plugins: ["@typescript-eslint/eslint-plugin"],
  parserOptions: {
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    ecmaVersion: 8,
    extraFileExtensions: ['.vue'],
    ecmaFeatures: {
      jsx: true
    }
  },
  extends: [
    'plugin:@typescript-eslint/eslint-recommended'
  ],
  overrides: [{
    files: ['*.ts', '*.tsx'],
    rules: {
      'no-unused-vars': 'off',
    }
  }]
}

Current Error:

  5:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

✖ 1 problem (1 error, 0 warnings)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 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-loader/dist/templateLoader.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
|   return (_openBlock(), _createElementBlock("div", null, " hey "))
| }

ERROR in ./src/App.vue?vue&type=template&id=7ba5bd90&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90&ts=true) 3:27
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/templateLoader.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
|   return (_openBlock(), _createElementBlock("div", null, " hey "))
| }
 @ ./src/App.vue?vue&type=template&id=7ba5bd90&ts=true 1:0-196 1:0-196
 @ ./src/App.vue 1:0-72 8:68-74 18:71-20:3 19:29-35 18:2-20:4
 @ ./src/main.js 2:0-28 3:10-13

ERROR in [eslint]
C:\Users\Tony\Desktop\Hylio\dev\electron_app\src\App.vue
  5:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

✖ 1 problem (1 error, 0 warnings)


webpack compiled with 2 errors

And the code it's complaining about:

<template>
  <div> hey </div>
</template>

Any insight would be greatly appreciated!!! If it's easier to scrap this and start over, I am welcome to that as well.

Answer 1

I would happily recommend you start here: https://github.com/electron-vite/electron-vite-vue

This is not an answer, I haven't been able to add a comment yet, this is just my sharing.