I have a project with React Vite + Typescript + SWC. When I try to build it in my machine, and I have also tried in my co-works' machine, it builds successfully, I can test it and everything is working fine, but when I try to buld it in a Jenkins pipeline it fails.
I get the following error:
17:23:17 rendering chunks...
17:23:37 [31m[vite:build-html] The "fileName" or "name" properties of emitted chunks and assets must be strings that are neither absolute nor relative paths, received "f:/Jenkins/workspace/CI.DevOps/web/index.html".[39m
17:23:37 [32m✓ built in 54.67s[39m
17:23:37 [31merror during build:
17:23:37 RollupError: The "fileName" or "name" properties of emitted chunks and assets must be strings that are neither absolute nor relative paths, received "f:/Jenkins/workspace/CI.DevOps/web/index.html".
17:23:37 at error (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
17:23:37 at FileEmitter.emitFile (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18145:24)
17:23:37 at Object.generateBundle (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:38945:22)
17:23:37 at async Bundle.generate (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17006:9)
17:23:37 at async file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:19552:27
17:23:37 at async catchUnfinishedHookActions (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18983:16)
17:23:37 at async build (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:66815:22)
17:23:37 at async CAC.<anonymous> (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/dist/node/cli.js:845:9)�[39m
17:23:37 error Command failed with exit code 1.
17:23:37 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
17:23:37 Build step 'Execute Windows batch command' marked build as failure
This is my tsconfig.json
:
{
"compilerOptions": {
"useDefineForClassFields": true,
"lib": ["ES2023", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"target": "es2022",
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"allowJs": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": { "@/*": ["src/*"] }
},
"include": ["src", ".eslintrc.js"]
}
This is my vite.config.ts
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { visualizer } from 'rollup-plugin-visualizer';
import { defineConfig, PluginOption } from 'vite';
import svgr from 'vite-plugin-svgr';
export default defineConfig({
plugins: [
react(),
svgr(),
visualizer({
template: 'treemap',
gzipSize: true,
brotliSize: true,
filename: '.stats/treemap.html',
}) as PluginOption,
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
});
In my jenkins pipeline I'm simply running "yarn && yarn build". This is my yarn build command:
"build": "cross-env CI=false && tsc && vite build --outDir build",
I have found the issue that was causing the problem. It was related to symbolic links inside the Jenkins server. I had to add the line 'preserveSymlinks: true' to fix it. Here's the updated code:
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { visualizer } from 'rollup-plugin-visualizer';
import { defineConfig, PluginOption } from 'vite';
import svgr from 'vite-plugin-svgr';
export default defineConfig({
plugins: [
react(),
svgr(),
visualizer({
template: 'treemap',
gzipSize: true,
brotliSize: true,
filename: '.stats/treemap.html',
}) as PluginOption,
],
resolve: {
preserveSymlinks: true, // <- this line
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
});