is there any possible to load vue before extension?

[Shawn-Yang-AWX]

in final index.html, the js is load at current order:

        <script lang=javascript src=sba-settings.js></script>
        .... extension ...
        <script src=assets/js/chunk-vendors.ec700424.js></script>
        <script src=assets/js/chunk-common.dec76664.js></script>
        <script src=assets/js/sba-core.8e15d8fc.js></script>

however, when we create some customize extension we import some third js libaray, and these js libaray require vue which load at chunk-vendors js.

so is there any possible to load vue before extension?

[joshiste]

the install method in the extensions get the used vue instance passed as property in the parameter object - that is the place where you should initialize the 3rd party libs that need's vue...

SBA.use({
  install({viewRegistry, vue, axios, applicationStore}) {
      // do sth, with the vue instance...
      // eg. vue.install(....)
    });
  }
});

[Shawn-Yang-AWX]

hi,@joshiste I use this solution like this:

import ElementUI from 'element-ui';

import processDefinationView from './processdefinations';

SBA.use({
  install({viewRegistry, vue, axios, applicationStore}) {
    vue.use(ElementUI)
    viewRegistry.addView({
      name: 'processdefinations',
      parent: 'instances',
      path: 'processdefinations',
      component: processDefinationView,
      label: 'Process Definations',
      order: 1000,
      isEnabled: ({instance}) => instance.hasEndpoint('processdefinations') // appear if has processdefinations endpoint
    });
  }
});

bu still has some errors:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/dom.js:19)
    at Object../node_modules/element-ui/lib/utils/dom.js (processengine.js:3488)
    at __webpack_require__ (processengine.js:727)
    at fn (processengine.js:101)
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/popup/popup-manager.js:9)
    at Object../node_modules/element-ui/lib/utils/popup/popup-manager.js (processengine.js:3536)
    at __webpack_require__ (processengine.js:727)
    at fn (processengine.js:101)
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/popup/index.js:14)
    at Object../node_modules/element-ui/lib/utils/popup/index.js (processengine.js:3524)

can you take a look at it?

[joshiste]

If you can provide me with a sample project to reproduce the issue, I might take a look at it.

[gitHber]

hi,@joshiste I use this solution like this:

import ElementUI from 'element-ui';

import processDefinationView from './processdefinations';

SBA.use({
  install({viewRegistry, vue, axios, applicationStore}) {
    vue.use(ElementUI)
    viewRegistry.addView({
      name: 'processdefinations',
      parent: 'instances',
      path: 'processdefinations',
      component: processDefinationView,
      label: 'Process Definations',
      order: 1000,
      isEnabled: ({instance}) => instance.hasEndpoint('processdefinations') // appear if has processdefinations endpoint
    });
  }
});

bu still has some errors:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/dom.js:19)
    at Object../node_modules/element-ui/lib/utils/dom.js (processengine.js:3488)
    at __webpack_require__ (processengine.js:727)
    at fn (processengine.js:101)
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/popup/popup-manager.js:9)
    at Object../node_modules/element-ui/lib/utils/popup/popup-manager.js (processengine.js:3536)
    at __webpack_require__ (processengine.js:727)
    at fn (processengine.js:101)
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/popup/index.js:14)
    at Object../node_modules/element-ui/lib/utils/popup/index.js (processengine.js:3524)

can you take a look at it?

Did you resolve this ? It's seems link element-ui need Vue module but can't get it, I have the same issue,

[gitHber]

hi,@joshiste I use this solution like this:

import ElementUI from 'element-ui';

import processDefinationView from './processdefinations';

SBA.use({
  install({viewRegistry, vue, axios, applicationStore}) {
    vue.use(ElementUI)
    viewRegistry.addView({
      name: 'processdefinations',
      parent: 'instances',
      path: 'processdefinations',
      component: processDefinationView,
      label: 'Process Definations',
      order: 1000,
      isEnabled: ({instance}) => instance.hasEndpoint('processdefinations') // appear if has processdefinations endpoint
    });
  }
});

bu still has some errors:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/dom.js:19)
    at Object../node_modules/element-ui/lib/utils/dom.js (processengine.js:3488)
    at __webpack_require__ (processengine.js:727)
    at fn (processengine.js:101)
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/popup/popup-manager.js:9)
    at Object../node_modules/element-ui/lib/utils/popup/popup-manager.js (processengine.js:3536)
    at __webpack_require__ (processengine.js:727)
    at fn (processengine.js:101)
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/popup/index.js:14)
    at Object../node_modules/element-ui/lib/utils/popup/index.js (processengine.js:3524)

can you take a look at it?

I import just Button, and It's working

import {Button} from 'element-ui';
SBA.use({
   install({vue}) {
     vue.use(Button)
  }
})

and babel.config.js

...
plugins: [
    ...,
    [
       "import",
       {
            libraryName: "element-ui",
            customStyleName(name) {
                 return `element-ui/lib/theme-chalk/${name}.css`
            }
       }
    ]
]

[carrypann]

in final index.html, the js is load at current order:

        <script lang=javascript src=sba-settings.js></script>
        .... extension ...
        <script src=assets/js/chunk-vendors.ec700424.js></script>
        <script src=assets/js/chunk-common.dec76664.js></script>
        <script src=assets/js/sba-core.8e15d8fc.js></script>

however, when we create some customize extension we import some third js libaray, and these js libaray require vue which load at chunk-vendors js.

so is there any possible to load vue before extension?

Hi, do you resolve this?

[carrypann]

hi,@joshiste I use this solution like this:

import ElementUI from 'element-ui';

import processDefinationView from './processdefinations';

SBA.use({
  install({viewRegistry, vue, axios, applicationStore}) {
    vue.use(ElementUI)
    viewRegistry.addView({
      name: 'processdefinations',
      parent: 'instances',
      path: 'processdefinations',
      component: processDefinationView,
      label: 'Process Definations',
      order: 1000,
      isEnabled: ({instance}) => instance.hasEndpoint('processdefinations') // appear if has processdefinations endpoint
    });
  }
});

bu still has some errors:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/dom.js:19)
    at Object../node_modules/element-ui/lib/utils/dom.js (processengine.js:3488)
    at __webpack_require__ (processengine.js:727)
    at fn (processengine.js:101)
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/popup/popup-manager.js:9)
    at Object../node_modules/element-ui/lib/utils/popup/popup-manager.js (processengine.js:3536)
    at __webpack_require__ (processengine.js:727)
    at fn (processengine.js:101)
    at eval (webpack-internal:///./node_modules/element-ui/lib/utils/popup/index.js:14)
    at Object../node_modules/element-ui/lib/utils/popup/index.js (processengine.js:3524)

can you take a look at it?

I import just Button, and It's working

import {Button} from 'element-ui';
SBA.use({
   install({vue}) {
     vue.use(Button)
  }
})

and babel.config.js

...
plugins: [
    ...,
    [
       "import",
       {
            libraryName: "element-ui",
            customStyleName(name) {
                 return `element-ui/lib/theme-chalk/${name}.css`
            }
       }
    ]
]

Hi, I use your solution, but got error

ERROR  Failed to compile with 1 errors                                                                                                                               下午5:08:44

This dependency was not found:

* element-ui/lib/style.css in ./src/main/frontend/index.js

The version of springboot admin is 2.1.6

[ConnorLH]

I got this, it worked vue.config.js

 chainWebpack: config => {
        config.entryPoints.delete('app');
        config.entry('custom').add('./src/index.js');
        /*config.externals({
            vue: {
                commonjs: 'vue',
                commonjs2: 'vue',
                root: 'Vue'
            }
        });*/
...
}

SBA.use({
  async install({viewRegistry, vue, axios, applicationStore}) {
    window.Vue = window.vue = vue
    const ElementUI = () => import('element-ui');
    import('element-ui/lib/theme-chalk/index.css');
    vue.use(ElementUI);
...
})

[zxdposter]

@gitHber I use button it worked, but I use Table is error :

table.js:1551 Uncaught TypeError: Cannot read property 'extend' of undefined