在使用antdesign-vue1.7.8的date-picker组件,通过moment库设置日期组件的default-value，使用webpack编译运行没有问题,改为vite编译运行后会报错

[wucyAAA]

Describe the bug

我的环境是：[email protected][email protected][email protected]
在模板中使用antdesign-vue的date-picker组件,通过moment库设置日期组件的default-value，在webpack编译运行是不会报错的，我想体验下vite，就换成了vite，发现就会报错，具体报错来源是moment库报的。

Reproduction

https://stackblitz.com/edit/vitejs-vite-vwzkll?file=App.vue

Steps to reproduce

npm i
npm run dev

System Info

windows10 64位 chrome

Used Package Manager

npm

Logs

Uncaught TypeError: (void 0) is not a function
    at validator6 (ant-design-vue.js?v=df2ac479:31461:89)
    at assertProp (chunk-DDJN2YAM.js?v=d4570444:3118:10)
    at validateProp (chunk-DDJN2YAM.js?v=d4570444:3071:5)
    at _loop_1 (chunk-DDJN2YAM.js?v=d4570444:3241:17)
    at initProps$1 (chunk-DDJN2YAM.js?v=d4570444:3260:5)
    at initState (chunk-DDJN2YAM.js?v=d4570444:3215:5)
    at Vue2._init (chunk-DDJN2YAM.js?v=d4570444:3488:5)
    at new VueComponent (chunk-DDJN2YAM.js?v=d4570444:3593:12)
    at createComponentInstanceForVnode (chunk-DDJN2YAM.js?v=d4570444:2815:10)
    at init (chunk-DDJN2YAM.js?v=d4570444:6097:49)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-vwzkll (Open reproduction)

[bluwy]

Updated the issue description with the error log, it seems to be caused by (the void 0):

// node_modules/ant-design-vue/es/_util/moment-util.js
var import_isNil = __toESM(require_isNil());
var TimeType = {
  validator: function validator6(value27) {
    return typeof value27 === "string" || (0, import_isNil.default)(value27) || (void 0)(value27);
  }
};

Source code at https://github.com/vueComponent/ant-design-vue/blob/1.x/components/_util/moment-util.js:

import interopDefault from './interopDefault';
import * as moment from 'moment';
import warning from './warning';
import isNil from 'lodash/isNil';

export const TimeType = {
  validator(value) {
    return typeof value === 'string' || isNil(value) || moment.isMoment(value);
  },
};

I'm not sure why esbuild bundles moment.isMoment as undefined

[btea]

I tried it, it seems to need moment.default.isMoment to get isMoment 🤔

[sun0day]

I think this is a limitation of esbuild. Since original moment.js is in iife, esbuild transform it to esm when pre-bundling, the transformed code looks like:

// ...
var moment_default = hooks;
export {
  moment_default as default
};

which will cause

import * as moment from 'moment'
console.log(moment.isMoment) // undefined
console.log(moment.default.isMoment) // isMoment

[YaminZheng]

一样的错，完全没有头绪

[Sun79]

Using patch-package or pnpm patch to remove the "jsnext:main" field from the package.json file of moment can temporarily resolve this issue.

diff --git a/package.json b/package.json
index 6c1205c9334a15c11757d283b804b027de52314d..3eb02b5955811cbe78af224e3a41ecc34497efa6 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
         "ender"
     ],
     "main": "./moment.js",
-    "jsnext:main": "./dist/moment.js",
     "typings": "./moment.d.ts",
     "typesVersions": {
         ">=3.1": {

[defghy]

use alias can solve

    resolve: {
      alias: [
        {
          find: /^moment$/,
          replacement: resolve('./node_modules/moment/moment.js'),
        },
      ],

[tomatobybike]

use this can resove

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
     plugins: [vue()],
     resolve: {
     alias: {
          'moment': 'moment/moment.js'
     }
   }
});

[CarlDuFromChina]

使用这个可以回收

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
     plugins: [vue()],
     resolve: {
     alias: {
          'moment': 'moment/moment.js'
     }
   }
});

It works!