Vue.js browserify Cannot find module

Question

With almost every npm package that I'm trying to use with vue.js 1.0 I receive this error:

{ Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./dashboard.vue' from '/Users/jamie/Code/forum/node_modules/vue-html5-editor/dist'
    at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:46:17
    at process (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:92:31)
    at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:117:15)

It drives me nuts! I'm using vue.js with browserify. Looked everywhere on the web:

https://github.com/webpack/css-loader/issues/240 https://github.com/webpack/css-loader/issues/180 https://github.com/webpack/css-loader/issues/295 https://github.com/webpack/css-loader/issues/163

Nothing seems to work! What am I doing wrong!?

2 packages where I've this problem:

https://github.com/lian-yue/vue-upload-component/
https://github.com/PeakTai/vue-html5-editor

My gulpfile:

const elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
require('laravel-elixir-stylus');



    elixir(mix => {
        mix.browserify('main.js');
        mix.styles([
                './node_modules/normalize-css/normalize.css',
                './node_modules/nprogress/nprogress.css',
                './node_modules/sweetalert/dist/sweetalert.css',
                ]);
        mix.stylus('app.styl');
    });

A solution would really help me out.

--EDIT--

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-stylus": "^2.0.3",
    "vue-html5-editor": "^0.5.1"
  },
  "dependencies": {
    "browserify": "^13.1.0",
    "laravel-elixir-vueify": "^2.0.0",
    "normalize-css": "^2.3.1",
    "nprogress": "^0.2.0",
    "stylus": "^0.54.5",
    "sweetalert": "^1.1.3",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vue-spinner": "^1.0.2",
    "vue-upload-component": "^2.0.0-beta"
  }
}

Weird.Maybe you could try to install these babel dependencies github.com/vuejs/vueify/blob/master/package.json#L38, I'm not sure but seems like the vue-upload-component use ES2015. — Belmin Bedak
– Belmin Bedak, Commented Oct 21, 2016 at 21:42

craig_h · Accepted Answer · 2016-10-22 13:10:24Z

2

Those are webpack packages and you are using browserify. If you need to use webpack packages you should be using webpack as your bundler.

I did have a go at installing the vue-upload-component package to see how easy it would be with browserify and elixir but it's awkward to say the least. I didn't get it working because it uses babel transforms to compile the vue files, so first you need to pull them in manually and then you would likely need to write an elixir extension to use those transforms to get it to work. Obviously each webpack package will be different so you would need to do that each time you install one, which is hardly convenient.

edited Oct 22, 2016 at 13:10

answered Oct 22, 2016 at 13:05

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Hawker - MSFT · Accepted Answer · 2017-10-19 01:27:56Z

0

I had some luck changing the configuration output of the Vue component I wanted to use to use webpack -p instead of just webpack.

I could then take that output without the hot module code and put it through browserify:

browserify file.js --standalone SomeLibrary > file.browser.js

Where file.js is the webpack -p output, SomeLibrary is the name you want on the global window scope from the browserify packaging, and file.browser.js is your resultant file to include in your project.

answered Oct 19, 2017 at 1:27

Michael Hawker - MSFT

1,58014 silver badges18 bronze badges

Collectives™ on Stack Overflow

Vue.js browserify Cannot find module

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related