I'm trying to get a django application integrated with Vite(Vue) and it looks like my app is not getting mounted. I'm getting the following error:
chunk-U3LI7FBV.js?v=43664698:2116 [Vue warn]: Failed to mount app: mount target selector "#app" returned null.
Furthermore, I noticed that when I look at my sources, everything involving Vue appears twice. I included a screenshot. I think the problem is in my vite.config.js file, but I'm not sure. Here's what that looks like:
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'node:path';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
],
root: resolve('./src'),
base: '/static/vite/',
resolve: {
// extensions: ['.js', '.json', '.vue', '.less', '.scss'],
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
// build: {
// outDir: resolve('./dist/vite'),
// rollupOptions: {
// input: {
// main: resolve('./src/js/main.js'),
// test: resolve('./src/js/test.js'),
// },
// },
// },
})
As you can see, I tried a few things and commented them out. Not sure what to do next. Eventually, I'm going to want to add docker to the mix, but I want to get this working first using npm run dev and python manage.py runserver. Once I get over that, then I will try implementing docker. If anyone can see my issue or if they have a good tutorial, I'd really appreciate it. Thanks in advance.