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!

[crazyit]

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

ok,solved my problem, very good,thanks

[SixtyFiveKolev]

Where do we need to apply this "alias": { "src": "./src" } ?

[SpandanBG]

Where do we need to apply this "alias": { "src": "./src" } ?

package.json

[aditya711-code]

Any way to use it with jsconfig,json how to configure parcel according to jsconfig.json?

[zzswang]

"alias": { "src": "./src" }

add this to package.json

but still build fail