v4.0.0 mega thread - Githubissues

aleclarson commented 1 year ago

pnpm i vite-tsconfig-paths@next

Introducing v4.0.0

Stop using the tsconfig-paths package It is better to let Vite handle all of the resolving, so that this plugin can be only responsible for the path mapping.

At the same time, I am also adding the tsconfck package, which handles the loading of tsconfig.json files for us. This package is also used in Vite core (we should have Vite expose it in the future, to avoid the duplication).

The tsconfig-paths package was previously responsible for config loading and much of the path resolving logic, but now we can ditch it! I'm also ditching the recrawl-sync package, which was used for crawling the filesystem in search of tsconfig.json files.
Remove the extensions option Since the file resolution is delegated to Vite core, this option is no longer necessary.
Add the parseNative option The tsconfck package has a parseNative function that's able to delegate config loading to the TypeScript compiler. If you encounter a bug in tsconfig.json file loading, you can try passing parseNative: true to see if that helps. But you should avoid enabling it otherwise, since it has a noticeable performance cost (up to 600ms roughly speaking).

Fixes #54 Closes #73 Probably fixes #63 Probably fixes #68 Probably fixes #71

Bugs down here 👇

I don't expect there to be bugs, but we don't currently have an extensive test suite, so it's possible. If you find any, let me know and (if you're feeling extra generous) open a PR with a reproduction in the ./demo folder.

Regression: The tsconfck package doesn't support jsconfig.json files, so vite-tsconfig-paths has lost the support that was added in v3. See #22

aleclarson commented 1 year ago

If anyone wants to help update the test suite for v4, please see #81.

aniravi24 commented 1 year ago

I use an NX monorepo setup and I'm unable to get the build to work with v4, but am able to get it to work with v3. Some imports in my project are not being resolved correctly - I have a project that references one of my libraries via tsconfig path alias, and one of the libraries references another library within the monorepo. When a library references another library, the import doesn't seem to work correctly.

Seeing the Rollup failed to resolve import error where it can't find the reference.

aleclarson commented 1 year ago

@aniravi24 My guess is you aren't configuring the plugin correctly. But I would need a reproduction or at least some debug logs (from running DEBUG=vite-tsconfig-paths vite dev) to confirm that suspicion.

DreierF commented 1 year ago

I'm running into the same issue of getting Rollup failed to resolve import errors after the update to 4.0.0. It seems to happen when there is no include field given in a setup that uses project references. I have created a minimal reproducible example here: vite-tsconfig-paths-resolve-repro.zip

devatrox commented 1 year ago

I have the same issue. With 4.0.0 it cannot resolve anything that sits in the src folder, which I'm referencing like this import RuntimeProvider from "components/RuntimeProvider";

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "strictNullChecks": true,
    "strictFunctionTypes": false,
    "jsx": "react-jsx",
    "jsxImportSource": "theme-ui",
    "baseUrl": "src"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";

export default defineConfig({
  base: "/somepath/",
  esbuild: { jsx: "automatic" },
  build: {
    outDir: "build",
    chunkSizeWarningLimit: 600,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor_react: ["react", "react-dom"],
          vendor_mqtt: ["precompiled-mqtt", "mqtt"],
          vendor_themeui: [
            "@emotion/react",
            "@theme-ui/color",
            "@theme-ui/css",
            "@theme-ui/mdx",
            "@theme-ui/presets",
            "@theme-ui/style-guide",
            "theme-ui",
          ],
          vendor_datefns: ["date-fns"],
        },
      },
    },
  },
  plugins: [
    react(),
    tsconfigPaths(),
    svgrPlugin({
      svgrOptions: {
        icon: true,
      },
    }),
  ],
});

CHR-onicles commented 1 year ago

Same issue as @devatrox, fails to resolve imports from src with v4.0

mssngr commented 1 year ago

