Parcel: Using absolute paths when importing JS files

[fay-jai]

🙋 Handling absolute path when importing JS files

Currently, I'm using Webpack and one of the configurations we use is setting up additional resolve.modules so that in our JS files we don't need to write relative path imports. For example, if our project directory looks like this:

/app
-- /componentA
---- componentA.js
--/componentB
---- componentB.js

and componentB imports componentA, here's how our import looks like:

import ComponentA from "app/componentA/componentA";

instead of

import ComponentA from "../componentA/componentA";

[spalger]

Pretty similar ask here: https://github.com/parcel-bundler/parcel/issues/25

One option I've tried is symlinking your app directory into your node_modules directory, so it resolves like any other package from npm.

[ccutch]

I was thinking about using the NODE_PATH environment variable in such a way NODE_PATH=./src parcel src/index.html but that did not work, might be a nice implementation pattern. This is what create-react-app uses.

[pke]

Or use the babel module-resolver plugin and add this to .babelrc

["module-resolver", {
  "root": ["./src"],
}] 

[fay-jai]

@pke awesome - wasn't aware of module-resolver in babel!

[noahprince22]

Wasn't able to get module-resolver to work. I'm trying to integrate parcel into an existing webpack project, but this is a complete blocker. Can parceljs just respect NODE_PATH?

[fay-jai]

@noahprince22 @pke I'm also unable to get the module-resolver to work for an existing webpack application

[devongovett]

Closing this since it's a dup of #25.