Vue: Cannot use Vue with browserify (regression)

[ernestoalejo]

Vue.js version

2.0.6

Reproduction Link

https://github.com/ernestoalejo/vue-repro
(only 3 files, it's very simple)

Steps to reproduce

1. clone the repo
2. npm install
3. gulp

What is Expected?

To build the app correctly.

What is actually happening?

After the commit https://github.com/vuejs/vue/commit/a4fcdbe6731ca4a0ef6a3f94ef06d56cc92636f7 it requires the "he" package and it can't found it:

Error: Cannot find module 'he' from '/.../vue-repro/node_modules/vue/dist'
    at /.../vue-repro/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
    at process (/.../vue-repro/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
    at ondir (/.../vue-repro/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
    at load (/.../vue-repro/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/.../vue-repro/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /.../vue-repro/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

[maiermuc]

same issue with webpack-simple

Steps to reproduce
https://github.com/vuejs-templates/webpack-simple

$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev

following issue

ERROR in ./~/vue/dist/vue.js
Module not found: Error: Can't resolve 'he' in 'test\node_modules\vue\dist'
 @ ./~/vue/dist/vue.js 5762:11-24
 @ ./src/main.js
 @ multi main

[ernestoalejo]

It's somewhat difficult to workaround this bug because we cannot use an old version easily (npm resolves vueify>vue-template-compiler using ^2.0.0-alpha.8 and that's always [email protected] even if we want to use a different version). We now need to add yarn or shrinkwrap to the project.

[defcc]

@ernestoalejo, it works well on my computer according to your steps, anything else missed ?

[yyx990803]

For now the workaround is do not parse vue/dist/vue.js for requires - browserify has the noparse flag and Webpack has the module.noParse option.

We will fix it in the next release.

[ghost]

same issue when using jspm with [email protected]
rolling back to [email protected] solves it for now

[ernestoalejo]

Unrelated, but I tried with:

    var bundle = browserify({
      noParse: ['node_modules/vue/dist/vue.js'],
    });

and a quick console.log inside babel code here says the file is filtered correctly. It stills throws the error though, after all files pass the filter. Probably there is some other option I have not consider here.

[zhanghaowx]

The workaround for webpack is add he to externals

[yyx990803]

This has been reverted/fixed in 2.0.7.

[chisumo2016]

For some reason I can't import .vue files on a completly fresh vue init webpack-simple folder.
I can run npm run dev initially, but as soon as I try to import a .vue component, this error occurrs:

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module not found: Error: Can't resolve './components/Header.vue' in 'C:\laragon\www\vue-tutorials\vue-cli-tutorial\vuejs-router-vue-router\src'
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 16:0-45
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js