It seems that even when projects or root is specified, vite-tsconfig-paths tries to use the tsconfig.node.json from Vite instead of the tsconfig.json.

  vite-tsconfig-paths projects: [ '/Users/gkonkle/dev/hummingbird/ui/tsconfig.json' ] +1ms
  vite-tsconfig-paths config loaded: {
  configPath: '/Users/gkonkle/dev/hummingbird/ui/tsconfig.node.json',

mssngr commented 1 year ago

Created the above PR to resolve this issue: https://github.com/aleclarson/vite-tsconfig-paths/pull/82

aleclarson commented 1 year ago

Seems there were two bugs. Please try v4.0.1

A tsconfig file with references array is now used again (unless the files property is explicitly an empty array)
The include/exclude patterns are compiled correctly again

CHR-onicles commented 1 year ago

Seems there were two bugs. Please try v4.0.1

A tsconfig file with references array is now used again (unless the files property is explicitly an empty array)

The include/exclude patterns are compiled correctly again

The error persists on v4.0.1, still unable to resolve imports from src

aleclarson commented 1 year ago

@CHR-onicles Can't reproduce. I tested that specifically before & after publishing v4.0.1

CHR-onicles commented 1 year ago

@CHR-onicles Can't reproduce. I tested that specifically before & after publishing v4.0.1

That's weird, maybe I'm doing something wrong? But here's the details after upgrading to v4.0.1:

Edit: v4.0.2 breaks the same way :((

error message:

Failed to resolve import "@pages/AboutUs" from "src\App.tsx". Does the file exist?
4:38:54 PM [vite] Internal server error: Failed to resolve import "@pages/AboutUs" from "src\App.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: A:/A_SOURCE/Local/Web Dev/R HEMI/project/src/App.tsx:4:24
  16 |  import { useState } from "react";
  17 |  import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
  18 |  import { AboutUs } from "@pages/AboutUs";
     |                           ^
  19 |  import { Error } from "@pages/Error";
  20 |  import { Home } from "@pages/Home";
      at formatError (file:///A:/A_SOURCE/Local/Web%20Dev/R%20HEMI/project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40281:46)
      at TransformContext.error (file:///A:/A_SOURCE/Local/Web%20Dev/R%20HEMI/project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40277:19)
      at normalizeUrl (file:///A:/A_SOURCE/Local/Web%20Dev/R%20HEMI/project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:37145:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async TransformContext.transform (file:///A:/A_SOURCE/Local/Web%20Dev/R%20HEMI/project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:37278:47)
      at async Object.transform (file:///A:/A_SOURCE/Local/Web%20Dev/R%20HEMI/project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40534:30)
      at async loadAndTransform (file:///A:/A_SOURCE/Local/Web%20Dev/R%20HEMI/project/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:36921:29)
...truncated

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
  build: {
    outDir: "dist",
  },
  server: {
    open: true,
    port: 3000,
  },
});

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

tsconfig.path.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@assets/*": ["src/assets/*"],
          "@components/*": ["src/components/*"],
          "@pages/*": ["src/pages/*"],
          "@styles/*": ["src/styles/*"],
          "@utils/*": ["src/utils/*"],
          "@data/*": ["src/data/*"]
        }
    }
}

tsconfig.json

{
  "extends": "./tsconfig.path.json",
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Works fine when I downgrade back to v3.6.0, but breaks when I upgrade to v4.x

DreierF commented 1 year ago

@aleclarson I can at least confirm that 4.0.1 fixed our concrete instance of the problem. Thanks for the fast update!

aniravi24 commented 1 year ago

@aleclarson sorry for the delay, looks like everyone else got to this quickly and discovered the issue (thank you!) I can also confirm 4.0.1 fixed the specific issue I was having.

DreierF commented 1 year ago

There still seem to be issues under Windows using 4.0.1. A few of my colleges reported the following crash while it works fine under UNIX base systems.

error when starting dev server:
TSConfckParseError: failed to resolve "extends":"../tsconfig-base.json" in C:\project\out\test\resources\tsconfig.json
    at resolveExtends (C:\project\node_modules\.pnpm\tsconfck@2.0.1_typescript@4.9.3\node_modules\tsconfck\dist\index.cjs:491:9)
    at parseExtends (C:\project\node_modules\.pnpm\tsconfck@2.0.1_typescript@4.9.3\node_modules\tsconfck\dist\index.cjs:464:34)
    at Object.parse (C:\project\node_modules\.pnpm\tsconfck@2.0.1_typescript@4.9.3\node_modules\tsconfck\dist\index.cjs:415:24)
    at async Promise.all (index 2)
    at async configResolved (C:\project\node_modules\.pnpm\vite-tsconfig-paths@4.0.1_sqshdgy4e5w27wzvykvnubcgki\node_modules\vite-tsconfig-paths\dist\index.js:124:9)
    at async Promise.all (index 1)
    at async resolveConfig (file:///C:/project/node_modules/.pnpm/vite@3.2.5_pj4jucelx6r6jy43v33fk7tcnu/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:62878:5)
    at async createServer (file:///C:/project/node_modules/.pnpm/vite@3.2.5_pj4jucelx6r6jy43v33fk7tcnu/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:61943:20)
    at async CAC.<anonymous> (file:///C:/project/node_modules/.pnpm/vite@3.2.5_pj4jucelx6r6jy43v33fk7tcnu/node_modules/vite/dist/node/cli.js:707:24)
 ELIFECYCLE  Command failed with exit code 1.

mandarini commented 1 year ago

@aniravi24 @DreierF for Nx:

To work with 4.0.0 you can remove the projects: ['tsconfig.base.json'] from the plugin in your vite.config.ts files
To work with 4.0.1 you still need the projects array

I put in a PR to address that. Other than this, it should work as expected.

dospolov commented 1 year ago

4.0.0 and 4.0.1 doesn't work on Windows for me. All 3.6.* worked fine.

memark commented 1 year ago

It would be great if the Releases page were updated with information about this new major version https://github.com/aleclarson/vite-tsconfig-paths/releases

alonando commented 1 year ago

Seeing the same issue on Windows. Stuck with vite 3.2. and vite-tsconfig-paths 3.6. Any known workarounds?

janakg commented 1 year ago

vite 4.0.2 and vite-tsconfig-paths 3.6.0 works for us.

Is there anything we are missing here?

marlosirapuan commented 1 year ago

This error occurs only in win. In mac it works. Just rollback to vite-tsconfig-path 3.6.0 that will work (with vite 4.0.1 too)

aleclarson commented 1 year ago

Please try v4.0.3 if you're on Windows. Thanks to @joshwooding

alonando commented 1 year ago

v4.0.3 is working on Windows with latest vite. Thanks @aleclarson & @joshwooding!

ahnpnl commented 1 year ago

Hi, it'd be nice if GH release page is up-to-date with release tags as well as changelog is mentioned somewhere.

burtek commented 1 year ago

Would it be possible to have this work also with vitest.mock? Right now the alaises from compilerOptions.paths don't work

aleclarson / vite-tsconfig-paths

v4.0.0 mega thread #77

Introducing v4.0.0

Bugs down here 👇