Skip to content

Module not found but still works #81

Open
@DCKT

Description

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.

Activity

drokk3

drokk3 commented on Nov 20, 2019

@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

corentinbettiol commented on Nov 7, 2022

@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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

      Participants

      @DCKT@drokk3@corentinbettiol

      Issue actions

        Module not found but still works · Issue #81 · browserify/factor-bundle