How to prevent absolute package imports when importing from within a package vs app in editors?

[yuchant]

Say I have an app, and a package.

How do I make it so inside the app/ imports come from a barrel file in package/mypackage/index.ts but within mypackage, it obviously cannot import from itself.

This isn't strictly a turborepo problem, but should be very common given these monorepos are intended to contain many packages.

[yuchant]

The answer is project-relative imports. I should have known that.

[7iomka]

@yuchant, Hi, how you solved this issue?
For example I need paths aliases
import '@/styles/global.css';
for me not working
even if I have configured in per-app tsconfig.json

{
  "extends": "tsconfig/nextjs.json",
  "compilerOptions": {
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
  "include": ["next-env.d.ts", "src/**/*"],
  "exclude": ["node_modules", ".next", ".turbo"]
}

Error
Unable to resolve path to module '@/styles/global.css'.

File is located inside app folder inside src folder
Also I have this error

[SampaioLeal]

@7iomka have you solved? i want to use path aliases on packages too

[yuchant]

I would create a new issue. This issue is not about path aliases, but absolute imports vs relative when within/outside packages.

For the record, path aliases work fine for me, nothing special there. Play around with the baseurl to make sure that's right. You can also debug by running typescript tsc --traceResolution to see what files it's trying to resolve.

Good reading here about that, and resolution in general that may be a part of the problem. https://www.typescriptlang.org/docs/handbook/module-resolution.html

[7iomka]

@SampaioLeal

@7iomka have you solved? i want to use path aliases on packages too

Root package.json

  "name": "xxx",
  "workspaces": [
    "apps/store",
    "packages/*"
  ],

apps>store>package.json

  "name": "@xxx/store",

apps>store>tsconfig.json

{
  "extends": "../../packages/tsconfig/nextjs.json", // yea, relative paths there is still weird, but not a bad practice
  "compilerOptions": {
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"], // All app workspace source files
      "@xxx/*": ["../../apps/*", "../../packages/*"] // all packages and apps from root
    }
  },
  "include": [
    "next-env.d.ts",
    "./src/**/*", // I have source files here
    "*.js", // root files like eslint config (because I use prettier with eslint)
    ".eslintrc.js",
    "next.config.js"
  ],
  "exclude": ["node_modules", ".next", ".turbo"]
}

packages>package.json

 "name": "@xxx/tsconfig",

packages>nextjs.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Next.js",
  "extends": "./base.json",
  "compilerOptions": {
    "jsx": "preserve",
    "noEmit": true,
    "target": "es5"
  }
}

packages>base.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "inlineSources": false,
    "isolatedModules": true,
    "lib": ["ES2021", "DOM", "DOM.Iterable"],
    "module": "esnext",
    "moduleResolution": "node",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"]
}

USAGE

Inner import

import { rootDomain } from '@/store/rootDomain';

Workspace import

import config from '@xxx/config/tsconfig.json';

.vscode > xxx.code-workspace

{
  "folders": [
    {
      "name": "ROOT",
      "path": "../"
    },
    {
      "name": "@xxx/store",
      "path": "../apps/store"
    },
    {
      "name": "@xxx/config",
      "path": "../packages/config"
    },
  ],
  "settings": {},
}