Error bundling local packages with -r

[derekr]

Only get the error when trying to bundle using the require -r option. If i create a main.js that requires the component it bundles ok. Possible this use case isn't meant to be supported, but thought it'd be good to start a convo about it! :D

./components/button/package.json

{
  "name": "nw-button",
  "version": "0.0.0",
  "description": "Button component.",
  "main": "index.jsx",
  "scripts": {
    "test": "make test"
  },
  "dependencies": {
    "less-css-stream": "^0.1.2",
    "parcelify": "^1.1.0"
  },
  "style": "*.less",
  "transforms": [
    "less-css-stream"
  ]
}

command

browserify \
    -r ./components/button/index.jsx \
    -g [ reactify --es6 ] \
    -o public/js/bundle.js \
    -p [ parcelify -l verbose -o public/css/bundle.css ]

err

ERR! Error: Cannot find module 'components/button/package.json'
ERR!     at Function.Module._resolveFilename (module.js:320:15)
ERR!     at Function.Module._load (module.js:262:25)
ERR!     at Module.require (module.js:349:17)
ERR!     at require (module.js:368:17)
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/parcel-map/node_modules/mothership/index.js:31:16
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/parcel-map/node_modules/mothership/node_modules/find-parent-dir/index.js:25:26
ERR!     at FSReqWrap.cb [as oncomplete] (fs.js:209:19)
ERR!  { [Error: Cannot find module 'components/button/package.json'] code: 'MODULE_NOT_FOUND' }
ERR! Error: Unknown package id in dependency 9cf03096664e534a714c66ab7b7fe511ac930c2f
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/index.js:253:43
ERR!     at Function._.each._.forEach (/srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/underscore/underscore.js:87:22)
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/index.js:250:5
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/async/lib/async.js:551:21
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/async/lib/async.js:227:13
ERR!     at iterate (/srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/async/lib/async.js:134:13)
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/async/lib/async.js:145:25
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/async/lib/async.js:229:17
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/async/lib/async.js:556:34
ERR!     at /srv/prj/app-site/global-styles/react-components/node_modules/parcelify/node_modules/async/lib/async.js:119:25
ERR!  [Error: Unknown package id in dependency 9cf03096664e534a714c66ab7b7fe511ac930c2f]

[dgbeck]

Hi @derekr ! I consider this a bug since I see no reason why we shouldn't support the -r flag.

At first glance it seems that mothership module is getting passed a relative instead of absolute path. It might be a browserify issue since that path is coming from directly from browserify. In other cases this path is absolute but in this special case it is relative.

browserifyInstance.pipeline.get( 'label' ).unshift( through.obj( function( row, enc, next ) {
    var thisFilePath = row.file;

Since you found an easy work around and I don't think this is bugging anybody else I'd prefer not to spend time on it right now. We can come back to it later if necessary. Will leave open.

Thanks!

[derekr]

Cool thanks for the update! I did add a path.resolve downstream in mothership, but wasn't sure if that was the correct solution or right place. It did the trick, but I haven't done any further testing to see if it breaks other use cases.

[stefan--]

@dgbeck do I understand it correctly that the following use case is not supported:

create separate bundles for the app and all vendor scripts, e.g. like this:

vendor bundle

browserify client/app/vendor.js \
    --debug \
    --require=angular \
    --outfile .tmp/app/vendor.browserify.js \
    --plugin=parcelify \
    --cssBundle .tmp/app/vendor.browserify.css

app bundle

browserify client/app/app.js \
    --debug \
    --external=angular \
    --outfile .tmp/app/app.browserify.js

where parcelify is used to bundle the vendor styles.

Thanks for your help.

[dgbeck]

HI @stefan !

I'm not totally sure I understand the question, but I'm not seeing any red flags in those commands, other than potentially the same issue that is being described here.

This issue as stated above looks like a browserify bug and may or may not have been fixed... I have not tried using the -r flag since this issue was originally reported.

If you try it and it works, please followup and we can close this issue.

Thanks!

[stefan--]

Hi @dgbeck,

sorry maybe I have not been explicit enough. Of course I have tried running the command with and without parcelify as a plugin.

Running the command without parcelify works as expected. However, running it with parcelify as described here results in the following error:

ERR! Error: ENOENT: no such file or directory, lstat 'angular'
ERR!     at Error (native)
ERR!     at Object.fs.lstatSync (fs.js:839:18)
ERR!     at DestroyableTransform._transform (.../node_modules/parcelify/node_modules/parcel-map/index.js:34:10)
ERR!     at DestroyableTransform.Transform._read (.../node_modules/parcelify/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
ERR!     at DestroyableTransform.Transform._write (.../node_modules/parcelify/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
ERR!     at Labeled.Pipeline._write (/usr/local/lib/node_modules/browserify/node_modules/labeled-stream-splicer/node_modules/stream-splicer/index.js:70:22)
ERR!     at doWrite (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:335:12)
ERR!     at clearBuffer (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:439:7)
ERR!     at onwrite (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:374:7)
ERR!     at WritableState.onwrite (/usr/local/lib/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:124:5)
ERR!  { [Error: ENOENT: no such file or directory, lstat 'angular'] errno: -2, code: 'ENOENT', syscall: 'lstat', path: 'angular' }

Contrary to what @derekr described, the required module is passed in as module name and not file.

Cheers

[liujingbreak]

@stefan-- I got same error as yours, as long as there is -r option with browserify, Parselify fails on ERR! Error: ENOENT: no such file or directory, lstat 'someModule', although this error message looks not same as @derekr 's, but I think @dgbeck 's explain is right, it is because of browserify is passing a relative string 'angular' instead of other absolute path when there is -r option.

Not sure if this browser-resolve work round has any sideeffect, it works for me so far.

var bResolve = require('browser-resolve');
b.pipeline.get('dedupe').push( through.obj( function( row, enc, next ) {
            if (!fs.existsSync(row.file)) {
                var resolved = false; // some kind of cache of resolved module path;
                row.file = resolved ? resolved : bResolve.sync(row.file);
            }
            this.push(row);
            next();
        }));