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

not able to use external "vue" script #6149

Open
Urie96 opened this issue Dec 15, 2020 · 12 comments · May be fixed by vuejs/vue-loader#1774
Open

not able to use external "vue" script #6149

Urie96 opened this issue Dec 15, 2020 · 12 comments · May be fixed by vuejs/vue-loader#1774

Comments

@Urie96
Copy link

Urie96 commented Dec 15, 2020

Version

5.0.0-alpha.0

Reproduction link

https://github.com/Urie96/vue-cli-issue

Environment info

webpack5 has new feature externalsType, I try to extern vue by script, but i received a error in browser console when import *.vue, it occur at last line

exports.install = function (vue, browserify) {
  if (installed) { return }
  installed = true

  Vue = vue.__esModule ? vue.default : vue
  version = Vue.version.split('.').map(Number)

Vue is pending Promise, so version is undefined

Steps to reproduce

  • vue create temp
  • select vue 2 and disable all plugin
  • vi vue.config.js
module.exports = {
  configureWebpack: (config) => ({
    externalsType: 'script',
    externals: {
        vue: ['https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js', 'Vue'],
    }})
}
  • npm run serve
  • open chrome
  • open F12 and click console

What is expected?

Be able to see vue.js page

What is actually happening?

white page and chrome console throw error

@fangbinwei
Copy link
Collaborator

fangbinwei commented Dec 15, 2020

It seems it can be fixed in vue-loader , replacing api.install(require('vue') by

import Vue from 'vue' 
api.install(Vue)

then webpack can know when 'vue' is used and await Promise of the script before using it.

@Urie96
Copy link
Author

Urie96 commented Dec 16, 2020

@fangbinwei It works fine if serve static files after npm run build. Is there something wrong in vue-cli-service?

@fangbinwei
Copy link
Collaborator

Some HMR codes use 'vue' by require('vue') which return Promise because of externalsType. HMR codes is injected only in dev mode, so it's no problem in production. @Urie96

Using externalsType: 'script', require('vue') return Promise

require('vue').then(Vue => {
  new Vue({})
})

if use vue like below, webpack will transform codes and handle the Promise automatically

import Vue from 'vue'
new Vue({})

@Urie96
Copy link
Author

Urie96 commented Dec 17, 2020

@fangbinwei 谢谢解答,你上面讲的我配置不了哒,所以是要等待新的发布哇

@fangbinwei
Copy link
Collaborator

是的, 现在只能先这样

/** @type {import('@vue/cli-service').ProjectOptions} */
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      return {
        externalsType: 'script',
        externals: {
          vue: ['https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js', 'Vue']
        }
      }
    }
  }
}

@aguegu

This comment has been minimized.

@fangbinwei

This comment has been minimized.

@aguegu

This comment has been minimized.

@fangbinwei

This comment has been minimized.

@aguegu

This comment has been minimized.

@fangbinwei

This comment has been minimized.

@aguegu

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants