From 60f205cf76ff51d6695f439042d5b881b1c11a69 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Thu, 9 Jan 2025 22:35:09 -0800 Subject: [PATCH 1/4] fix: add solutions to common problems --- examples/sites/demos/pc/webdoc/faq-en.md | 16 ++++++++++++++++ examples/sites/demos/pc/webdoc/faq.md | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/examples/sites/demos/pc/webdoc/faq-en.md b/examples/sites/demos/pc/webdoc/faq-en.md index 6c4a80787d..d15f2df617 100644 --- a/examples/sites/demos/pc/webdoc/faq-en.md +++ b/examples/sites/demos/pc/webdoc/faq-en.md @@ -16,3 +16,19 @@ if (window.__POWERED_BY_WUJIE__) { globalConfig.viewportWindow = window.parent } ``` + +## 2、In Vitepress, reference the Opentiny component package and use Vitepress to package the command: pnpm docs:build， report errors: ERR_UNSUPPORTED_DIR_IMPORT + +_Reason：_ Using Vitepress packaging, the suffix paths such as js/css related to file references in the component package cannot be found. Causing error: ERR_UNSUPPORTED_DIR_IMPORT + +_Solution:_ Resolve the error issue by configuring the 'vitepress/config. js' file: + +```js +export default defineConfig({ + vite: { + ssr: { + noExternal: [/@opentiny\//] + } + } +}) +``` diff --git a/examples/sites/demos/pc/webdoc/faq.md b/examples/sites/demos/pc/webdoc/faq.md index 1cb7f84a87..0281ada79c 100644 --- a/examples/sites/demos/pc/webdoc/faq.md +++ b/examples/sites/demos/pc/webdoc/faq.md @@ -16,3 +16,19 @@ if (window.__POWERED_BY_WUJIE__) { globalConfig.viewportWindow = window.parent } ``` + +## 2、在vitepress中，引用opentiny组件包，使用vitepress打包命令:pnpm docs:build，报错：ERR_UNSUPPORTED_DIR_IMPORT + +_原因：_ 使用vitepress打包，找不到组件包内文件相关引用的js/css等后缀路径。导致报错：ERR_UNSUPPORTED_DIR_IMPORT + +_解决方案:_ 通过配置`vitepress/config.js`文件，解决报错问题： + +```js +export default defineConfig({ + vite: { + ssr: { + noExternal: [/@opentiny\//] + } + } +}) +``` From 7127a5c5b0e061084a20799ada2752d9bea05d17 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Thu, 9 Jan 2025 23:44:37 -0800 Subject: [PATCH 2/4] fix: revise inspection comments --- examples/sites/demos/pc/webdoc/faq-en.md | 11 ++++++----- examples/sites/demos/pc/webdoc/faq.md | 11 ++++++----- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/examples/sites/demos/pc/webdoc/faq-en.md b/examples/sites/demos/pc/webdoc/faq-en.md index d15f2df617..87b2d14f35 100644 --- a/examples/sites/demos/pc/webdoc/faq-en.md +++ b/examples/sites/demos/pc/webdoc/faq-en.md @@ -2,10 +2,10 @@ ## 1, Popup element misaligned and flipped in wujie micro front-end -_Reason:_ The popup element has a boundary detection logic, and in sub applications, the width and height of 'window' may be much smaller than that of the viewport, +**Reason:** The popup element has a boundary detection logic, and in sub applications, the width and height of 'window' may be much smaller than that of the viewport, therefore, it can misjudge boundaries, leading to issues such as flipping and misalignment. -_Solution:_ Introducing popup global configuration, assigning the 'window' of the main application to the 'viewportWindow' of the global configuration for boundary judgment +**Solution:** Introducing 'popup global' configuration, assigning the 'window' of the main application to the 'viewportWindow' of the global configuration for boundary judgment ```js import globalConfig from '@opentiny/vue-renderless/common/global' @@ -17,15 +17,16 @@ if (window.__POWERED_BY_WUJIE__) { } ``` -## 2、In Vitepress, reference the Opentiny component package and use Vitepress to package the command: pnpm docs:build， report errors: ERR_UNSUPPORTED_DIR_IMPORT +## 2、In the 'Vitepress' project, reference the 'opentiny' component package and use the 'Vitepress' packaging command: 'pnpm docs:build' ， Causing error: 'ERR_UNSUPPORTED_DIR_IMPORT' -_Reason：_ Using Vitepress packaging, the suffix paths such as js/css related to file references in the component package cannot be found. Causing error: ERR_UNSUPPORTED_DIR_IMPORT +**Reason:** Unable to find the 'js/css/...' files referenced within the component package waiting for suffix path, error statement: 'Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import "xxx" is not supported resolving ES modules imported from xxx/lib/index.js' -_Solution:_ Resolve the error issue by configuring the 'vitepress/config. js' file: +**Solution:** In the '. vitepress/config. js' file, add the following code: ```js export default defineConfig({ vite: { + // ... ssr: { noExternal: [/@opentiny\//] } diff --git a/examples/sites/demos/pc/webdoc/faq.md b/examples/sites/demos/pc/webdoc/faq.md index 0281ada79c..830f426c01 100644 --- a/examples/sites/demos/pc/webdoc/faq.md +++ b/examples/sites/demos/pc/webdoc/faq.md @@ -2,10 +2,10 @@ ## 1、弹出元素在无界微前端中发生错位、翻转 -_原因：_ 弹出类的元素，存在一个边界检测逻辑，在子应用中，`window` 的宽高可能会比视口小得多， +**原因：** 弹出类的元素，存在一个边界检测逻辑，在子应用中，`window` 的宽高可能会比视口小得多， 因此会错误判断边界，导致翻转和错位等问题。 -_解决方案:_ 引入 popup 全局配置，将主应用的 `window` 赋值给全局配置的 `viewportWindow` 用于边界判断 +**解决方案：** 引入 `popup` 全局配置，将主应用的 `window` 赋值给全局配置的 `viewportWindow` 用于边界判断 ```js import globalConfig from '@opentiny/vue-renderless/common/global' @@ -17,15 +17,16 @@ if (window.__POWERED_BY_WUJIE__) { } ``` -## 2、在vitepress中，引用opentiny组件包，使用vitepress打包命令:pnpm docs:build，报错：ERR_UNSUPPORTED_DIR_IMPORT +## 2、在 `Vitepress` 项目中，引用 `opentiny` 组件包，使用 `Vitepress` 打包命令：`pnpm docs:build`，导致报错：`ERR_UNSUPPORTED_DIR_IMPORT` -_原因：_ 使用vitepress打包，找不到组件包内文件相关引用的js/css等后缀路径。导致报错：ERR_UNSUPPORTED_DIR_IMPORT +**原因：** 找不到组件包内引用相关文件的 `js/css/...` 等后缀路径，报错语句：`Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'xxx' is not supported resolving ES modules imported from xxx/lib/index.js` -_解决方案:_ 通过配置`vitepress/config.js`文件，解决报错问题： +**解决方案：** 在`.vitepress/config.js`文件中，加入以下代码： ```js export default defineConfig({ vite: { + // ... ssr: { noExternal: [/@opentiny\//] } From 3a177eeed84df0f0b91cec0d83365f294f11c849 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Thu, 9 Jan 2025 23:45:45 -0800 Subject: [PATCH 3/4] fix: revise inspection comments --- examples/sites/demos/pc/webdoc/faq-en.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/sites/demos/pc/webdoc/faq-en.md b/examples/sites/demos/pc/webdoc/faq-en.md index 87b2d14f35..b1df85442c 100644 --- a/examples/sites/demos/pc/webdoc/faq-en.md +++ b/examples/sites/demos/pc/webdoc/faq-en.md @@ -17,7 +17,7 @@ if (window.__POWERED_BY_WUJIE__) { } ``` -## 2、In the 'Vitepress' project, reference the 'opentiny' component package and use the 'Vitepress' packaging command: 'pnpm docs:build' ， Causing error: 'ERR_UNSUPPORTED_DIR_IMPORT' +## 2、In the 'Vitepress' project, reference the 'Opentiny' component package and use the 'Vitepress' packaging command: 'pnpm docs:build' ， Causing error: 'ERR_UNSUPPORTED_DIR_IMPORT' **Reason:** Unable to find the 'js/css/...' files referenced within the component package waiting for suffix path, error statement: 'Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import "xxx" is not supported resolving ES modules imported from xxx/lib/index.js' From 18f2c0255e949b4d59343e0b3b6f23e4d9321414 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Thu, 9 Jan 2025 23:46:49 -0800 Subject: [PATCH 4/4] fix: revise inspection comments --- examples/sites/demos/pc/webdoc/faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/sites/demos/pc/webdoc/faq.md b/examples/sites/demos/pc/webdoc/faq.md index 830f426c01..a746f087ae 100644 --- a/examples/sites/demos/pc/webdoc/faq.md +++ b/examples/sites/demos/pc/webdoc/faq.md @@ -17,7 +17,7 @@ if (window.__POWERED_BY_WUJIE__) { } ``` -## 2、在 `Vitepress` 项目中，引用 `opentiny` 组件包，使用 `Vitepress` 打包命令：`pnpm docs:build`，导致报错：`ERR_UNSUPPORTED_DIR_IMPORT` +## 2、在 `Vitepress` 项目中，引用 `Opentiny` 组件包，使用 `Vitepress` 打包命令：`pnpm docs:build`，导致报错：`ERR_UNSUPPORTED_DIR_IMPORT` **原因：** 找不到组件包内引用相关文件的 `js/css/...` 等后缀路径，报错语句：`Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'xxx' is not supported resolving ES modules imported from xxx/lib/index.js`