fix: should load ts-node from project (#6341)

web-infra-dev · Oct 10, 2024 · 303331c · 303331c
1 parent ffd717f
commit 303331c
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git a/.changeset/weak-clocks-knock.md b/.changeset/weak-clocks-knock.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/app-tools': patch
+'@modern-js/utils': patch
+---
+
+fix: should load ts-node from project
+fix: 应该从项目中加载 ts-node
diff --git a/packages/document/main-doc/docs/zh/plugin/introduction.mdx b/packages/document/main-doc/docs/zh/plugin/introduction.mdx
@@ -6,7 +6,7 @@
 
 Modern.js 拥有自己的框架插件系统，你可以通过在 `modern.config.ts` 中配置 [`plugins`](/configure/app/plugins) 字段来使用 Modern.js 插件。
 
-### 插件类型 
+### 插件类型
 
 框架插件可以细分成三类，分别是：
 
@@ -62,8 +62,8 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
 | [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
 | [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
 | [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件)                                                                         |
-| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件)                                                                         |
+| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件)                                                                         |
+| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件)                                                                       |
 
 #### 未内置的插件
 
@@ -75,4 +75,4 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
 
 import OtherPlugins from '@site-docs/components/other-plugins.mdx';
 
-<OtherPlugins />
+<OtherPlugins />
diff --git a/packages/solutions/app-tools/src/utils/register.ts b/packages/solutions/app-tools/src/utils/register.ts
@@ -3,6 +3,8 @@ import {
   fs,
   type Alias,
   getAliasConfig,
+  loadFromProject,
+  logger,
   readTsConfigByFile,
 } from '@modern-js/utils';
 import type { ConfigChain } from '@rsbuild/core';
@@ -72,7 +74,7 @@ export const registerCompiler = async (
   const { MODERN_NODE_LOADER } = process.env;
   if (MODERN_NODE_LOADER !== 'esbuild') {
     try {
-      const tsNode = await import('ts-node');
+      const tsNode = await loadFromProject('ts-node', appDir);
       const tsNodeOptions = tsConfig['ts-node'];
       if (isTsProject) {
         tsNode.register({
@@ -89,6 +91,7 @@ export const registerCompiler = async (
         });
       }
     } catch (error) {
+      logger.error(error);
       await registerEsbuild({
         isTsProject,
         tsConfig,

diff --git a/packages/toolkit/utils/src/cli/require.ts b/packages/toolkit/utils/src/cli/require.ts
@@ -33,6 +33,33 @@ export async function compatibleRequire(
     : requiredModule;
 }
 
+export async function loadFromProject(moduleName: string, appDir: string) {
+  let requiredModule;
+  const paths = [appDir, process.cwd()];
+
+  try {
+    if (typeof require !== 'undefined') {
+      const modulePath = require.resolve(moduleName, { paths });
+      requiredModule = require(modulePath);
+    } else {
+      //@ts-ignore
+      const { createRequire } = await import('node:module');
+      //@ts-ignore
+      const require = createRequire(import.meta.url);
+      const modulePath = require.resolve(moduleName, { paths });
+      const moduleUrl = pathToFileURL(modulePath).href;
+      requiredModule = await import(moduleUrl);
+    }
+
+    return requiredModule.default || requiredModule;
+  } catch (error: any) {
+    if (error.code === 'MODULE_NOT_FOUND') {
+      throw new Error(`Cannot find module ${moduleName}.`);
+    }
+    throw error;
+  }
+}
+
 // Avoid `import` to be tranpiled to `require` by babel/tsc/rollup
 export const dynamicImport = new Function(
   'modulePath',