Vuepress: Import UMD module is not defined

Created on 16 Aug 2018 · 5Comments · Source: vuejs/vuepress

Bug report

I am building my Ui library with Vue.js, So I used webpack v4 and babel v6 to compile my libraray to a umd module. I use vuepress for the doc part, When I import the umd js module in enhanceApp.js, vuepress got a warning and browser says the module is undefined like that

vue.runtime.esm.js?2b0e:4746 Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:4746)
    at __webpack_exports__.default (enhanceApp.js?7787:15)
    at createApp (app.js?3d2a:88)
    at eval (clientEntry.js?1f44:7)
    at Module../node_modules/vuepress/lib/app/clientEntry.js (app.js:2782)
    at __webpack_require__ (app.js:768)
    at fn (app.js:131)
    at Object.1 (app.js:4249)
    at __webpack_require__ (app.js:768)
    at app.js:904

Here is my devDependencies

  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^1.0.0",
    "husky": "^0.14.3",
    "markdown-it-container": "^2.0.0",
    "mini-css-extract-plugin": "^0.4.1",
    "prettier": "^1.14.0",
    "strip-tags": "^0.1.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^15.3.0",
    "vuepress": "^0.14.2",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0"
  },

.babelrc

{
  "presets": ["env"],
}

webpack.config.js

const webpackBaseConfig = require('./webpack.base.config')
const merge = require('webpack-merge')
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(webpackBaseConfig, {
  mode: "development", 
  entry: './src/',
  output: {
    path: path.resolve(__dirname, '../lib/components'),
    // filename: 'main.[hash].js',
    filename: 'index.js',
    libraryTarget: 'umd', 
    library: 'caui', 
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "caui.css",
      chunkFilename: "[id].css"
    })
  ],
})

My library

import Select from './components/select'

const components = {
  Select
}


const install = function(Vue, options){
  Object.values(components).forEach(component => Vue.component(component.name, component))
}

const caui = { install }

export default caui

```enhanceApp.js
// import CaSelect from '../../src/components/selectV2'
// import CaUI from '../../src/index'
import VueClipboard from 'vue-clipboard2'
import caui from '../../lib/components/'

export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
// register all CaUI components
Vue.use(caui)
Vue.use(VueClipboard)
}

```