Correct why to include external plugins in a custom plugin

[boojum]

I'm building a simple vite plugin for react apps:

export const pluginExperiment = () => ({
  name: 'plugin-experiment',
  config: (config) => {
    config.root = 'src'
    config.publicDir = '../public'
    config.build.outDir = '../dist'
  },
})

Which I use like so in vite.config.js:

import { defineConfig } from 'vite'
import { pluginExperiment } from 'plugin-experiment'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [pluginExperiment(), react()],
})

With the above, running vite build generates the app just fine, and vite preview allows me to see correctly working app.

How can I move @vitejs/plugin-react to be loaded by my custom plugin? I tried:

import react from '@vitejs/plugin-react'

export const pluginExperiment = () => ({
  name: 'plugin-experiment',
  config: (config) => {
    config.root = 'src'
    config.publicDir = '../public'
    config.build.outDir = '../dist'
  },

  configResolved: (config) => {
    config.plugins.push(react())
  },
})

But vite build results in a error:

error during build:
Error: [vite:load-fallback] Could not load /@react-refresh (imported by src/App.jsx): ENOENT: no such file or directory, open '/@react-refresh'

While with the following:

import react from '@vitejs/plugin-react'

export const pluginExperiment = () => ({
  name: 'plugin-experiment',
  config: (config) => {
    config.root = 'src'
    config.publicDir = '../public'
    config.build.outDir = '../dist'
  },

  configResolved: (config) => {
    config.plugins = [react, ...config['plugins']]
  },
})

vite build runs without errors but vite preview results in another error:

Uncaught ReferenceError: React is not defined

While this configuration:

import react from '@vitejs/plugin-react'

export const pluginExperiment = () => ({
  name: 'plugin-experiment',
  config: (config) => {
    config.root = 'src'
    config.publicDir = '../public'
    config.build.outDir = '../dist'
  },

  configResolved: (config) => {
    config.plugins = [react(), ...config['plugins']]
  },
})

Ends with the following error:

Uncaught ReferenceError: $RefreshSig$ is not defined

I'm more than a little stumped here, and would appreciate advice on what is happening and how can I fix this.

[hi-ogawa]

Your "plugin function" can return PluginOption, which can be multiple Plugins.
It would look like this in your case:

// your plugin code
import type { Plugin, PluginOption } from "vite"
import react from '@vitejs/plugin-react'

export function myPlugin(): PluginOption {
  const myActualPlugin: Plugin = {
    name: "my-actual-plugin"
  }
  return [
    react(),
    myActualPlugin,
  ];
}


// plugin user code
import { defineConfig } from "vite"
import { myPlugin } from "@my/plugin"

export default defineConfig({
  plugins: [myPlugin()]
});

[s3xysteak]

How could I use different plugins in a custom plugin, in dev mode and prod mode?
Maybe like:

return [
  react(env.dev ? configA : configB),
]