Parcel: 🐛 Parcel cannot use some npm packages e.g. reactstrap

[hipertracker]

Parcel does not work with some NPM packages. I suspect it's because it goes deeply into too many files and breaks on some internal parts. I reproduced the Parcel bug with popular "reactstrap" library (it's Bootstrap 4 for React): https://github.com/hipertracker/parcel-reactstrap (but I saw it with more npm packages, I think it's the same problem)

[davidnagli]

When I try to reproduce this I get a similar, but different, error.
Cannot resolve dependency ‘./abutment’
But the weird thing is that when I look into the code for reactstrap-tether/tether.js in node-modules, I do indeed find that it tries to import ./abutment even though no such file exists. Could this be a bug reactstrap-tether?

[jgable]

I am also running into this issue when trying to bundle react-map-gl.

/Users/jgable/projects/providers/node_modules/react-map-gl/dist-es6/components/interactive-map.js:19:29: Cannot resolve dependency 'mjolnir.js'
  17 | import TransitionManager from '../utils/transition-manager';
  18 | 
> 19 | import { EventManager } from 'mjolnir.js';
     |                              ^
  20 | import MapControls from '../utils/map-controls';
  21 | import config from '../config';
  22 | import deprecateWarn from '../utils/deprecate-warn';

I have confirmed that node_modules/mjolnir.js/package.json exists but that's about it.

[davidnagli]

@jgable I looked into your issue and it also looks like a bug within react-map-gl. Looks like “mjolnir” is in their package.json and is used in their code, but it was removed from npm. So, it never get’s installed and subsequently can’t be found by Parcel.

Maybe I’m missing something but it looks like both of these are just weird bugs that Parcel found within the dependencies and not an actual problem with Parcel itself.

[davidnagli]

Nevermind…. I was able to find node_modules/mjolnir.js

I’ll keep looking into this.

[TimNZ]

I just experienced this with trying Parcel on a webpack working package.

Parcel is following 'main' entry points into the built JS file in dist/ folders, and the require('./utils') in this file is using the require() defined at the top of the generated JS - utils.js doesn't exist in the dist/ folder.

No idea what webpack does to detect and handle this, but I know it works using a webpack pipeline.

Also, why doesn't the red text wrap in VS Code terminal window? It gets cut off, whereas everything following does wrap.

[TimNZ]

https://github.com/reactstrap/reactstrap/issues/438

"5.0.0-alpha.4" removes reactstrap-tether dependency

Now builds with parcel.

[davidnagli]

Ok so I think I figured out what’s going on here. We have two completely separate issues that appear to be the same bug, but are actually quite different.

First, we have the problem with things like ./abutment and ./utils. Which, as @TimNZ said, is a bug in the actual libraries themselves which Webpack seems to just magically get around (so I guess nobody really noticed that they don’t exist). For that, we need to decide if we want to work around it magically like Webpack, or just start telling people who run into these issues to report the issue to the library authors.

Second we have the bug with mjolnir.js (see @jgable’s comment). This is actually a completely separate bug which happens because even thoughmjolnir.js is a fully valid npm package name, it looks like Parcel has an edge case where it treats the .js in the name as meaning that it’s a file name rather than a package name. So I think we should open a separate issue for this bug (@jgable can you please create it)

[davidnagli]

@TimNZ As for the issue with the error output, see #349

[TimNZ]

Thanks. Re #349 usually I would search issues first, and not throw in a non-related issue into another one.