vitejs/vite

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

liugangtaotie opened this issue · 11 comments

liugangtaotie commented

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 commented

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

fuxuejun commented

我是把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

  • 👍4
  • 🚀1
aafnnp commented

一样的bug，请问解决了吗？

aafnnp commented

我是把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 commented

把原来的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 commented

把原来的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 commented

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

xkelvinx666 commented

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
  • 👍2
xkelvinx666 commented

有个兄弟使用插件修复了此问题
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

  • 👍2
  • 🎉1
  • 🚀1
liuarui commented

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

bluwy commented

Can't reproduce this in the latest version now.