Module not found but still works

[DCKT]

Hi,

I've got a strange behavior with my scripts.
I have 2 JS files : home.js and product.js for the concerned page.
Both require the common.js file, it works fine on the product page but on the homepage I have this error :
"Uncaught Error: Cannot find module '51'"

More about this error :

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _common = require('../common/common.js');

var _common2 = _interopRequireDefault(_common);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {'default':obj}; }

(0, _jquery2['default'])(function () {
  _common2['default'].init();
});

},{"../common/common.js":88,"jquery":51}]},{},[89]);

But, the JS still works. When I look further on the console, it's apparently the first module I have imported in the home.js script (jquery).

Here is my compilation script:

'use strict';

const __DEV__     = process.argv.indexOf('--dev') > -1;

const fs         = require('fs');
const path       = require('path');
const gulp       = require('gulp');
const notify     = require('gulp-notify');
const plumber    = require('gulp-plumber');
const browserify = require('browserify');
const babelify   = require('babelify');
const watchify   = require('watchify');
const replace    = require('gulp-replace');
const gutil      = require('gulp-util');

module.exports = function(config, prefix) {
  return function() {

    const folders = fs.readdirSync('./src/pages');
    const files   = folders.reduce((acc, folder) => {
      if (folder != 'common') {
        acc.entries.push(path.join(__dirname, `../src/pages/${folder}/${folder}.js`));
        acc.outputs.push(path.join(__dirname, `../dist/assets/scripts/${folder}.bundle.js`));
      }

      return acc;
    }, { entries: [], outputs: [] });


    const stream = browserify({ 
        entries: files.entries,
        cache: {},
        packageCache: {},
      })
      .transform('babelify', { presets: ['es2015'] })
      .plugin(watchify)
      .plugin('factor-bundle', {
        outputs: files.outputs,
      })

    stream.on('update', bundle);

    return bundle();

    function bundle() {
      return stream
        .bundle()
        .on('error', e => {
          gutil.log(gutil.colors.red('Bundle error:', e.message));
        })
        .pipe(fs.createWriteStream(`${config.distOutputPath}/common.bundle.js`))
        .on('finish', () => {
          return gulp.src(config.distPath)
            .pipe(replace(/var-/g, prefix + '-'))
            .pipe(replace(/\.default(?=\.|\;|\)|\,|\(|\s)/g,"['default']"))
            .pipe(replace(/\{ default: obj }/g,"{'default':obj}"))
            .pipe(gulp.dest(config.distOutputPath))
            .pipe(notify('Scripts task end'));
        });
    }
  };
}

I work on Windows 7 with Node.js v4.2.

[drokk3]

My problem that was throwing "Uncaught Error: Cannot find module..." error was that I didn't noticed that I was including script common.js in my HTML after my factor bundeled files like index.js.
So when I changed the order like so...

<script src="common.js"> <script src="index.js"> everything worked again. Anyway, hope it helps someone.

[corentinbettiol]

(in case the problem still occur to someone, I was able to bypass this module not found: 1 error by using defer on my scripts that were loaded before my common.js)