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

Vite + Vue app throws error that cannot read property '$isServer' of undefined on fresh install #3370

Closed
6 tasks done
liugangtaotie opened this issue May 12, 2021 · 11 comments

Comments

@liugangtaotie
Copy link

liugangtaotie commented May 12, 2021

Describe the bug

When initializing a fresh Vue app with Vite, I keep getting an error when running the dev server. This seems to be a 2.3.0 regression as it doesn't happen with 2.2.4.

 [vite] Uncaught TypeError: Cannot read property '$isServer' of undefined
    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/dom.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1189)
    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)
    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/popup/popup-manager.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1478)
    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)
    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/popup/index.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1701)
    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)
    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/vue-popper.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:2546)
    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)
    at Object.5 (:8080/node_modules/.vite/element-ui.js?v=675d2c77:6861)
    at __webpack_require__ (:8080/node_modules/.vite/element-ui.js?v=675d2c77:6547)

Reproduction

  • Initialize a brand new project with npm init @vitejs/app
  • Choose Vue as the framework
  • cd into the directory and run npm install
  • run npm run dev
  • See the error above

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 5.10 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.4/bin/yarn
    npm: 7.11.2 - ~/.nvm/versions/node/v14.15.4/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 81.0.1
    Safari: 14.1
  npmPackages:
    vite: ^2.2.4 => 2.3.0 

Used package manager:

Logs

[vite] Uncaught TypeError: Cannot read property '$isServer' of undefined
    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/dom.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1189)
    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)
    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/popup/popup-manager.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1478)
    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)
    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/popup/index.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1701)
    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)
    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/vue-popper.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:2546)
    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)
    at Object.5 (:8080/node_modules/.vite/element-ui.js?v=675d2c77:6861)
    at __webpack_require__ (:8080/node_modules/.vite/element-ui.js?v=675d2c77:6547)

Before submitting the issue, please make sure you do the following

  • 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.
  • Provide a description in this issue that describes the bug.
  • 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 https://github.com/vuejs/vue-next instead.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
@so-hard
Copy link

so-hard commented May 12, 2021

vite v2.2.4 用着好好的.今天开个新项目就哦豁.

@fuxuejun
Copy link

fuxuejun commented May 13, 2021

我是把vite升级到最新的2.3.2,在项目的package.json里边把esbuild降级到0.10.2,然后手动复制 esbuild [0.10.2]版本到 node_modules\vite\node_modules\esbuild目录下边。

esbuild 0.11.0版本开始,import动态生成的代码逻辑变了。

https://github.com/evanw/esbuild/releases/tag/v0.11.0

@aafnnp
Copy link

aafnnp commented May 13, 2021

一样的bug,请问解决了吗?

@aafnnp
Copy link

aafnnp commented May 13, 2021

我是把vite升级到最新的2.3.2,在项目的package.json里边把esbuild降级到0.10.2,然后手动复制 esbuild [0.10.2]版本到 node_modules\vite\node_modules\esbuild目录下边。

esbuild 0.11.0版本开始,import动态生成的代码逻辑变了。

https://github.com/evanw/esbuild/releases/tag/v0.11.0

尝试了,不起作用

@fuxuejun
Copy link

把原来的node_modules删掉, esbuild-windows-64 这个也要引用进来,不然没有esbuild.exe。
把esbuild目录+esbuild.exe都复制到vite下边的node_modules下边的esbuild文件夹里边。

"esbuild": "0.10.2",
"esbuild-windows-64": "0.10.2",

@aafnnp
Copy link

aafnnp commented May 14, 2021

把原来的node_modules删掉, esbuild-windows-64 这个也要引用进来,不然没有esbuild.exe。
把esbuild目录+esbuild.exe都复制到vite下边的node_modules下边的esbuild文件夹里边。

"esbuild": "0.10.2",
"esbuild-windows-64": "0.10.2",

这个方法尝试过了,无效

@jhxxs
Copy link

jhxxs commented May 17, 2021

我今天也遇到这个问题了,但是解决办法稀里糊涂的。
先手动安装2.5版本的vue,此时跑vite会报错,再使用cnpm i vue -S把最新版的vue安装回来,然后就能跑了。
不知道为啥 : (

@xkelvinx666
Copy link

xkelvinx666 commented May 20, 2021

2.2.4正常,2.3.0就异常了,我一排查下commit,发现是这个esbuild更新导致的。临时可以先把vite切换回2.2.4版本

测试2.3.3源码手动指定esbuild: 0.9.3,编译后,这个错误也不会出现

05fd1e2#diff-949e137b027a941e9a8dabb980971ab5b7147f895fc06ab2ff0bb0923d981606


补充: 更新esbuild会导致初始化node_modules包到.vite时的代码不一样,详情查看,
it is different between esbuild 0.11 and esbuild 0.9 when initializing the node_modules package to .vite

#3370 (comment)

我是用element-ui 2.15.1出现这个问题,我测试vue3+element plus是正常的。应该是element-ui的使用方式不正确导致的

I have this problem with element-ui 2.15.1. I tested vue3 + element plus and it work. It should be caused by incorrect use of element-ui

修复方法(How to Fix)

  1. vite降级为2.2.4. vite reinstall -> 2.2.4
  2. 通过npm link 并手动降级源码的esbuild版本并重建vite npm link Vite (install esbuild 0.9.3 in vite source file and rebuild), the same as solution 1
    3.每次运行dev时,复制由esbuild0.9.3生成的.vite文件 copy the .vite file which builded by esbuild0.9.3 everytime you run dev
  3. 删除你的错误代码并通过html脚本导入代码 remove your error code and import code by html script

@xkelvinx666
Copy link

有个兄弟使用插件修复了此问题
Thank for dravenww to fix this problem

https://www.npmjs.com/package/esbuild-plugin-vite-element-ui
https://github.com/dravenww/esbuild-plugin-vite-element-ui#readme

@liuarui
Copy link

liuarui commented Jun 1, 2021

还有一种解决办法,通过cdn方式引入vue、vue-route和element-ui可行

@bluwy
Copy link
Member

bluwy commented Mar 7, 2022

Can't reproduce this in the latest version now.

@bluwy bluwy closed this as completed Mar 7, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Mar 22, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

9 participants