Umi Plugin

This page is the Part.2 of configuration, we will add a middleware in dev-server to receives API from Inspector Component, and call your local IDE/Editor to open the source file from server side. Please make sure you have already added the Inspector Component in your project as Part.1.

In this section, follow the simple setup below to integrate react-dev-inspector into your UmiJS (opens in a new tab) project.

Umi4 Setup

At first install the plugin package:

npm i -D @react-dev-inspector/umi4-plugin

Then add the plugin to your UmiJS config file and that's all done, likes .umirc.dev.ts:

// https://umijs.org/docs/api/config
import { defineConfig } from 'umi'
 
export default defineConfig({
  ...
 
  plugins: [
    ...
 
    '@react-dev-inspector/umi4-plugin',
  ],
})

The plugin includes @react-dev-inspector/babel-plugin, which will automatically be disabled when using srcTranspiler: 'swc' in umi4 config or when in production build mode.

Umi3 Setup

Same as setup with Umi4, but change the plugin package to:

npm i -D @react-dev-inspector/umi3-plugin

Then add the plugin to your UmiJS config file and that's all done, likes .umirc.dev.ts:

// https://v3.umijs.org/config
import { defineConfig } from 'umi'
 
export default defineConfig({
  ...
 
  plugins: [
    ...
 
    '@react-dev-inspector/umi3-plugin',
  ],
})

This plugin has include a @react-dev-inspector/babel-plugin which will automatically disable when production build mode.

Example

Example project code you can find in examples/umi4 (opens in a new tab) and examples/umi3 (opens in a new tab), or see online demo via:

(opens in a new tab)