Unable to return HTML in Vue component

I am getting the following error in my component

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
/var/www/html/resources/js/components/App.vue:173:62
40 |                                  item({ item, components }) {
41 |                                      return (
42 |                                          <div>{item.title}</div>
   |                                                                 ^
43 |                                      )
44 |                                  },

Here is my component

<template>
  <div>
    ...
    <div id="autocomplete" />
    ...
  </div>
</template>

<script>
import { h, Fragment, render, onMounted } from 'vue';
import algoliasearch from 'algoliasearch/lite';
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
import '@algolia/autocomplete-theme-classic';

const searchClient = algoliasearch(
    'xxx',
    'xxx',
);

export default {
  name: 'App',
  setup() {
    onMounted(() => {
      autocomplete({
        container: '#autocomplete',
        openOnFocus: true,
        getSources({ query }) {
          return [
            {
              sourceId: 'products',
              getItems() {
                return getAlgoliaResults({
                  searchClient,
                  queries: [
                    {
                      indexName: 'instant_search',
                      query,
                      params: {
                        hitsPerPage: 10,
                        attributesToSnippet: ['title:10', 'description:35'],
                        snippetEllipsisText: '…',
                      },
                    },
                  ],
                });
              },
            },
          ];
        },
        renderer: { createElement: h, Fragment, render },
      });
    });
  },
};

</script>

The issue seems to be returning HTML from the function, but I am not sure how I can resolve this

peterdickins

3 years ago

Level 2

This is my vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        https: false,
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue()
    ],
});

adiputra22

3 years ago

Level 19

hi @peterdickins , I have same issue when plan to learn laravel 9 with vite lol. did you have fix this problem?

I have call php artisan ui vue because I use laravel/ui package.

this is my vite config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

and this is my package.json:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-vue": "^3.0.1",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.56.1",
        "vite": "^3.0.0",
        "vue": "^3.2.37"
    },
    "dependencies": {
        "vue-loader": "^17.0.1"
    }
}

Hopefully can help anyone that have same issue :)

Please or to participate in this conversation.