Clever Geek Handbook

It is not possible to require () from within an already "required" module

I have this project structure:

myApp
β”œβ”€β”€ gulpfile.js
β”œβ”€β”€ package.json
└── source
    └── scripts
        β”œβ”€β”€ modules
        β”‚   └── utils.js
        β”œβ”€β”€ background.js
        └── data.json

My task browserify

:

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 example 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 it data.json

in a directory modules

AND inside a directory scripts

, that is. 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 normal ... what am I doing wrong?

thank

+3


source to share


1 answer


I have taken out of your use gulp.src

to transfer files to $.browerify

what you are using a Gulp plugin perhaps gulp-browserify

. It is generally not recommended to use a plugin to call Browserify from Gulp. The recommended way to do this is to simply call Browserify directly. Indeed, the Gulp plugin blacklist states:

"gulp-browserify": "use the browserify module directly",

I have replicated your directory structure and put in some reasonable values ​​for files for which you did not provide content ( data.json

, background.js

), and indeed, I am getting the same error that you get when I try to run the Gulp code you are showing. However, if I switch to calling Browserify directly, I don't get any errors. Here is the code I have:



const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');

gulp.task('browserify', function () {
  return browserify({
    entries: ["./source/scripts/background.js",
              "./source/scripts/modules/utils.js"],
    debug: true,//for source maps
    standalone: "foo",
  })
  .bundle()
  .pipe(source('bundle.js')) // This sets the name of the output file.
  .pipe(gulp.dest('./build/scripts/'));
});

You are using gulp.src(['./source/scripts/**/*.js'])

in your code, which means Browserify will accept all your files .js

as bundled entries. So I put two entries in my code above, which manually replicates the template you are using with the plugin. However , while Browserify does not generate an error with this setting, I suspect you do not actually want to have multiple entries. We usually pass one entry point to Browserify and let it trace the calls require

to determine what it needs to pull.

+1


source






More articles:


All Articles