Vite Manifest asset paths incorrect with nested Vite config
I am in the process of updating my company's Statamic website to the newest version as well as updating the Laravel and Vite versions respectively. Because we wanted to use Vue 3 for part of our site, while creating custom Statamic add-ons and inputs, and because Statamic currently does not support Vue 3 in it's Control Panel, we had to isolate all of the Vue 3 assets into a nested directory (resources/js/application) with its own package.json file and it's own vite.config.js file.
The root vite.config.js is currently responsible for compiling all of the assets for the Statamic CP and front end of the site and it works as it should. So we are good there.
The issue that I am running into is this nested application directory's vite build is not building the manifest.json correctly. The entry file for this build resides at resources/js/application/index.ts, however since this entry file is relatively in the same directory as the vite.config.js, this is the resulting manifest:
{
"index.ts": {
"css": [
"assets/index-kclLbBoa.css"
],
"file": "assets/index-rfubiU1p.js",
"isEntry": true,
"src": "index.ts"
}
}
While this initially looks ok, the first key of the object (index.ts) does show the full path, so when you follow the documentation to include the full resource path, the Laravel application throws an error that it cannot find the right files.
This is my vite.config.js file:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'node:path';
console.log(path.resolve(__dirname, './'))
export default defineConfig({
root: __dirname,
base: path.resolve(__dirname, 'application'),
plugins: [
laravel({
hotFile: '../../../../public/application.hot',
buildDirectory: '../../../../public/build/application',
input: [
'index.ts',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
server: {
hmr: {
host: 'localhost'
}
},
resolve: {
alias: {
'@': 'resources/js/application',
}
},
build: {
emptyOutDir: true,
manifest: 'manifest.json',
outDir: '../../../public/build/application',
},
envDir: '../../../'
});
Any help would be appreciated!
Please or to participate in this conversation.