Vite插件中如何正确处理React组件的动态导入？

❤硕辰提问于 2026-03-02 20:45:20 阅读 3

前端

我在写一个Vite插件，想在transform阶段动态替换某些React组件的导入路径，但总是报“React is not defined”的错误。明明组件本身在项目里能正常跑，插件处理后就不行了。

我试过在transform返回的代码里加import React from ‘react’，但感觉这不是根本解法。是不是应该用别的钩子？比如resolveId或者load？

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.jsx') && code.includes('SpecialComponent')) {
        return {
          code: code.replace(
            /from 'SpecialComponent'/g,
            <code>from &#039;./replaced/SpecialComponent&#039;</code>
          )
        };
      }
    }
  };
}

我来解答赞 2 收藏

反馈

1 条解答

Dev · 志利 Lv1

你这个问题，直接用resolveId钩子替换路径就行，别在transform里折腾字符串替换。transform阶段替换代码容易干扰其他插件的处理顺序，React插件还没来得及注入React或者做JSX转换，你的代码就已经被改得面目全非了。

正确的做法：

import path from 'path';



export default function myPlugin() {

  return {

    name: 'my-plugin',

    resolveId(source, importer) {

      if (source === 'SpecialComponent') {

        return path.resolve(path.dirname(importer), './replaced/SpecialComponent.jsx');

      }

      return null;

    }

  };

}

在模块解析阶段就把路径替换掉，后续的React插件该怎么处理怎么处理，互不干扰。另外记得把你的相对路径根据importer算成绝对路径，不然Vite找不到文件会报错。

2026-03-02 21:02