T
TanStack•4mo ago
rival-black

Failed to import custom import (TS alias)

This is a complex one. I'm running start as part of a monorepo. Start is able to directly import packages from the monorepo, but fails when a package is importing from another package. 
10:50:54 AM [vite] (client) Pre-transform error: Failed to resolve import "@cf/ui/icons" from "libs/ui/react/src/components/layout-public.tsx". Does the file exist?
10:50:54 AM [vite] (client) Pre-transform error: Failed to resolve import "@cf/ui/icons" from "libs/ui/react/src/components/layout-public.tsx". Does the file exist?
I can import "@cf/ui/icons" from a start page, but in this case, "@cf/ui/icons" is being imported from a component inside@cf/ui/components. So it fails. I'm using nx for what it matters. Any suggestions would be very appreciated
1 Reply
rival-black
rival-blackOP•4mo ago
relevant tidbits: 
// app.config.mts

import { defineConfig } from '@tanstack/react-start/config'
import { default as tsConfigPaths } from 'vite-tsconfig-paths'
import { default as tailwindcss } from "@tailwindcss/vite";

export default defineConfig({
  tsr: {
    appDirectory: 'apps/web-app/src',
  },
  routers: {
    public: {
      dir: "apps/web-app/public",
    }
  },
  vite: {
    plugins: [
      tailwindcss(),
      tsConfigPaths({
        projects: ['apps/web-app/tsconfig.json'],
      }),
    ],
  },
})
// app.config.mts

import { defineConfig } from '@tanstack/react-start/config'
import { default as tsConfigPaths } from 'vite-tsconfig-paths'
import { default as tailwindcss } from "@tailwindcss/vite";

export default defineConfig({
  tsr: {
    appDirectory: 'apps/web-app/src',
  },
  routers: {
    public: {
      dir: "apps/web-app/public",
    }
  },
  vite: {
    plugins: [
      tailwindcss(),
      tsConfigPaths({
        projects: ['apps/web-app/tsconfig.json'],
      }),
    ],
  },
})
jsonc 
// apps/web-app/tsconfig.json
{
  "extends": "../../tsconfig.base.json",
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "files": ["../../types.d.ts", "app.config.mts"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "es2023"],
  },
}
jsonc 
// apps/web-app/tsconfig.json
{
  "extends": "../../tsconfig.base.json",
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "files": ["../../types.d.ts", "app.config.mts"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "es2023"],
  },
}
tsconfig.base.json 
json 
{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "moduleResolution": "bundler",
    "target": "es2023",
    "module": "esnext",
    "allowJs": false,
    "strict": true,
    "noEmit": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "skipDefaultLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noPropertyAccessFromIndexSignature": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "noImplicitReturns": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "importHelpers": true,
    "lib": ["ESNext"],
    "jsx": "preserve",
    "paths": {
      "@cf/base/env": ["libs/base/env/src/index.ts"],
      "@cf/base/errors": ["libs/base/errors/src/index.ts"],
      "@cf/base/utils": ["libs/base/utils/src/index.ts"],
      "@cf/content/blog": ["libs/content/blog/index.ts"],
      "@cf/core/blog": ["libs/core/blog/src/index.ts"],
      "@cf/core/github": ["libs/core/github/src/index.ts"],
      "@cf/core/question-bank": ["libs/core/question-bank/src/index.ts"],
      "@cf/providers/blog": ["libs/providers/blog/src/index.ts"],
      "@cf/ui/react": ["libs/ui/react/src/index.ts"],
      "@cf/ui/icons": ["libs/ui/icons/src/index.ts"]
    }
  }
}
json 
{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "moduleResolution": "bundler",
    "target": "es2023",
    "module": "esnext",
    "allowJs": false,
    "strict": true,
    "noEmit": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "skipDefaultLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noPropertyAccessFromIndexSignature": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "noImplicitReturns": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "importHelpers": true,
    "lib": ["ESNext"],
    "jsx": "preserve",
    "paths": {
      "@cf/base/env": ["libs/base/env/src/index.ts"],
      "@cf/base/errors": ["libs/base/errors/src/index.ts"],
      "@cf/base/utils": ["libs/base/utils/src/index.ts"],
      "@cf/content/blog": ["libs/content/blog/index.ts"],
      "@cf/core/blog": ["libs/core/blog/src/index.ts"],
      "@cf/core/github": ["libs/core/github/src/index.ts"],
      "@cf/core/question-bank": ["libs/core/question-bank/src/index.ts"],
      "@cf/providers/blog": ["libs/providers/blog/src/index.ts"],
      "@cf/ui/react": ["libs/ui/react/src/index.ts"],
      "@cf/ui/icons": ["libs/ui/icons/src/index.ts"]
    }
  }
}
I was able to get this (hot)fixed with: 
  vite: {
    plugins: [
      tailwindcss(),
      tsConfigPaths({
        projects: [
          'apps/web-app/tsconfig.json',
          'libs/ui/react/tsconfig.json',
        ],
      }),
    ],
  },
  vite: {
    plugins: [
      tailwindcss(),
      tsConfigPaths({
        projects: [
          'apps/web-app/tsconfig.json',
          'libs/ui/react/tsconfig.json',
        ],
      }),
    ],
  },

Did you find this page helpful?