ReferenceError: require is not defined

[goto-bus-stop]

@ungoldman found a problem with the change in #38:

15:05 < ungoldman> final note, error seems to be originating from here
                   https://github.com/puleos/object-hash/blob/master/dist/object_hash.js
15:05 < ungoldman> https://usercontent.irccloud-cdn.com/file/6MtxkWve/Screen%20Shot%202019-05-24%20at%2012.05.22%20PM.png
15:05 < ungoldman> source map is broken so hard to find exact spot
15:05 < ungoldman> ok bbiab
15:06 < goto-bus-stop> ohhhh
15:07 < goto-bus-stop> ok i see it
15:07 < goto-bus-stop> i think :P
15:07 < goto-bus-stop> it's already a browserified bundle, and the browserify prelude looks for `require` and
                       tries to use it at runtime if it exists
15:08 < goto-bus-stop> but now i'm claiming it exists while it does not

browserify standalone bundles do

var externalRequire = typeof require === 'function'&&require

…which now breaks.

not sure what the best fix is, but it might be enough to simply add a check for the && require bit—default browserify and browser-pack-flat both use that pattern for external requires and we shouldn't muck with it. Worth checking out what webpack does (though i would guess they don't actually check for external require at all)

[ungoldman]

forgot about this and tried upgrading tinyify, can confirm this is still an issue 😢

[ungoldman]

Can you recommend a workaround? It seems like we're an isolated case since I haven't seen this getting reported by anyone else. Is our build setup very unusual?

browserify front-end.js -p [ css-extract -o dist/bundle.css ] -o dist/bundle.js -p tinyify

[ungoldman]

sorry taking a while to refresh my memory, I remember now that the issue is with the standalone browserify bundle of object-hash having some problematic syntax. i'm trying to see if i can replace it in our codebase with something else (tried out https://www.npmjs.com/package/shasum-object which looks great) but strangely object-hash is producing a different hash than just using crypto sha1 with hex encoding. object-hash says it defaults to that, but the string it produces is different from just doing crypto.createHash('sha1').update('a').digest('hex') (shasum-object does produce the same string as default crypto fwiw), which is bad for us because we've already been using it in production for over a year so we can't drop-in a replacement. will keep investigating

[greghuc]

FYI I've seeing a similar "Uncaught ReferenceError: require is not defined" on using tinify+browser-pack-flat with https://github.com/nodeca/pica version 6.0.0 (it worked on the previous pica 5.3.0). I asked the pica author what had changed, and he said: "It now uses "compiled" file as main entry, and derequire to allow browserify external packages". See nodeca/pica#197.

For now, I'm avoiding the error by running tinify with "flat: false" option which uses bundle-collapser rather than browser-pack-flat. Now my minified js is 32KB larger..

[zbryikt]

seems simply to browserify a browserified module can cause this problem.

a.js:

module.exports = {b: require("./b.bundle")};

b.js:

module.exports = {value: 1}

build script:

browserify --standalone b b.js > b.bundle.js
browserify a.js -p browser-pack-flat/plugin > a.bundle.js

include a.bundle.js in HTML generates "require note found" error.

Accidentally encountered this when building something while forgot adding --no-bf option to prevent browserify from using a bundled js file ( which is pointed by browser field in package.json).