Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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",
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    enter code hereFound it, I think:

    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: path.resolve(__dirname, '.stats/treemap.html'),
    }) as PluginOption,
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

    The filename here is relative, not aboslute. Maybe you have a file in the .gitignore that is not pushed and ignore that error

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search