vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
https://antdv.com/
Other
19.94k stars 3.75k forks source link

使用Vite5,配置兼容Ant3的Less变量时,报`SyntaxError: Cannot use import statement outside a module`错误 #7630

Open ipcjs opened 1 month ago

ipcjs commented 1 month ago

Version

4.2.1

Environment

macOS Sonoma 14.4.1; Chrome 125.0.6422.141; Vue 3.4.21;node v18.20.2

Reproduction link

https://github.com/ipcjs/ant4-vite5-less-modify-vars-incompatible

Steps to reproduce

  1. git clone https://github.com/ipcjs/ant4-vite5-less-modify-vars-incompatible.git
  2. cd ant4-vite5-less-modify-vars-incompatible && pnpm i
  3. pnpm dev

What is expected?

正常启动开发服务

What is actually happening?

(node:32763) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
failed to load config from /Volumes/Data/github/@tg/@demos/ant-vite-compat-bug/vite.config.ts
error when starting dev server:
/Volumes/Data/github/@tg/@demos/ant-vite-compat-bug/node_modules/.pnpm/ant-design-vue@4.2.1_vue@3.4.27/node_modules/ant-design-vue/es/theme/convertLegacyToken.js:1
import formatToken from './util/alias';
^^^^^^
//
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:76:18)
at wrapSafe (node:internal/modules/cjs/loader:1283:20)
at Module._compile (node:internal/modules/cjs/loader:1328:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
at Module.load (node:internal/modules/cjs/loader:1203:32)
at Module._load (node:internal/modules/cjs/loader:1019:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:203:29)
at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
at async loadConfigFromBundledFile (file:///Volumes/Data/github/@tg/@demos/ant-vite-compat-bug/node_modules/.pnpm/vite@5.2.12_@types node@20.14.2_less@4.2.0/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:69911:21)
ELIFECYCLE Command failed with exit code 1.
cc-hearts commented 1 month ago
-import { theme } from 'ant-design-vue';
-import convertLegacyToken  from 'ant-design-vue/es/theme/convertLegacyToken';

+import { theme } from 'ant-design-vue/lib';
+import convertLegacyTokenModule from 'ant-design-vue/lib/theme/convertLegacyToken';
+const convertLegacyToken = convertLegacyTokenModule.default
ipcjs commented 1 month ago

感谢解答

我仔细看了下TS的相关文档,确定它是可以正确处理 在ESM文件导入CommonJS文件的 所以之所以会报错是node的问题吗?有没有相关文档可以参考下🤔️

ipcjs commented 1 month ago

好像找到了相关的说明,看起来是node没有识别__esModule这个标识,导致的: https://github.com/nodejs/node/issues/40891

有点坑🫠