feat: vite7/8 support

shlab · shlab · commit 855aa6f8c0d8 · 2026-03-13T11:13:52.000+08:00
diff --git a/example/apps/example-vite7/index.html b/example/apps/example-vite7/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/example/apps/example-vite7/package.json b/example/apps/example-vite7/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "example-vite7",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Example",
+  "scripts": {
+    "build": "vite build",
+    "start": "vite --host"
+  },
+  "dependencies": {
+    "@ts-mono-alias/package-a": "workspace:*",
+    "@ts-mono-alias/package-b": "workspace:*",
+    "@ts-mono-alias/package-c": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.15",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite-plugin-ts-mono-alias": "file:../../..",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/example/apps/example-vite7/src/App.tsx b/example/apps/example-vite7/src/App.tsx
@@ -0,0 +1,28 @@
+import { useMemo, useState } from 'react';
+import { a } from '@ts-mono-alias/package-a';
+import { b } from '@ts-mono-alias/package-b';
+import c from '@ts-mono-alias/package-c';
+
+import Demo from '@/components/Demo';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  const resultA = useMemo(() => a(), []);
+  const resultB = useMemo(() => b(), []);
+
+  return (
+    <div className="App">
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((c) => c + 1)}>count is {count}</button>
+        <p>a: {resultA}</p>
+        <p>b: {resultB}</p>
+        <p>c: {c()}</p>
+      </div>
+      <Demo />
+    </div>
+  );
+}
+
+export default App;
diff --git a/example/apps/example-vite7/src/components/Demo.tsx b/example/apps/example-vite7/src/components/Demo.tsx
@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>
+}
diff --git a/example/apps/example-vite7/src/main.tsx b/example/apps/example-vite7/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/example/apps/example-vite7/tsconfig.json b/example/apps/example-vite7/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "types": ["node"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/*.test.tsx", "**/*.test.ts"]
+}
diff --git a/example/apps/example-vite7/vite.config.ts b/example/apps/example-vite7/vite.config.ts
@@ -0,0 +1,30 @@
+import { join, resolve } from 'path';
+
+import tsMonoAlias from '../../../dist/index.cjs';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig(() => {
+  return {
+    optimizeDeps: {
+      include: ['react/jsx-runtime'],
+    },
+    plugins: [
+      tsMonoAlias({
+        ignorePackages: ['example'],
+        exact: true,
+        alias: {
+          '@ts-mono-alias/package-c': ({ dir }) => join(dir, './index.ts'),
+        },
+        cwd: __dirname,
+      }),
+    ],
+    resolve: {
+      alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
+    },
+
+    build: {
+      assetsDir: '',
+    },
+  };
+});
diff --git a/example/apps/example-vite8/index.html b/example/apps/example-vite8/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/example/apps/example-vite8/package.json b/example/apps/example-vite8/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "example-vite8",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Example",
+  "scripts": {
+    "build": "vite build",
+    "start": "vite --host"
+  },
+  "dependencies": {
+    "@ts-mono-alias/package-a": "workspace:*",
+    "@ts-mono-alias/package-b": "workspace:*",
+    "@ts-mono-alias/package-c": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.15",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite-plugin-ts-mono-alias": "file:../../..",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/example/apps/example-vite8/src/App.tsx b/example/apps/example-vite8/src/App.tsx
@@ -0,0 +1,28 @@
+import { useMemo, useState } from 'react';
+import { a } from '@ts-mono-alias/package-a';
+import { b } from '@ts-mono-alias/package-b';
+import c from '@ts-mono-alias/package-c';
+
+import Demo from '@/components/Demo';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  const resultA = useMemo(() => a(), []);
+  const resultB = useMemo(() => b(), []);
+
+  return (
+    <div className="App">
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((c) => c + 1)}>count is {count}</button>
+        <p>a: {resultA}</p>
+        <p>b: {resultB}</p>
+        <p>c: {c()}</p>
+      </div>
+      <Demo />
+    </div>
+  );
+}
+
+export default App;
diff --git a/example/apps/example-vite8/src/components/Demo.tsx b/example/apps/example-vite8/src/components/Demo.tsx
@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>
+}
diff --git a/example/apps/example-vite8/src/main.tsx b/example/apps/example-vite8/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/example/apps/example-vite8/tsconfig.json b/example/apps/example-vite8/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "types": ["node"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/*.test.tsx", "**/*.test.ts"]
+}
diff --git a/example/apps/example-vite8/vite.config.ts b/example/apps/example-vite8/vite.config.ts
@@ -0,0 +1,30 @@
+import { join, resolve } from 'path';
+
+import tsMonoAlias from '../../../dist/index.cjs';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig(() => {
+  return {
+    optimizeDeps: {
+      include: ['react/jsx-runtime'],
+    },
+    plugins: [
+      tsMonoAlias({
+        ignorePackages: ['example'],
+        exact: true,
+        alias: {
+          '@ts-mono-alias/package-c': ({ dir }) => join(dir, './index.ts'),
+        },
+        cwd: __dirname,
+      }),
+    ],
+    resolve: {
+      alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
+    },
+
+    build: {
+      assetsDir: '',
+    },
+  };
+});
diff --git a/example/apps/example/package.json b/example/apps/example/package.json
@@ -8,9 +8,9 @@
     "start": "vite --host"
   },
   "dependencies": {
-    "@ts-mono-alias/package-a": "^1.0.0",
-    "@ts-mono-alias/package-b": "^1.0.0",
-    "@ts-mono-alias/package-c": "^1.0.0",
+    "@ts-mono-alias/package-a": "workspace:*",
+    "@ts-mono-alias/package-b": "workspace:*",
+    "@ts-mono-alias/package-c": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/example/apps/example/vite.config.ts b/example/apps/example/vite.config.ts
@@ -1,6 +1,6 @@
 import { join, resolve } from 'path';
 
-import tsMonoAlias from 'vite-plugin-ts-mono-alias';
+import tsMonoAlias from '../../../dist/index.cjs';
 import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
@@ -16,6 +16,7 @@ export default defineConfig(() => {
         alias: {
           '@ts-mono-alias/package-c': ({ dir }) => join(dir, './index.ts'),
         },
+        cwd: __dirname,
       }),
     ],
     resolve: {
diff --git a/src/index.ts b/src/index.ts
@@ -212,9 +212,13 @@ export default async function tsMonoAlias(options: TsMonoAliasOption = defaultOp
       const matchedPackage = matchModule(importee, importer);
 
       if (matchedPackage) {
-        return this.resolve(matchedPackage, resolvedImporter, newResolveOptions).then((resolved) => {
-          return resolved || { id: matchedPackage };
-        });
+        return this.resolve(matchedPackage, resolvedImporter, newResolveOptions)
+          .then((resolved) => {
+            return resolved || { id: matchedPackage };
+          })
+          .catch(() => {
+            return { id: matchedPackage };
+          });
       }
 
       return null;
diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -10,8 +10,14 @@ describe('ts-mono-alias plugin', () => {
   const libAFile = join(rootDir, 'packages/package-a/src/index.ts');
 
   // Helper context to mock Rollup Context
-  const getContext = () => ({
-    resolve: async (id: string) => ({ id })
+  // Simulate Vite 7/8 throwing an error for external ids without trailing specs
+  const getContext = (simulateError = false) => ({
+    resolve: async (id: string) => {
+      if (simulateError) {
+        throw new Error(`Rollup Error: Could not resolve entry module "${id}"`);
+      }
+      return { id };
+    }
   });
 
   it('resolves bare import for workspace package to its src directory', async () => {
@@ -20,6 +26,17 @@ describe('ts-mono-alias plugin', () => {
     // @ts-ignore
     const result = await plugin.resolveId.call(getContext(), '@ts-mono-alias/package-a', appFile, {});
     
+    expect(result).toBeDefined();
+    expect(result).toBeDefined();
+    expect(result?.id).toBe(join(rootDir, 'packages/package-a/src'));
+  });
+
+  it('safely falls back if `this.resolve` throws an error (Vite 7/8 compatibility)', async () => {
+    const plugin = await tsMonoAlias({ cwd });
+    
+    // @ts-ignore
+    const result = await plugin.resolveId.call(getContext(true), '@ts-mono-alias/package-a', appFile, {});
+    
     expect(result).toBeDefined();
     expect(result?.id).toBe(join(rootDir, 'packages/package-a/src'));
   });
diff --git a/tests/integration.sh b/tests/integration.sh
@@ -0,0 +1,30 @@
+#!/bin/bash
+set -e
+
+# Change to the example app directory
+cd example/apps/example
+
+echo "Testing Vite 4..."
+sed -i '' 's/"vite": "^[0-9.]*"/"vite": "^4.0.0"/' package.json
+sed -i '' 's/"@vitejs\/plugin-react": "^[0-9.]*"/"@vitejs\/plugin-react": "^3.0.0"/' package.json
+rm -rf dist node_modules pnpm-lock.yaml || true
+pnpm install
+pnpm build
+echo "Vite 4 Build Successful!"
+
+echo "Testing Vite 7..."
+sed -i '' 's/"vite": "^[0-9.]*"/"vite": "^7.3.1"/' package.json
+sed -i '' 's/"@vitejs\/plugin-react": "^[0-9.]*"/"@vitejs\/plugin-react": "^6.0.0"/' package.json
+rm -rf dist node_modules pnpm-lock.yaml || true
+pnpm install
+pnpm build
+echo "Vite 7 Build Successful!"
+
+echo "Testing Vite 8..."
+sed -i '' 's/"vite": "^[0-9.]*"/"vite": "^8.0.0"/' package.json
+rm -rf dist node_modules pnpm-lock.yaml || true
+pnpm install
+pnpm build
+echo "Vite 8 Build Successful!"
+
+echo "Done! All versions built successfully."
diff --git a/tests/integration.test.ts b/tests/integration.test.ts
diff --git a/vitest.config.ts b/vitest.config.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Demo() {`
	`2`	`+ return <div>demo</div>`
	`3`	`+}`