Search code examples
reactjstypescriptparcelmonorepo

"Cannot resolve dependency" when importing local dependency in monorepo - Parcel, Typescript

I am trying to set up a monorepo with parcel and typescript. I have four packages: f-app, f-app-core, f-app-hub, f-app-notes.

when I try to import from one package to another, I get Cannot resolve dependency

For example: I want to import f-app-hub/index.tsx in f-app/index.tsx.

// f-app/index.tsx

import React from 'react'

import Hub from 'f-app-hub' // this fails

const App = () => {
  return <Hub />
}

I get Cannot resolve dependency 'f-app-hub' during build. However, VS Code shows no errors and is able to correctly identify and source f-app-hub. cmd+space sends me to the correct file.

Importing f-app-hub as a relative path also works.

// f-app/index.tsx

import React from 'react'

import Hub from '../f-app-hub' // this works

const App = () => {
  return <Hub />
}

Here is ny tsconfig:

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "baseUrl": "packages",
    "rootDir": ".",
    "paths": {
      "~/*": ["packages/*"]
    },
  },
  "include": ["packages/**/*"]
}

any ideas?

Solution

  • I managed to solve this by using the parcel alias field in package.json

    "alias": {
  "f-app-core": "./packages/f-app-core"
  "f-app-hub": "./packages/f-app-hub",
  "f-app-notes": "./packages/f-app-notes"
}