Unable to require() from inside an already "required" module

I have this project structure:

myApp
├── gulpfile.js
├── package.json
└── source
    └── scripts
        ├── modules
        │   └── utils.js
        ├── background.js
        └── data.json

My browserify task:

gulp.task('browserify', function () {
  return gulp.src(['./source/scripts/**/*.js'])
   .pipe($.browserify({
      debug: true,//for source maps
      standalone: pkg['export-symbol']
   }))
   .on('error', function(err){
      console.log(err.message);
      this.emit('end');
    })
   .pipe(gulp.dest('./build/scripts/'));
});

My sample utils.js:

const data = require('../data.json');

const utils = (function () {
  const output = function () {
    console.log(data);
  };

  return {
    output: output,
  };
}());

module.exports = utils;

If I try to build it with the current directory structure, I get this error:

module "../data.json" not found from "/dev/myApp/source/scripts/fake_4d8cf8a4.js"

I can only build it, if I put data.json inside the modules directory AND inside the scripts directory, ie. it only works if I duplicate the file:

myApp
├── gulpfile.js
├── package.json
└── source
    └── scripts
        ├── modules
        │   ├── utils.js
        │   └── data.json
        ├── background.js
        └── data.json

Obviously this is not okay... what am I doing wrong?

Thank you