date.localeData is not a function

[lysuse]

配置如下： vitePluginMomentToDayjs({ preset: 'antd' }), 点击日期选择框出现 date.localeData is not a function 错误！

[D3strukt0r]

I don't know what exactly is going on, but at work I can't even get a simple DatePicker to work. The error occurs when you try to open the date picker

import {DatePicker} from 'antd';
<DatePicker />

Getting this in the console looks like moment is still being used

import fs from 'fs';
import * as dotenv from 'dotenv';
import {defineConfig} from 'vite';
import {chunkSplitPlugin} from 'vite-plugin-chunk-split';
import react from '@vitejs/plugin-react';
import symfonyPlugin from 'vite-plugin-symfony';
import vitePluginMomentToDayjs from 'vite-plugin-moment-to-dayjs';
import browserslistToEsbuild from 'browserslist-to-esbuild';

dotenv.config();

export default defineConfig(({command}) => ({
  plugins: [
    chunkSplitPlugin({
      customChunk: ({file}) => {
        // Extract each node_modules package into a separate chunk in "js/npm/(user-)package".
        // Regex taken from: https://github.com/npm/validate-npm-package-name/blob/main/lib/index.js#L3
        const match = file.match(/node_modules\/(?:@([^\/]+?)[\/])?([^\/]+)/);
        if (match) {
          const name = match[1] ? `${match[1]}-${match[2]}` : match[2];
          return `npm/${name}`;
        }
        return null;
      },
    }),
    react(),
    symfonyPlugin({
      viteDevServerHostname: 'localhost',
    }),
    vitePluginMomentToDayjs(),
  ],
  base: '/build/',
  build: {
    target: browserslistToEsbuild(),
    outDir: './public/build',
    rollupOptions: {
      input: {
        'public': './assets/public.jsx',
        'portal': './assets/portal.jsx',
        'living-styleguide': './assets/living-styleguide.jsx',
      },
      output: {
        assetFileNames: (assetInfo) => {
          // Place asset in each corresponding folder "build/{img,font,etc.}/*".
          const info = assetInfo.name.split('.');
          let extType = info[info.length - 1];
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'img';
          } else if (/woff2?|otf|ttf|eot/.test(extType)) {
            extType = 'font';
          }
          return `${extType}/[name].[hash][extname]`;
        },
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js',
      },
    },
    manifest: true,
  },
  server: {
    host: '0.0.0.0',
    port: 3000,
    https: {
      // Get certificates if we are not building (CI has no certificates)
      key: command === 'build' ? null : fs.readFileSync('docker/run/certificates/key.pem'),
      cert: command === 'build' ? null : fs.readFileSync('docker/run/certificates/cert.pem'),
    },
    watch: {
      ignored: ['**/tests/**', '**/var/**', '**/vendor/**'],
    },
    origin: `https://${process.env.APP_URL}:3000`,
  },
  // Needed for antd
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
}));

as you can see I do am using your plugin The only custom thing i can even think about is setting the locale, but i don't think that has anything to do with this issue

import dayjsDeLocale from 'dayjs/locale/de-ch';
import dayjsFrLocale from 'dayjs/locale/fr-ch';
import dayjsItLocale from 'dayjs/locale/it-ch';
import dayjsEnLocale from 'dayjs/locale/en';
import dayjs from 'dayjs';

const locale = document.documentElement.lang ?? 'de';

const dayjsLocales = {
  de: dayjsDeLocale,
  fr: dayjsFrLocale,
  it: dayjsItLocale,
  en: dayjsEnLocale,
};

dayjs.locale(dayjsLocales[locale]);

Could it maybe be because of Vite 4?

{
  "dependencies": {
    "@vitejs/plugin-react": "^3.1.0",
    "browserslist-to-esbuild": "^1.2.0",
    "dotenv": "^16.0.3",
    "vite": "^4.1.2",
    "vite-plugin-chunk-split": "^0.4.7",
    "vite-plugin-moment-to-dayjs": "^1.0.7",
    "vite-plugin-symfony": "^0.7.5"
  }
}

[D3strukt0r]

In the meantime I'll follow the guide here to replace the DatePicker https://4x.ant.design/docs/react/replace-moment#DatePicker.tsx

import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';

const DatePicker = generatePicker(dayjsGenerateConfig);