How to configure Vite so that plugins can run correctly outside the root directory?

Question

Background

I want to start vite service in any directory to support test file preview。And:

• the test file will be resolved by testFilePlugin
• the testFilePlugin contains some code that depends on commonJS modules: import { Fragment } from 'react/jsx-runtime'
• the react has been installed in my project

Failed 1

// main.js
import { createServer } from 'vite';
import testFilePlugin from 'testFilePlugin';

createServer({
  root: __dirname, // my project root
  resolve: {
    alias: {
      '@root': process.cwd(),
    },
  },
  plugins: [
    testFilePlugin(), // handle for testFile
  ],
});

Then, I import other project modules in this way：

import testFile from '@root/xx.test'

Then, I just execute main.js in other directory. But got an error:

[vite] Internal server error: Failed to resolve import "react/jsx-runtime" from "xx.test". Does the file exist?

I confirmed that react has been installed in my project directory. so this error may be because vite is looking for modules based on other directories's node_modules。

So I thought of using @rollup/plugin-node-resolve to manually add moduleDirectories:

Failed 2

// main.js
import { createServer } from 'vite';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import testFilePlugin from 'testFilePlugin';

createServer({
  root: __dirname, // my project root
  resolve: {
    alias: {
      '@root': process.cwd(),
    },
  },
  plugins: [
    nodeResolve({
      moduleDirectories: module.paths, // add my project moduleDirectories
    }),
    testFilePlugin(), // handle for testFile
  ],
});

No more compilation errors after retrying! But a runtime error occurred in the browser：

Uncaught SyntaxError: The requested module '/@fs/.../myProject/node_modules/react/jsx-runtime' does not provide an export named 'Fragment

So I thought that I should use the @rollup/plugin-commonjs plugin to solve this problem：

Failed 3

// main.js
import { createServer } from 'vite';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import testFilePlugin from 'testFilePlugin';

createServer({
  root: __dirname, // my project root
  resolve: {
    alias: {
      '@root': process.cwd(),
    },
  },
  plugins: [
    nodeResolve({
      moduleDirectories: module.paths, // add my project moduleDirectories
    }),
    commonjs({
      include: /node_modules/,
    }),
    testFilePlugin(), // handle for testFile
  ],
});

No runtime errors this time at last! But the page is always loading.

Looking at the network requests, I found 4 pending requests:

• http://localhost:3000/@id/__x00__/.../myProject/node_modules/react/cjs/react-jsx-runtime.production.min.js?commonjs-proxy
• http://localhost:3000/@id/__x00__/.../myProject/node_modules/react/cjs/react-jsx-runtime.development.js?commonjs-proxy
• http://localhost:3000/@id/__x00__/.../myProject/node_modules/react/cjs/react-jsx-runtime.development.js?commonjs-proxy
• http://localhost:3000/@id/__x00__/.../myProject/node_modules/object-assign/index.js?v=a502bc89?commonjs-proxy
• http://localhost:3000/@id/__x00__/.../myProject/node_modules/.vite/react.js?v=a502bc89&es-interop?commonjs-proxy

After the above failed attempts, I decided to give up on the Vite plugin to solve this problem！

Then, let me share some successful solutions that I have tried：

Success 1

Also install react in the target directory.

Success 2

Manually add react/jsx-runtime to vite's pre-bundling:

{
...
    optimizeDeps: {
      include: ['react/jsx-runtime']
    },
...
}

Success 3

Import then test file in other directories through the test file in my project:

// index.js in my project
import testFile from './xx.test'

---

// xx.test in my project
import testFile from '@root/xx.test' // import other directory test file

End

1. I wonder if there is a better solution for this requirement?
2. What is the reason for the failure of Failed x?