Search code examples
javascriptnode.jsnode-modulesbrowserifyuglifyjs

"Cannot find module" in browserify when not mangling the bundle

I have a custom library I'm trying to build with Browserify. The library uses fabric.js, extends it with some custom classes and exposes it globally to be used in the browser and in node.js. This is the main entry point for the library:

(function () {
    "use strict";

    // Make fabric global in browsers and node
    this.fabric = require('./libs/fabric.canvasex.js');
    this.fabric.internal_version = "1.0.0";

    require('./libs/BoundedText/BoundedText.js');
    require('./libs/BoundedText/PathText/PathIText.js');
    require('./libs/VectorPlaceholder/fabricVectorPlaceholder.js');
    require('./libs/ImagePlaceholder/fabricImagePlaceholder.js');

}).call(this);

The file structure for this library is this:

enter image description here

To build this library to a single file I'm using this command:

browserify --full-paths js/main.js | uglifyjs --compress --mangle safari10 > dist/my-lib.js

This works great and I can include this in browser and require it in node.js and it becomes a global variable too which is what I need. The problem starts when I have to debug something and the minified code is obviously not ideal for this so I bundle the library like this instead:

browserify --full-paths js/main.js > dist/my-lib.js

Now, when I try to include this build in another node program using browserify too, like this:

require('./customily-fabric.js');

I get these errors when bundling my program with the library:

[1] Error: Cannot find module '../fabric.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './OpentypeIText.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'      
[1] Error: Cannot find module './startsWith-polyfill.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './Font.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module '../../fabric.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './ctxtextpath.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'        
[1] Error: Cannot find module './path-properties.min.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module '../potrace.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './fabricMaskFilter.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'   
[1] Error: Cannot find module './fabric.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/BoundedText/BoundedText.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/BoundedText/PathText/PathIText.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/VectorPlaceholder/fabricVectorPlaceholder.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/ImagePlaceholder/fabricImagePlaceholder.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'
[1] Error: Cannot find module './libs/fabric.canvasex.js' from 'D:\Git-Repos\Customily\CustomilyFabric\dist'

I discovered that if I remove only the --mangle option from my library build, I get these errors when trying to include it in another node program. Why is this happening? Shouldn't all the modules be contained inside the bundle?

Solution

  • After some more searching, I finally found the reason, when using browserify you can't add libraries that were bundled with browserify, see this issue.

    This feature is coming in browserify 17 so, for now, I switched to webpack to build my library.