Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Parcel 2: Absolute path imports

See original GitHub issue

❔ 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'));