Element: [Bug Report] Tooltip component useless while prepack ElementUI by DllPlugin

Created on 14 Nov 2017 · 56Comments · Source: ElemeFE/element

Element UI version

1.4.8

OS/Browsers version

windows10 / chrome 62

Vue version

2.5.2

Reproduction Link

https://github.com/zhaokuohaha/dll-element-ui-test

Steps to reproduce

详细见项目Readme.md

运行 npm run dll 可以看到element-ui及其各个组件已经被打包到vendor.dll中
运行 npm run build --report 可以看到在编译生成的代码中已经没有了ElementUI的依赖, 符合预期需求
运行npm run dev发现鼠标移动到按钮上的时候没有弹出ToolTip Bug重现.

What is Expected?

Tooltp能够正常显示

What is actually happening?

Tooltip没有显示, 并且没有报错

question

Source

zhaokuohaha

👍6

Most helpful comment

在 webpack.dll.conf.js 里面加入

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
  },

Constaline on 27 Mar 2019

👍9 👀1 🚀1 ❤1 🎉1 😄1

All 56 comments

Translation of this issue:

Element UI version

1.4.8

OS/Browsers version

Windows10 / Chrome 62

Vue version

2.5.2

Reproduction Link

https://github.com/zhaokuohaha/dll-element-ui-test

Steps to reproduce

see item Readme.md in detail

running npm run dll, you can see that element-ui and its components have been packaged into vendor.dll
running npm run build --report, you can see that there is no dependency on ElementUI in the compiled code, which meets the expected requirements
running npm run dev, found that the mouse moved to the button when there is no pop-up ToolTip Bug reproduction

What is Expected?

Tooltp can display normally

What is actually happening?

Tooltip does not display and does not report errors

element-bot on 14 Nov 2017

先下结论：这一切并不是element-ui的问题，全部都是你的webpack配置问题。

npm run dev没有预期现象发生。。把你base.config下面的 plugins注释掉。。
我仓库有一份更详细的webpack配置修改，有兴趣可以看看
https://github.com/liaoyinglong/vue-template

liaoyinglong on 24 Nov 2017

@liaoyinglong 如果注视掉的话, 打包后vendor.hash.js体积还是会恨到, 就是 emmm 没有把 vendor.dll.js正确引用到. 😂

我先看看您的项目把, 感觉里面能找到答案

zhaokuohaha on 24 Nov 2017

我们不认为这个是 Element 本身的问题，先关了。如果能证明是 Element 的问题，欢迎再打开。

furybean on 17 Jan 2018

@zhaokuohaha 我遇到了类似问题，是加载时序导致的问题。

vendor.dll.js 没有加载完毕的时候，vue template 中的el-popover 已经开始解析了，导致出现 Failed to resolve directive: popover 错误。

解决方法是在使用 popover 的地方(例如你demo的dll-element-ui-test/src/components/HelloWorld.vue)显示 import Popover：

import { Vue } from 'vue';
import { Popover } from 'element-ui';
Vue.use(Popover);

yxl on 1 Apr 2018

好的我试试看, 谢谢~

zhaokuohaha on 2 Apr 2018

只有Tooltip组件没显示，其他组件都没问题，希望能够解决问题毕竟element-ui解压有0.5M 开发模式会节省很多时间！

mythxiaoai on 25 May 2018

2.4中还有这个问题

shimuren on 5 Jun 2018

👍11

2.4中还有这个问题,怎么我已经单独注册了 tooltip还是有问题

ghost on 16 Jul 2018

我在测试项目里面做了一点点尝试, 但是没有什么实质性的进展:
https://github.com/zhaokuohaha/dll-element-ui-test/issues/1

@VitaChen1228 @shimuren @mythxiaoai

zhaokuohaha on 16 Jul 2018

在packpackge.json中的dependencies添加“element-ui": "^2.4.6"：
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"element-ui": "^2.4.6"
}
这样是可以的

snailsdream on 14 Aug 2018

@707293891 我试着把我的依赖升级到2.4.6 但是好像还是没有什么效果:
https://github.com/zhaokuohaha/dll-element-ui-test/commit/38c5a9f94bf57b3ac28a2b8f7ce4626e19ee73b0

你是用@vue/cli 3.0来构建的项目么, 还是以前的vue-cli 2.x ? 难道是webpack升级之后解决了这个问题?

zhaokuohaha on 14 Aug 2018

@zhaokuohaha "webpack": "^3.6.0",

snailsdream on 14 Aug 2018

@zhaokuohaha 是用的最新的cli

snailsdream on 14 Aug 2018

@707293891 你的项目有开源嘛, 我想去看一下相关配置 😂

zhaokuohaha on 14 Aug 2018

@zhaokuohaha 没有改动什么配置，用vue-cli生成项目，然后把element配置加进去，然后安装

snailsdream on 14 Aug 2018

emmm 所以... 用webpack-plugin-dll了么 @707293891 , 可能我们说的不是同一个问题

zhaokuohaha on 14 Aug 2018

的确存在这个问题

samchen08 on 15 Aug 2018

页面上innerHTML 元素之后 element-ui的tooltip 直接失效大家有遇见过吗

anActor on 16 Aug 2018

😕3 👍3 ❤1 🎉1 😄1 👎1

@zhaokuohaha 问题是一样到，可能原因不一样

snailsdream on 16 Aug 2018

那就不知道了, 可以看一下我的测试项目有什么不一样, 我的是webpack 3.x , vue-cli 2.x, vue 2.5.x, element 2.4.6

zhaokuohaha on 16 Aug 2018

有可能在后期npm install 的时候又把element污染了,我这重新在git上clone了一份就能用了~~
... ...
之前也深入了解了一下,下图是tooltip失效时的一个属性,

再对比下正常的

找到了原因,然并卵,并不知道怎么破~~
顺便说下,Vue.js devtools,谷歌浏览器插件,了解一下.

yangdi1993 on 30 Aug 2018

你这走的比我远哈哈哈，这可能是一个很有用的信息，我晚上回去搞一搞看

zhaokuohaha on 30 Aug 2018

大家都遇到这个问题，官方却说不是问题，大家只好自己动手，丰衣足食了，哈

samchen08 on 2 Sep 2018

一个并无卵用的记录

顺着 @yangdi1993 的思路, 看了一下源码发现vue-popper是通过mixin的方式注入的, 于是手动写了个mixin测试, 发现像我这个简单的mixin混入, 是没有问题的

测试项目打开了devtool, 同时将dllreference移动到product中, 这样便于在两种环境下开devtool对比

另外发现, 这个三个属性在vue-popper中是没有声明的, 而是在create的时候动态增加的, 不知道这个问题会不会是导致无法显示的原因, 待查....

对象属性动态添加测试

zhaokuohaha on 2 Sep 2018

我也遇到这样的问题,但是,我用了你们对话的方法,还是不行.

Little-Fan on 15 Oct 2018

@fanxiaolong 我觉得还是要么不要打包dll, 要么用cdn的办法引入好一些. 毕竟element也是一个要不断更新的包:joy:

zhaokuohaha on 16 Oct 2018

@zhaokuohaha ，加了Popover也不行，请问你怎么解决

lsx18 on 17 Oct 2018

@lsx18 没有解决, 放弃dll打包了 😂

zhaokuohaha on 17 Oct 2018

@zhaokuohaha 转用http://element.eleme.io/#/zh-CN/component/popover#popover-dan-chu-kuang 怎么样？

lsx18 on 17 Oct 2018

@lsx18 用时可以用啦. 至于实际上用不用还是看需求吧

zhaokuohaha on 18 Oct 2018

@zhaokuohaha @lsx18 我已经解决了我的问题,我是升级了npm包之后,其他什么都不用调整,就可以了.
npm的我给大家发一下.以下,是我当前npm包的配置,你们对比一下,看一看.
`
{
"vue": "^2.5.17",
"element-ui": "^2.4.8",
"vue-template-compiler": "^2.5.17", //比较重要的一个包,升级一下.
"webpack": "^3.6.0"
}

Little-Fan on 22 Oct 2018

👍1

代码样式,没有出来,重新发一下.

{
"vue": "^2.5.17",
 "element-ui": "^2.4.8",
"vue-loader": "^10.0.2",
"vue-template-compiler": "^2.5.17",     //比较重要的一个包,一定要升级一下.
"webpack": "^3.6.0",
}

Little-Fan on 22 Oct 2018

@fanxiaolong 我刚刚按照你的配置试了一下，好像还是没有解决。不知道是什么原因。

我升级完了之后重新运行下面的命令，结果tootip还是不能显示，运行npm run dev是可以正常显示的

npm run dll

npm run build

# 我本地装了 node-static 来启动一个简单的服务器
static ./dist/

项目指路 -> dll-element-ui-test

看最新一次提交。

而且发现一个问题： vue-template-compiler升级之后， node_modules里面没有发现这个包了，只有下面这些：

zhaokuohaha on 23 Oct 2018

@zhaokuohaha 你把以前的相关的包重新删除了,再重新全部安装一下,这个问题,我觉得主要是出在,打包时候的模板编译那里, "vue-loader",vue-template-compiler"这个两个包,一定要安装正确版本.

Little-Fan on 24 Oct 2018

webpack.renderer.config.js里面

WenHua39 on 26 Nov 2018

webpack.renderer.config.js 里面，大约21行左右， let whiteListedModules = ['vue', 'element-ui']把element-ui加入白名单就可以了

WenHua39 on 26 Nov 2018

👍10 🎉1

eleUI依赖vue.runtime.esm.js

但是你的项目依赖的是vue.esm.js

最终dll里面有两个vue，就导致tooltip的popper没有初始化

解决方法，保持dll.config和base.config中alias的vue一致

huangjinqiang on 18 Dec 2018

👍5

@fanxiaolong 我改了好久没解决，看到你这条，我就按照你说的，把node_moudules里面的东西都删了，重新 npm install . 完美解决

826559926 on 22 Dec 2018

{
"vue": "^2.5.22",
"element-ui": "^2.4.11",
"vue-loader": "^15.5.1",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.28.2",
}
把node_moudules里面的东西都删了，试过重新 npm install 都解决不了

CHENLiver on 22 Jan 2019

{
"vue": "^2.5.22",
"element-ui": "^2.4.11",
"vue-loader": "^15.5.1",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.28.2",
}
把node_moudules里面的东西都删了，试过重新 npm install 都解决不了

我那个是因为依赖包冲突，你这个重新安装都不行肯定是配置文件的问题，package.json的文件要修改才行，不然每次npm imstall下载下来的都是一样的东西

826559926 on 22 Jan 2019

{
"vue": "^2.5.22",
"element-ui": "^2.4.11",
"vue-loader": "^15.5.1",
"vue-template-compiler": "^2.5.22",
"webpack": "^4.28.2",
}
把node_moudules里面的东西都删了，试过重新 npm install 都解决不了

"axios": "^0.18.0",
"better-scroll": "^1.13.2",
"echarts": "^4.1.0",
"element-ui": "^2.4.7",
"js-cookie": "^2.2.0",
"lowdb": "^1.0.0",
"moment": "^2.22.2",
"promise.prototype.finally": "^3.1.0",
"v-charts": "^1.17.10",
"vee-validate": "^2.0.9",
"vue": "^2.5.2",
"vue-clipboard2": "^0.2.1",
"vue-i18n": "^7.6.0",
"vue-infinite-loading": "^2.4.3",
"vue-router": "^3.0.1",
"vuedraggable": "^2.17.0",
"vuex": "^3.0.1"

这个是我的依赖。版本还有依赖之间是否有冲突都要注意

826559926 on 22 Jan 2019

有可能在后期npm install的时候又把元素污染了，我这重新在git上克隆了一份就能用了~~
... ...前前
也深入了解了一下，下图是tooltip失效时的一个属性，再对比下正常的找到了原因，然并卵，并不知道怎么破~~ 顺便说下，Vue.js devtools，谷歌浏览器插件，了解一下。

you can do like this

import { Tooltip } from 'element-ui'
Tooltip.props.popperOptions = {
  default: () => {
    return {
      arrowOffset: 0,
      boundariesPadding: 10,
      gpuAcceleration: false,
      offset: 0,
      placement: 'bottom'
    }
  }
}

in your entry file

mahu032 on 28 Jan 2019

👀1

删了之后 install 可以了什么原理

RoadMillion on 22 Feb 2019

删了之后 install 可以了什么原理

因为我这个项目地址是别人创建并初始化的，我在拉项目的时候被别人的代码污染了，导致node_moudules里面出现了冲突。我的好像是webpack和vee的冲突。
总之先保证自己的package.json里面的依赖没有问题，然后删掉node_moudules里面的文件重新install

826559926 on 22 Feb 2019

在 webpack.dll.conf.js 里面加入

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
  },

Constaline on 27 Mar 2019

👍9 👀1 🚀1 ❤1 🎉1 😄1

alias
好使了666

sshien on 10 Apr 2019

问题是elTooltip引入了vue, 　重写beforeCreate方法可以解决这个问题，代码如下：

ElementUI.ElTooltip.beforeCreate = function () {
  if (this.$isServer) return;

  this.popperVM = new Vue({
    data: { node: '' },
    render(h) {
      return this.node;
    }
  }).$mount();
  let that = this
  this.debounceClose = debounce(200, () => this.handleClosePopper());
  } 
},

在el-table表头引用的elTooltip也要能通过重写，替换Vue

wfwfwf on 23 Apr 2019

在 webpack.dll.conf.js 里面加入

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
  },

这种方式在vue-cli3配置了，无效；　

wfwfwf on 23 Apr 2019

解决了

# 这样是不显示tooltip的
<el-tooltip effect="dark" content="你好啊">
    放我这
</el-tooltip>

# 这样显示tooltip的
<el-tooltip effect="dark" content="你好啊">
    <p>放我这</p>
</el-tooltip>

看起来是el-tooltip里得是一个元素，不能直接是text

taoliujun on 25 Apr 2019

在 webpack.dll.conf.js 里面加入

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
  },

@Constaline 66666，vue/cli2可以使用此法解决

zhouJiecode on 30 Apr 2019

版本：Element-UI 2.3.9
组件： el-table el-table-column设置属性show-overflow-tooltip = true在chrome、Safari上可以显示，但是在Firefox上无效

kobsucTam on 7 May 2019

webpack.renderer.config.js 里面，大约21行左右， let whiteListedModules = ['vue', 'element-ui']把element-ui加入白名单就可以了

亲测这个办法可用！

legolaserea on 28 Aug 2019

webpack.renderer.config.js 里面，大约21行左右， let whiteListedModules = ['vue', 'element-ui']把element-ui加入白名单就可以了

亲测可用，2020了还要用到也真是…

hellobugme on 15 Feb 2020

终于解决了，我本来用的是 element-ui 2.11.1，试了各种方法，终于在在 element-ui 2.2.2 版本上解决了我 dll 打包之后，table 不显示的问题

gumuqi on 29 Jul 2020

在el-table表头引用的elTooltip也要能通过重写，替换Vue

能说的在具体点吗？是在自己代码里覆写吗？我看toolitp 源码和这个是一样的，如果在自己代码里覆写，debounce 怎么引用呢

ChenXiaofan on 20 Nov 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

element 确定支持ie9吗？？在ie9上有很多问题啊，都是样式的问题

chenzhe-pro · 3Comments

按钮组结合Tooltip使用时，按钮组中按钮的样式错乱

EdenSpark · 3Comments

Why is this form submit handler not working?

FranzSkuffka · 3Comments

input 是否支持回车

yubo111 · 3Comments

希望支持 webpack2 的 tree-shaking

smallpath · 3Comments