Parcel: Parcel 2: Absolute path imports

[eugeneoshepkov]

❔ Question

How can I configure Parcel resolving absolute-like imports? I have a typescript project with imports relative to project's root folder, e.g. import App from 'src/app/App' (having App.tsx inside of src/app folder).

When trying to run parcel serve src/index.tsx I'm getting
Error: Cannot find module 'src/app/App' from '/projects/projectFolder/src'

While tsc -p tsconfig.json works smoothly.

I'm considering switching from Webpack to Parcel, but changing our imports from src/... to something like /src/... or ~/src/... to overcome this problem seems as overhead.

Below I provided simplified project settings.

Thanks for any feedback!

🔦 Context

Project structure

├── package.json
├── src
│ ├── index.tsx
│ └── app
│ ├── App.tsx
└── tsconfig.json

tsconfig.json:

{
  "compilerOptions": {
    "outDir": "dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "allowJs": true,
    "noEmit": true,
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es6",
    "jsx": "react",
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "lib": ["dom", "es2017"],
    "baseUrl": ".",
    "paths": {
      "*": ["*"]
    }
  },
  "exclude": ["node_modules/**/*", "src/__tests__/*", "__generated__/*"]
}

package.json:

{
  "name": "app",
  "license": "MIT",
  "version": "1.0.0",
  "main": "dist/main/index.js",
  "source": "src/index.tsx",
   "dependencies": ...
}

src/index.tsx:

import 'react-hot-loader';

import React from 'react';
import { render } from 'react-dom';
import App from 'src/app/App';

render(<App />, document.getElementById('app'));

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-alpha.3.1
| Node |12.11.1
| Yarn |1.19.1
| Operating System |MacOS Mojave 10.14.6

[mischnic]

~/src/...

Using a tilde should work

[eugeneoshepkov]

@mischnic Thanks! Is there another way without changing project's imports?

[mischnic]

Currently not

[DeMoorJasper]

You can write a custom resolver plugin that supports this.

I'm fairly sure we do have a resolver for TypeScript specific stuff on the roadmap, so this should be supported someday...

[a-x-]

you can use "alias": { "src": "./src" } also

[eugeneoshepkov]

@a-x- Worked like a charm, thank you!