Error when running build-storybook on a Vite library `ENOENT: no such file or directory, mkdir '.\.\storybook-static'` (Windows OS)

[hmidmrii]

Current Behavior

When I try to run nx shared:build-storybook I'll face this error:

=> Failed to build the preview
[nx-copy-assets-plugin] ENOENT: no such file or directory, mkdir '.\.\storybook-static'

Expected Behavior

Not having an error

GitHub Repo

https://github.com/hmidmrii/shortpoint-standalone

Steps to Reproduce

1. initialize a vite lib.
2. initialize storybook for that lib
3. run nx mylib:build-storybook (on Windows OS)

Nx Report

Node           : 20.14.0
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 10.7.0

nx                 : 20.0.1
@nx/js             : 20.0.1
@nx/jest           : 20.0.1
@nx/eslint         : 20.0.1
@nx/workspace      : 20.0.1
@nx/cypress        : 20.0.1
@nx/devkit         : 20.0.1
@nx/esbuild        : 20.0.1
@nx/eslint-plugin  : 20.0.1
@nx/node           : 20.0.1
@nx/playwright     : 20.0.1
@nx/plugin         : 20.0.1
@nx/react          : 20.0.1
@nx/storybook      : 20.0.1
@nx/vite           : 20.0.1
@nx/web            : 20.0.1
@nx/webpack        : 20.0.1
typescript         : 5.6.3
---------------------------------------
Registered Plugins:
@nx/vite/plugin
@nx/eslint/plugin
@nx/playwright/plugin
@nx/jest/plugin
nx-stylelint/plugin
@nx/storybook/plugin
---------------------------------------
Community plugins:
@jpmart/nx-drizzle : 0.0.3
@nx-bun/nx         : 1.2.0
nx-stylelint       : 18.0.0
---------------------------------------
Local workspace plugins:
         @standalone-tools/cli

Failure Logs

x Build failed in 6.41s
=> Failed to build the preview
[nx-copy-assets-plugin] ENOENT: no such file or directory, mkdir '.\.\storybook-static'
    at mkdirSync (node:fs:1372:26)
    at C:\Users\abdul\Projects\shortpoint-standalone\node_modules\@nx\js\src\utils\assets\copy-assets-handler.js:14:49
    at Set.forEach (<anonymous>)
    at CopyAssetsHandler.defaultFileEventHandler [as callback] (C:\Users\abdul\Projects\shortpoint-standalone\node_modules\@nx\js\src\utils\assets\copy-assets-handler.js:14:10)
    at C:\Users\abdul\Projects\shortpoint-standalone\node_modules\@nx\js\src\utils\assets\copy-assets-handler.js:81:18
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async CopyAssetsHandler.processAllAssetsOnce (C:\Users\abdul\Projects\shortpoint-standalone\node_modules\@nx\js\src\utils\assets\copy-assets-handler.js:74:9)
    at Object.writeBundle (C:\Users\abdul\Projects\shortpoint-standalone\packages\vite\plugins\nx-copy-assets.plugin.ts:40:7)
    at async Promise.all (index 2)

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

The error disappear after removing nxCopyAssetsPlugin(['*.md']) from my Vite config,
I did trace the error, and it's because of path.join("win path", "posix path"),

it starts with this line where config.root which is posix path (that what vite gives you), and config.build.outDir which is a win path (if you're on Windows OS), we join those using path.join which cause the path to break,

here's my Vite config:

// vite.config.ts

/// <reference types='vitest' />
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import react from '@vitejs/plugin-react-swc';
import * as path from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
  root: __dirname,
  cacheDir: '../../node_modules/.vite/libs/shared',
  plugins: [
    react(),
    nxViteTsPaths(),
    nxCopyAssetsPlugin(['*.md']),
    dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') }),
  ],
  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },
  // Configuration for building your library.
  // See: https://vitejs.dev/guide/build.html#library-mode
  build: {
    outDir: '../../dist/libs/shared',
    emptyOutDir: true,
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
    lib: {
      // Could also be a dictionary or array of multiple entry points.
      entry: 'src/index.ts',
      name: 'shared',
      fileName: 'index',
      // Change this to the formats you want to support.
      // Don't forget to update your package.json as well.
      formats: ['es', 'cjs'],
    },
    rollupOptions: {
      // External packages that should not be bundled into your library.
      external: ['react', 'react-dom', 'react/jsx-runtime'],
    },
  },
  test: {
    setupFiles: './vitest.setup.ts',
    watch: false,
    globals: true,
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    reporters: ['default'],
    coverage: {
      reportsDirectory: '../../coverage/libs/shared',
      provider: 'v8',
    },
  },
});

The storybook config:

// .storybook/main.ts

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@chromatic-com/storybook'],

  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: 'vite.config.ts',
      },
    },
  },

  docs: {},

  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },

  core: {
    enableCrashReports: true,
  },
};

export default config;

// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/recipes/storybook/custom-builder-configs