vue template error

Hello, I’m trying to set up a vue test in my existing project. I have it mostly loading but when building using npm run build, I receive a error. I am using inertia and Laravel.

$ npm run build
> build
> vite build

vite v5.3.1 building for production...
✓ 4 modules transformed.
x Build failed in 126ms
error during build:
[vite:build-import-analysis] [plugin vite:build-import-analysis] resources/views/campaigns/edit_categories.vue (3:17): Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
file: /home/vagrant/Code/_play/readers_choice/Modules/Admin/resources/views/campaigns/edit_categories.vue:3:17
1: <template>
2:   <div>
3:     <h1>TEST</h1>
                    ^
4:   </div>
5: </template>
    at getRollupError (file:///home/vagrant/Code/_play/readers_choice/Modules/Admin/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at error (file:///home/vagrant/Code/_play/readers_choice/Modules/Admin/node_modules/rollup/dist/es/shared/parseAst.js:392:42)
    at Object.error (file:///home/vagrant/Code/_play/readers_choice/Modules/Admin/node_modules/rollup/dist/es/shared/node-entry.js:19589:20)
    at Object.error (file:///home/vagrant/Code/_play/readers_choice/Modules/Admin/node_modules/rollup/dist/es/shared/node-entry.js:18699:42)
    at Object.transform (file:///home/vagrant/Code/_play/readers_choice/Modules/Admin/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:64865:14)

I am very new to vue and have only used it a few times. I thought that a view template could include html code. This is my template.

<template>
  <div>
    <h1>TEST {{$category_id}}</h1>
  </div>
</template>
<script>
export  default {
  props: Object
}
</script>

vitejs/plugin-vue is installed. Any ideas?

LaryAI

1 year ago

Level 58

It looks like you're encountering an issue with Vite not properly handling your .vue file. This is likely because the necessary Vite plugin for Vue is either not installed correctly or not configured properly in your vite.config.js file.

Here are the steps to resolve this issue:

Ensure @vitejs/plugin-vue is installed:

First, make sure that you have the @vitejs/plugin-vue package installed. You can install it using npm or yarn:
```
npm install @vitejs/plugin-vue --save-dev
```
or
```
yarn add @vitejs/plugin-vue --dev
```
Update vite.config.js:

Next, you need to configure Vite to use the Vue plugin. Open your vite.config.js file and add the Vue plugin to the configuration.
```
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});
```

Check your Vue component:

Ensure that your Vue component is correctly structured. Your component seems fine, but just to be sure, here is a cleaned-up version:

<template>
  <div>
    <h1>TEST {{$category_id}}</h1>
  </div>
</template>

<script>
export default {
  props: {
    category_id: {
      type: [String, Number],
      required: true
    }
  }
}
</script>

Rebuild your project:

After making these changes, try running the build command again:
```
npm run build
```

By following these steps, you should be able to resolve the issue with Vite not properly handling your .vue file. If you continue to experience issues, double-check that all dependencies are correctly installed and that there are no typos in your configuration files.

TerrePorter

1 year ago

Level 12

I have left out the plugin (#2). I have another problem now though, the manifest.json is being created under .vite/ and not in the root and i receive the following error.

Vite manifest not found at: /home/vagrant/Code/_play/readers_choice/public/build-admin/manifest.json

My parent project does not do this, it saves it in the same directory as the js/css files.

$ npm run build

> build
> vite build

vite v5.3.1 building for production...
transforming (96) ../../node_modules/call-bind/index.js
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration
✓ 129 modules transformed.
Generated an empty chunk: "app".
../../public/build-admin/.vite/manifest.json                       0.93 kB │ gzip:  0.28 kB
../../public/build-admin/assets/app-l0sNRNKZ.js                    0.00 kB │ gzip:  0.02 kB
../../public/build-admin/assets/app-DP2rzg_V.js                    0.00 kB │ gzip:  0.02 kB
../../public/build-admin/assets/edit_categories-eTfw9Vws.js        0.31 kB │ gzip:  0.25 kB
../../public/build-admin/assets/app-edit-categories-D-trzuDA.js  178.11 kB │ gzip: 64.00 kB
✓ built in 7.35s

TerrePorter

1 year ago

Level 12

nevermind, it was fixed by changing,

manifest: true,
to 

manifest: "manifest.json",

Please or to participate in this conversation.