question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vite uses Ant to report some errors

See original GitHub issue

Describe the bug

就是引用ant 后, 在使用时报告相关错误如下:

不知道为什么 会引用 ant 的package.json, 开始我以为是需要使用rollup的json插件来解决问题,但是尝试后无效。

  • main.ts image

  • chrome console image

Reproduction

链接地址

System Info

  • vite 2.0.0 beta.4
  • vue 3.0.5
  • ant-design-vue 2.0.0-rc.7

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. Provide the error log here.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
yyx990803commented, Jan 5, 2021

I’ve fixed the issue with package.json, but there are a few other problems:

  1. You are not optimizing And Design Vue, so it’s loaded as native ESM. However, it imports non-ESM dependencies (e.g. component-classes or raf, these actually are CommonJS packages), so it won’t run natively in the browser. Ant Design Vue should refactor to avoid these CommonJS dependencies.

  2. Even when pre-optimizing ADV, it relies on some outdated dependencies like component-classes which uses dynamic require calls to non-existent dependencies… these only work in simulated cjs runtimes and do not play well with Rollup’s CommonJS handling, and should be avoided.

Basically Ant Design Vue needs to remove the dependency on these problematic packages to be Vite comaptible.

0reactions
qq31311137commented, Jan 7, 2021

这个问题是在 vite2 出现的,vite1 没有问题

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting an error when run "vite preview" (use Vite + React + ...
I am building a library with vite, react and ant design. The build command vite build runs fine without warnings, but when I...
Read more >
Troubleshooting - Vite
Syntax Error / Type Error happens​​ This is because Vite uses ESM and it is always strict mode inside ESM. For example, you...
Read more >
vite internal server error | The AI Search Engine You Control
I am using vite's proxy server option in my vite.config.js so all requests ... error: Optimizer should replace all usages of $() with...
Read more >
How to use Ant Design with Vue 3 - LogRocket Blog
In this short guide, we'll look at how to use the ant-design-vue package in a Vue 3 application as well as how to...
Read more >
Getting Started - Ant Design
Now that you know the basics of using antd components, you are welcome to explore more components in the codesandbox. When reporting a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found