[Vue warn]: Injection "eventBus" not found

[fgmehlin]

Hi,

Just installed the vue-grid-layout and am having an error while trying the minimal example.
(probably a duplicate of Issue 247 but there are no solutions that I can use there).

I'm using:

• vue v2.6.10
• vue-grid-layout v2.3.4

Tested on: Firefox 65, Chrome 73

Error

[Vue warn]: Injection "eventBus" not found

found in

---> <GridItem>

[Vue warn]: Error in created hook: "TypeError: Cannot read property '$on' of undefined"

found in

---> <GridItem>

I have quickly tested with vue-grid-layout 2.3.2 and/or vue 2.6.9, the same is happening.

My code

 <grid-layout
               :layout.sync="layout"
               :col-num="2"
               :row-height="450"
               :is-draggable="true"
               :is-resizable="true"
               :is-mirrored="false"
               :vertical-compact="true"
               :margin="[10, 10]"
               :use-css-transforms="true"
          >
            <grid-item 
               v-for="comp in layout" 
              :x="comp.x" 
              :y="comp.y" 
              :w="comp.w" 
              :h="comp.h" 
              :i="comp.i">
          </grid-item>
</grid-layout>

Local data:

data: () => {
    return {
      layout: [
      {
        type: "WidgetComponent",
        title: "test1",
        x: 0,
        y: 0,
        h: 1,
        w: 2,
        i: "0",
      },
      {
        type: "WidgetComponent",
        title: "test2",
        x: 0,
        y: 2,
        h: 2,
        w: 1,
        i: "1",
      },
   ...
 ]
...

[fgmehlin]

Bit of progress.

I added the components to my source code and got the injection error to disappear when commenting out

// Object.keys(VueGridLayout).forEach(name => {
//     Vue.component(name, VueGridLayout[name]);
// });

in components/index.js.

Explanation:

When the above is uncommented, the GridItem object lives at the same level as GridLayout and the eventBus is not correctly injected:

When it is commented, the hierarchy is fine:

Any idea on why/how the above mapping is used ?

[FFGF]

i meet the same problem, i finish the problem
npm install vue-grid-layout@2.1.13
i doubt your vue project was builded by cli2, but the newest vue-grid-layout is builded cli3. they are not match. so you better install vue-grid-layout that was builded by cli2.

[roguexiaohuihui]

I have quickly tested with vue-grid-layout 2.3.3 and/or vue 2.5.2, the same is happening.

[FFGF]

@roguexiaohuihui 你可以新建你的vue项目通过vuecli2,然后安装vue-grid-layout2.1.13版本。或者新建你的vue项目通过vuecli3然后使用最新的vue-grid-layout版本。

[roguexiaohuihui]

@roguexiaohuihui 你可以新建你的vue项目通过vuecli2,然后安装vue-grid-layout2.1.13版本。或者新建你的vue项目通过vuecli3然后使用最新的vue-grid-layout版本。

现在烦的是2.2.0以下的版本，item.x只支持string，这个是最需要兼容的问题，如果我切换到2.2.0以下版本，那么历史数据，我全部要去兼容，所以我在评估成本中，看是用哪种方案

[RonWalker22]

Any updates on this? I getting the same Vue warn.

[fmndako]

Any updates on this? I getting the same warning

[w-tools]

2.1.13：
provide() {
return {
eventBus: null
}
},

new version：
provide: {
eventBus: null
},

the old version is correct.
npm install vue-grid-layout@2.1.13

[marverix]

Confirmed: version 2.1.13 is only version working with my Vue 2.6.11.
I needed to downgrade and lock it with package.json.

[blitheinsz]

我的解决方案：
1、打开这个链接4ccd949
2、下载dist/vue-grid-layout.umd.min.js
3、引入代码
var grid = require('vue-grid-layout.umd.min');
window.VueGridLayout = { GridLayout: grid.GridLayout, GridItem: grid.GridItem };
4、注册组件
components: { GridLayout: window.VueGridLayout.GridLayout, GridItem: window.VueGridLayout.GridItem }

[gmsa]

This should be fixed on the latest release. Can anyone confirm?

[redrockhorse]

You may use the wrong version. After 2.1.13 ,they use vue-cli to build it,not web-package.So you can npm i vue-grid-layout@2.1.13 -S instead,if you use vue early version