Packages can not be auto imported in vscode

[tiavina-mika]

What version of Turborepo are you using?

1.9.3

What package manager are you using / does the bug impact?

Yarn v1

What operating system are you using?

Windows

Describe the Bug

The import work, but the auto import is not working, so I should manually write the import. Here is my structure:

package.json

{
  "name": "@myturbo/types",
  "version": "1.0.0",
  "description": "typescript types and interfaces",
  "author": "tiavina-mika",
  "license": "MIT",
  "main": "./index.ts",
  "types": "./index.ts",
  "devDependencies": {
    "typescript": "^5.0.4",
    "tsconfig": "*"
  }
}

tsconfig.json

{
  "extends": "tsconfig/base.json",
  "compilerOptions": {
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "noEmit": true,
    "strict": true
  },
  "exclude": ["node_modules"]
}

index.ts

export interface IArticle {
  title: string;
}

apps/docs/package.json

{
  "name": "docs",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev --port 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^13.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "ui": "*"
  },
  "devDependencies": {
    "@types/node": "^17.0.12",
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "eslint-config-custom": "*",
    "tsconfig": "*",
    "typescript": "^4.5.3",
    "@myturbo/types": "*"
  }
}

Expected Behavior

Should auto suggested and auto import in vs code

To Reproduce

• create a new packages
• add the package in package.json of the app that will need it
• write the exported code, vscode does not suggest it

Reproduction Repo

No response

[mehulkar]

@tiavina-mika is this a general question about monorepo setup or are you starting from a specific example that we provide and it's broken out of box?

[laneme]

Slightly similar case but with with-svelte starter.

If you remove the import statement from apps/web/src/routes/+page.svelte and try to auto import MyCounterButton, vscode doesnt give you autocompletion. I suppose paths should be properly configured in the starter packs beforehand.

I solved it with a vscode plugin named Svelte Auto Import (by pivaszbs) Auto Import plugin by steoates didn't work.

(offtopic: don't forget to run turbo dev at least once, otherwise .svelte-kit doesnt generate just with pnpm install. related)

[mnpqraven]

I was trying to migrate to turbo and i think this is present with the basic examples

Basic repo

The above repo is created with npx create-turbo -e basic and then follow the steps in Sharing code docs to add a new package (ui package's autoimport works but it's using build files from tsup so I won't touch from that).

Then in the apps repo you can't auto import the math functions

// apps/docs/app/page.tsx

export default function Page(): JSX.Element {
  // NOTE: can't auto import this
  add()

[mnpqraven]

Also something that is confusing me is that while the above sharing code section mentions that you need to create a tsconfig.json for said shared package, in this blog by turbo (You might not need TypeScript project references) it's stated that an internal package should have a package.json but no tsconfig.json. Not sure if which one the correct configuration in this case

[hoaibao44]

I faced the same problem when using VSCode. I tried to modify the apps/docs/tsconfig.json by adding:

  "include": ["../../packages/ui/src/**/*.tsx"]

It's working now but I am not sure this is the good way to deal with it or not.

[SeanDem]

best solution i found is add the following to tsconfig.json

    "include": [
        "src/**/*.ts",
        "src/**/*.svelte",
        "node_modules/@repo/**/*.svelte",
        "node_modules/@repo/**/*.ts"
    ]

basically just add the paths to the repo dependencies that your app depends on. Make sure they are in dependencies or devDependencies in pacakge.json and you have installed.

[AurelienVasseur]

I am currently facing the same issue. I tried solution from @hoaibao44 and it works (but same I am not sure if it's a good solution to deal with the problem).

@SeanDem I tried also yours but it's not working if node_modules is excluded. Do you know If there is a way to include subfolders even if a parent folder is excluded? I tried with files as suggested here https://github.com/Microsoft/TypeScript/issues/17228 but it's not working on my side

[rtorcato]

I was having problems with auto importing and it all comes down to how my package.json files are set up.

Most likely you are missing "exports" in your package.json file

here is an what's in my package.json file for a shadcn package I have.

"type": "module",
  "exports": {
    "./globals.css": "./src/globals.css",
    "./lib/*": "./src/lib/*.ts",
    "./components/ui/*": "./src/components/ui/*.tsx",
    "./hooks/*": "./src/hooks/*.ts"
  },

now if I was building the package I would have it like this:

"files": [
    "dist"
  ],
  "main": "./dist/cjs/index.js",
  "module": "./dist/es/index.mjs",
  "types": "./dist/cjs/index.d.ts",
  "exports": {
    "import": {
      "types": "./dist/es/index.d.ts",
      "default": "./dist/es/index.js"
    },
    "require": {
      "types": "./dist/cjs/index.d.cts",
      "default": "./dist/cjs/index.cjs"
    }
  },

I am building with tsup in this example, but you can use other build libraries too.

note: do not modify your tsconfig files to include other packages. That is a weird hack and you will run into problems with that approach.

[hoaibao44]

@rtorcato Thank you for yours hint. I use tsup and everything seem right.

For other folks, please take a look here, you might found it's great example.

[anthonyshew]

Guidance for this can be found in the latest iteration of the documentation: https://turbo.build/repo/docs/guides/tools/typescript#creating-entrypoints-to-the-package