Home » vue » Vue.js browserify Cannot find module

Vue.js browserify Cannot find module

Posted by: admin November 26, 2021 Leave a comment

Questions:

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"
  }
}
Answers:

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.

###

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.