Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
ipcjs opened this issue Jun 5, 2024 · 4 comments
Labels

Comments

@ipcjs
Copy link

ipcjs commented Jun 5, 2024

  • I have searched the issues of this repository and believe that this is not a duplicate.

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.
@ipcjs ipcjs changed the title Vite5兼容Ant3的Less变量时,报SyntaxError: Cannot use import statement outside a module错误 使用Vite5,配置兼容Ant3的Less变量时,报SyntaxError: Cannot use import statement outside a module错误 Jun 5, 2024
@cc-hearts
Copy link
Contributor

-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
Copy link
Author

ipcjs commented Jun 24, 2024

感谢解答

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

@ipcjs
Copy link
Author

ipcjs commented Jun 24, 2024

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

有点坑🫠

Copy link

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants