Browserify compilation error I Help needed

[11joselu]

Node version: v6.11.0
npm version: 3.10.10

Error: Cannot find module '!!../node_modules/css-loader/index.js?sourceMap!../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-60fe12fc!../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Resizer.vue' from '/home/PROJECT_NAME/front/src/node_modules/vue-js-modal/dist'
at /home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
at process (/home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
at ondir (/home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
at load (/home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /home/PROJECT_NAME/front/src/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:123:15)

Bundle code

const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const envify = require('envify/custom');
const gulp = require('gulp');
const task = gulp.task.bind(gulp);
const dest = gulp.dest.bind(gulp);;

task(':vue:compile', () => {
  const b = browserify(join(STATIC_APP_ROOT, 'vue/main.js'));

  const stream = b.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer());


  return stream.pipe(dest(STATIC_APP_ROOT + '/shared/'));
});

package.json

"babel": {
    "presets": [
      "es2015"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  },
  "browserify": {
    "transform": [
      "babelify",
      "vueify"
    ]
  },

Edit: You can replicate into vue-cli with browserify template. It seems a Browserify can't consume a Webpack bundle

[euvl]

Hey @11joselu, thanks for a report 👍

I am wondering if changing libraryTarget to umd might help.(https://webpack.js.org/configuration/output/#output-librarytarget)

Lemme do a quick change and if it will not help i'll look into this issue when I will have a bit more free time

[euvl]

Try vue-js-modal@1.2.2 pls

[11joselu]

Still same issue.

Tested with Vue-cli 2.8.2 browserify template and Vue 2.3.2

[Willshaw]

Having a very similar issue, gulp task triggering browserfy:

[15:32:51] Error: Error: Cannot find module '!!../node_modules/css-loader/index.js?
sourceMap!../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-60fe12fc!
../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Resizer.vue' 
from '/var/www/vhosts/PROJECT/TOOL/node_modules/vue-js-modal/dist'

[euvl]

I think for now lets assume that only webpack supported.