Conversion failed. Need help converting.

[gaby64]

I am getting conversion failed:

progress [████████████████████████████░░░░░░░░░░░░] 69% | AST Parsing: C:/wamp64/www/training-vite/src/styles/fileicon.css | 1209/1749TypeError: Cannot read properties of undefined (reading 'process.env')
TypeError: Cannot read properties of undefined (reading 'expression')
at module.exports.toConfig (C:\Users\gaby\AppData\Roaming\npm\node_modules@originjs\webpack-to-vite\node_modules\webpack-chain\src\Plugin.js:55:38)
at C:\Users\gaby\AppData\Roaming\npm\node_modules@originjs\webpack-to-vite\node_modules\webpack-chain\src\Config.js:129:61
at Array.map ()tmlConfig (C:\Users\gaby_\AppData\Roaming\npm\node_modules@originjs\webpack-to-vite\dist\src\ast-parse\astParse.js:145:33)
at module.exports.toConfig (C:\Users\gaby_\AppData\Roaming\npm\node_modules@originjs\webpack-to-vite\node_modules\webpack-chain\src\Config.js:129:40)
at setTransformParamsWithHtmlConfig (C:\Users\gaby_\AppData\Roaming\npm\node_modules@originjs\webpack-to-vite\dist\src\ast-parse\astParse.js:151:70)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)pack-to-vite\dist\src\cli\cli.js:100:34)
at async astParseRoot (C:\Users\gaby_\AppData\Roaming\npm\node_modules@originjs\webpack-to-vite\dist\src\ast-parse\astParse.js:184:36)
at async start (C:\Users\gaby_\AppData\Roaming\npm\node_modules@originjs\webpack-to-vite\dist\src\cli\cli.js:100:34)
Conversion failed.

This is my vue.config.js file:

const webpack = require('webpack');
var version = '2.96';
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); 

module.exports = {
	filenameHashing: false,
	runtimeCompiler: true,
	productionSourceMap: false,
	pluginOptions: {
		quasar: {
			importStrategy: 'kebab',
			rtlSupport: false
		}
	},
	transpileDependencies: [
		'quasar'
	],
	devServer: {
		proxy: 'http://localhost:80'
	},
	publicPath: './',
	configureWebpack: {
		plugins: [],
		output: {
			filename: "[name].js?v=" + version,
			chunkFilename: "[name].js?v=" + version
		}
	},
	chainWebpack: config => {
		config.module.rule('vue').use('vue-loader').tap((options) => {
			return {
				...options,
				refSugar: true
			}
		});
		config.plugin('define').tap(args => {
			args[0]['process.env'].VUE_APP_BUILD = JSON.stringify(version);
			return args;
		});
		config.plugin('copy').tap(([options]) => {
			options.patterns[0].globOptions.ignore.push('**/courses/**')
			options.patterns[0].globOptions.ignore.push('**/php/dompdf/**')
			return [options]
		});
		config.module.rule('images').test(/\.(png|jpe?g|gif|webp)(\?.*)?$/).set('generator', {
			filename: 'img/[name][ext]'
		});
		config.module.rule('fonts').test(/\.(woff|woff2|eot|ttf)(\?.*)?$/).set('generator', {
			filename: 'fonts/[name][ext]',
    			publicPath: IS_PROD ? '../' : './' //(prod) ../ | (dev) ./ 
		});
		if(config.plugins.has("extract-css")) {
			const extractCSSPlugin = config.plugin("extract-css");
			extractCSSPlugin && extractCSSPlugin.tap(() => [{
				filename: "css/[name].css?v=" + version,
				chunkFilename: "[name].css?v=" + version
			}]);
		}
	}
}

[gaby64]

This is what ChatGPT gave me, seems to be correct, will be testing it next week.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
import path from 'path';
import fs from 'fs-extra';

const version = '2.96';
const IS_PROD = process.env.NODE_ENV === 'production';

// Custom plugin for copying public files with exclusions
function CustomCopyPlugin(options = {}) {
	return {
		name: 'custom-copy',
		enforce: 'post', // Ensures this runs after the build is complete
		async buildEnd() {
			const srcDir = options.src || path.resolve(__dirname, 'public');
			const destDir = options.dest || path.resolve(__dirname, 'dist');
			const exclude = options.exclude || [];

			try {
				const files = await fs.readdir(srcDir);
				for (const file of files) {
					if (exclude.includes(file)) {
						continue; // Skip excluded directories
					}
					const srcPath = path.join(srcDir, file);
					const destPath = path.join(destDir, file);
					await fs.copy(srcPath, destPath, { recursive: true });
					console.log(`Copied ${srcPath} to ${destPath}`);
				}
				console.log('Successfully copied public files.');
			} catch (err) {
				console.error('Error copying public files:', err);
			}
		},
	};
}

export default defineConfig({
	plugins: [
		vue({
			template: {
				transformAssetUrls,
				compilerOptions: { // Enable refTransform if you need <script setup> ref sugar (requires Vue 3.2+)
					refTransform: true,
				}
			},
		}),
		quasar({
			importStrategy: 'kebab',
			rtlSupport: false,
			sassVariables: 'src/quasar-variables.scss',
		}),
		CustomCopyPlugin({
			exclude: ['courses', 'php/dompdf'], // Directories to exclude from the copying process
		}),
	],
	publicDir: false, // Disable automatic copying of the public directory
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './src'),
		},
	},
	build: {
		outDir: 'dist',
		assetsDir: 'assets',
		rollupOptions: {
			output: {
				entryFileNames: `assets/[name].js?v=${version}`,
				chunkFileNames: `assets/[name].js?v=${version}`,
				assetFileNames: ({ name, type }) => {
					if (type === 'image') return `assets/img/[name].[ext]?v=${version}`;
					if (type === 'font') return `assets/fonts/[name].[ext]?v=${version}`;
					return `assets/[name].[ext]?v=${version}`;
				},
			},
		},
		sourcemap: !IS_PROD,
		emptyOutDir: false, // Prevent Vite from clearing the dist directory, to keep 'courses' folder
		terserOptions: {
			compress: {
				drop_console: IS_PROD,
			},
		},
	},
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `$version: "${version}";`
			}
		}
	},
	server: {
		port: 5000,
		proxy: {
			'/api': 'http://localhost:80',
		},
	},
	define: {
		'process.env.VUE_APP_BUILD': JSON.stringify(version),
	},
});

[gaby64]

This is my working config, might be a few more things to tweak:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
import path from 'path';
import fs from 'fs-extra';

const version = '2.96';
const IS_PROD = process.env.NODE_ENV === 'production';

// Custom plugin for copying public files with exclusions
function CustomCopyPlugin(options = {}) {
	return {
		name: 'custom-copy',
		enforce: 'post', // Ensures this runs before build
		async buildEnd() {
			const srcDir = options.src || path.resolve(__dirname, 'public');
			const destDir = options.dest || path.resolve(__dirname, 'dist');
			const exclude = options.exclude || [];

			try {
				const files = await fs.readdir(srcDir);
				for (const file of files) {
					if (exclude.includes(file)) {
						continue; // Skip excluded directories
					}
					const srcPath = path.join(srcDir, file);
					const destPath = path.join(destDir, file);
					await fs.copy(srcPath, destPath, { recursive: true });
					console.log(`Copied ${srcPath} to ${destPath}`);
				}
				console.log('Successfully copied public files.');
			} catch (err) {
				console.error('Error copying public files:', err);
			}
		},
	};
}

