Okay, so I've been trying my hand at compiling stuff with browserify and vueify and I've stumbled upon something strange. So first things first, I've been trying to get the browserify-simple example found here to work.
I've set things up and was able to compile and get things to work no problem. However, I decided to try adding browserify-shim to the lot so as to avoid having the vue.js library embedded in the final code.
Here's where things get a little strange. Here's a functional version of my package.json file. Most of it was already present from the example, I've only added the necessary config to get browserify-shim working:
{
"name": "un-test",
"description": "Un test",
"author": "John Doe",
"private": true,
"scripts": {
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
"serve": "http-server -o -s -c 1 -a localhost",
"dev": "npm-run-all --parallel watchify serve",
"build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
},
"dependencies": {
"vue": "^2.0.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^7.2.0",
"browserify": "^13.0.1",
"browserify-hmr": "^0.3.1",
"browserify-shim": "^3.8.14",
"cross-env": "^1.0.6",
"envify": "^3.4.1",
"http-server": "^0.9.0",
"npm-run-all": "^2.1.2",
"uglify-js": "^2.5.0",
"vueify": "^9.1.0",
"watchify": "^3.4.0"
},
"browserify": {
"transform": [
"vueify",
"babelify",
"browserify-shim"
]
},
"browserify-shim": {
"vue": "global:Vue"
}
}
As I said, this works. On the other hand, if I do this inside the package.json:
"browserify-shim": {
"myVue": "global:Vue"
}
And if I modify the main.js file accordingly like this:
import Vue from 'myVue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
I get the following error when I compile:
Error: Cannot find module 'vue' from 'C:\wamp\www\VueTest\src'
Can anybody tell me why this is happening? I didn't think the name I put inside the browserify-shim section really mattered other than for importing the library I want.
Well, I was able to track down the problem down to the vueify module. There's a hardcoded reference to "vue" module in the compiler.js file of said module. This forces you to name your module exactly "vue" in browserify-shim otherwise you'll get an error if you compile in dev mode.
I opened an issue here for those who are interested. But there's not been much activity lately so I don't know if/when it'll get fixed. Anyway, if you want to avoid this error, just name your module "vue" or change your compilation mode with the NODE_ENV=production parameter.