not able to use external "vue" script

[Urie96]

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]

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]

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

[fangbinwei]

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]

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

[fangbinwei]

是的, 现在只能先这样

/** @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]

I have a similar problem but not involve webpack5 yet.

With a freshly created project with @vue/cli 4.5.9, if I add

module.exports = {
  chainWebpack: (config) => {
    config.externals({
      vue: 'Vue',      
    });
  },
};

in vue.config.js, and

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>

in index.html.

And then I remove the local vue by npm uninstall vue, then when trying npm run serve, I got No loader specified problem.

But it used to work fine with @vue/cli 4.4.6.

[fangbinwei]

@aguegu I can't reproduce this problem, maybe you can open a new issue and provide reproducible repo

[aguegu]

Thanks @fangbinwei , looks like you got a lot of open issues already.

Here is the demo code without node_modules.

spa2.tar.gz

1. vue create spa2 (vue 2.0)
2. create vue.config.js with

module.exports = {
  chainWebpack: (config) => {
    config.externals({
      vue: 'Vue',      
    });
  },
};

3. Add

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>

to public/index.html
4. npm uninstall vue
5. npm run serve

Somehow this time, the error is more detailed.

[fangbinwei]

@aguegu since @vue/cli-service will use different version of vue-loader according to the version of vue. If you uninstalled vue, @vue/cli-service couldn't apply vue-loader correctly, and webpack failed to parse .vue files. I don't recommend uninstalling vue. If you want to discuss more, you can open a new issue.

vue3 and vue2 use different version of vue-loader