function VersioningPlugin() {
	return {
		name: 'url-versioning',
		enforce: 'post',
		apply: 'build',
		closeBundle() {
			const distPath = path.join(__dirname, 'dist');
			// Versioning for HTML files
			const htmlFilePath = path.join(distPath, 'index.html');
			try {
				let htmlContent = fs.readFileSync(htmlFilePath, { encoding: 'utf8' });
				htmlContent = htmlContent.replace(/(href|src)="((?!http:\/\/|https:\/\/|\/\/).+?)(\.js|\.css)"/g, `$1="$2$3?v=${version}"`);
				fs.writeFileSync(htmlFilePath, htmlContent);
				console.log('Versioning applied to local HTML assets.');
			} catch (error) {
				console.error('Error applying versioning to HTML assets:', error);
			}
			// Attempt to version JS files
			const dynamicImportRegex = /import\(\s*(\/\*[\s\S]*?\*\/)?\s*(['"])(.+?)\2\s*\)/g;
			fs.readdirSync(distPath).forEach(file => {
				if (file.endsWith('.js')) {
					const filePath = path.join(distPath, file);
					try {
						let jsContent = fs.readFileSync(filePath, { encoding: 'utf8' });
						jsContent = jsContent.replace(dynamicImportRegex, (match, comment, quote, path) => {
							// Only append version to local assets, skipping external URLs
							if (!path.startsWith('http') && !path.startsWith('//')) {
								// Preserve any existing Webpack chunk name comments
								const versionedPath = `${path}?v=${version}`;
								return `import(${comment ? `${comment} ` : ''}${quote}${versionedPath}${quote})`;
							}
							return match;
						});
						fs.writeFileSync(filePath, jsContent);
						console.log(`Versioning applied to JavaScript asset: ${file}`);
					} catch (error) {
						console.error(`Error applying versioning to JavaScript asset ${file}:`, error);
					}
				}
			});
		}
	};
};

export default defineConfig({
	plugins: [
		vue({
			template: {
				transformAssetUrls,
				compilerOptions: { // Enable refTransform if you need <script setup> ref sugar (requires Vue 3.2+)
					refTransform: true,
				}
			},
		}),
		quasar({
			importStrategy: 'kebab',
			rtlSupport: false,
			sassVariables: './src/styles/quasar.variables.sass'
		}),
		CustomCopyPlugin({
			exclude: ['courses', 'php/dompdf'], // Directories to exclude from the copying process
		}),
		VersioningPlugin()
	],
	base: './',
	publicDir: false, // Disable automatic copying of the public directory
	resolve: {
		alias: [
			{ find: 'vue', replacement: 'vue/dist/vue.esm-bundler' },
			{ find: '@', replacement: path.resolve(__dirname, './src')},
			{ find: /^~@\//, replacement: path.join(process.cwd(), './src/') }			
		],
	},
	build: {
		outDir: 'dist',
		assetsDir: 'assets',
		rollupOptions: {
			output: {
				entryFileNames: `app.js`, //
				chunkFileNames: `views/[name].js`, //?v=${version}
				assetFileNames: ({name}) => {
					if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) return `img/[name][extname]`; //?v=${version}
					if (/\.css$/.test(name ?? '')) return `css/[name][extname]`; //?v=${version}
					if (/\.(woff?2)$/.test(name ?? '')) return `fonts/[name][extname]`; // ?v=${version}
					return `[name][extname]`; // ?v=${version}
				},
			},
		},
		sourcemap: !IS_PROD,
		emptyOutDir: false, // Prevent Vite from clearing the dist directory, to keep 'courses' folder
		terserOptions: {
			compress: {
				drop_console: IS_PROD,
			},
		},
		commonjsOptions: {},
		// Adjust CSS and assets filenames
		cssCodeSplit: false,
		assetsInlineLimit: 4096
	},
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `$version: "${version}";`
			}
		}
	},
	server: {
		proxy: {
			'/api': 'http://localhost:80',
		},
	},
	define: {
		'process.env.VUE_APP_BUILD': JSON.stringify(version)
	},
});