From 4fad0e88f0e7c470d7308b55e6fc3fb2fb11b4fe Mon Sep 17 00:00:00 2001
From: Chungen Li <licg9999@126.com>
Date: Fri, 6 Jan 2023 23:37:51 +0800
Subject: [PATCH] fix: fix ext mod id and add doc for not-yet-installed dep
 (#34)

* Fix external module id

* Add doc for not-yet-installed deps
---
 README.md                      | 17 ++++++++++++++++-
 src/TranspileExternalModule.ts |  8 ++++----
 src/TranspileWebpackPlugin.ts  |  2 +-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index dfbbd00..9c7265e 100644
--- a/README.md
+++ b/README.md
@@ -117,7 +117,7 @@ Given `{ "exports": { "import": "index.mjs", "require": "index.cjs" } }` in `pac
 
 ## Known limits
 
-**<a name="known-limit-01" href="#known-limit-01">01:</a>** Can't handle circular dependencies in the same way as NodeJS.
+**<a name="known-limit-01" href="#known-limit-01">01:</a>** _Can't handle circular dependencies in the same way as NodeJS._
 
 In NodeJS, top-level logics in a file run exactly at the time when it's required, which makes circular dependencies possible to work. Take an example of files `a.js` and `b.js`:
 
@@ -174,6 +174,21 @@ Though, for a webpack generated file, the real exporting is always done in the e
 
 Making circular dependencies is a bad practice. But you might have to face them if using some libs that are popular but maintained since the early releases of NodeJS, like [jsdom](https://github.com/jsdom/jsdom). When this happens, please use the [externals](https://webpack.js.org/configuration/externals/) to leave the libs untouched.
 
+**<a name="known-limit-02" href="#known-limit-02">02:</a>** _Can't conditionally import not-yet-installed dependencies._
+
+Webpack always detects and resolves import statements regardless of whether they run conditionally. Logics as below end up with the conditionally imported dependency `colorette` resolved:
+
+```js
+function print(message, color) {
+  if (typeof color === 'string') {
+    message = require('colorette')[color](message);
+  }
+  console.log(message);
+}
+```
+
+Besides, conditionally importing any not-yet-installed dependency causes the compile-time error of `Module not found` in webpack. As a result, either, you need to make sure the conditionally imported dependency installed. Or, use the [externals](https://webpack.js.org/configuration/externals/) to leave it untouched.
+
 ## Contributing
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.
diff --git a/src/TranspileExternalModule.ts b/src/TranspileExternalModule.ts
index af6856f..36d11d2 100644
--- a/src/TranspileExternalModule.ts
+++ b/src/TranspileExternalModule.ts
@@ -1,14 +1,14 @@
 import { ExternalModule } from './peers/webpack';
 
 export class TranspileExternalModule extends ExternalModule {
-  resourcePath: string;
+  originPath: string;
 
-  constructor(request: string, type: string, resourcePath: string) {
+  constructor(request: string, type: string, originPath: string) {
     super(request, type, request);
-    this.resourcePath = resourcePath;
+    this.originPath = originPath;
   }
 
   identifier() {
-    return `external ${this.externalType} ${this.resourcePath}`;
+    return `${super.identifier()} (${this.originPath})`;
   }
 }
diff --git a/src/TranspileWebpackPlugin.ts b/src/TranspileWebpackPlugin.ts
index 6790de5..840c722 100644
--- a/src/TranspileWebpackPlugin.ts
+++ b/src/TranspileWebpackPlugin.ts
@@ -263,7 +263,7 @@ export class TranspileWebpackPlugin {
         const extModCandidate = new TranspileExternalModule(
           request,
           externalModuleTypeCjs,
-          childResourcePath
+          entryResourcePath
         );
         let extMod = compilation.getModule(extModCandidate);
         let doesExtModNeedBuild = false;