reactjstypescriptjenkinsvite

React Vite + Typescript fails in Jenkins but succeeds locally


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",

Solution

  • 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'),
        },
      },
    });