I had a React application deployed on Kubernetes cluster – built using webpack + babel, deployed using express in Docker container. Now I have migrated it to Vite + nginx in pods for serving static content instead. Cluster is opened via nginx ingress controller. When I try to reach the site it still server me the old index.html with wrong configuration which results in this error in the console:
<code>Uncaught SyntaxError: Unexpected token '<'
</code>
<code>Uncaught SyntaxError: Unexpected token '<'
</code>
Uncaught SyntaxError: Unexpected token '<'
since one of the js files server HTML code. How to avoid such deprecated version of HTMl to appear?
This is the Vite config file:
<code>import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsConfigpaths from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [react(), tsConfigpaths()],
build: {
outDir: 'dist',
commonjsOptions: { transformMixedEsModules: true },
rollupOptions: {
output: {
assetFileNames: 'assets/[name].[hash].[ext]',
chunkFileNames: 'assets/[name].[hash].js',
entryFileNames: 'assets/[name].[hash].js',
},
},
},
});
</code>
<code>import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsConfigpaths from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [react(), tsConfigpaths()],
build: {
outDir: 'dist',
commonjsOptions: { transformMixedEsModules: true },
rollupOptions: {
output: {
assetFileNames: 'assets/[name].[hash].[ext]',
chunkFileNames: 'assets/[name].[hash].js',
entryFileNames: 'assets/[name].[hash].js',
},
},
},
});
</code>
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsConfigpaths from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [react(), tsConfigpaths()],
build: {
outDir: 'dist',
commonjsOptions: { transformMixedEsModules: true },
rollupOptions: {
output: {
assetFileNames: 'assets/[name].[hash].[ext]',
chunkFileNames: 'assets/[name].[hash].js',
entryFileNames: 'assets/[name].[hash].js',
},
},
},
});