Open
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 commentedon Nov 20, 2019
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.
<script src="common.js"> <script src="index.js"> everything worked again. Anyway, hope it helps someone.So when I changed the order like so...
corentinbettiol commentedon Nov 7, 2022
(in case the problem still occur to someone, I was able to bypass this
module not found: 1
error by usingdefer
on my scripts that were loaded before mycommon.js
)