fix: don't overwrite modules when using multiple versions

src/index.js

@@ -21,11 +21,11 @@ export default class ModulesCdnWebpackPlugin {
 
         this.disable = disable;
         this.env = env || process.env.NODE_ENV || 'development';
-        this.urls = {};
         this.exclude = exclude || [];
         this.only = only || null;
         this.verbose = verbose === true;
-        this.cacheModuleVersion = {};
+
+        this.modulesFromCdn = {};
     }
 
     apply(compiler) {
@@ -73,6 +73,11 @@ export default class ModulesCdnWebpackPlugin {
 
         const {version, peerDependencies} = readPkgUp({cwd: resolvePkg(modulePath, {cwd: contextPath})}).pkg;
 
+        const isAnotherVersionOfModuleLoaded = this.modulesFromCdn[modulePath] && this.modulesFromCdn[modulePath].version !== version;
+        if (isAnotherVersionOfModuleLoaded) {
+            return false;
+        }
+
         const cdnConfig = moduleToCdn(modulePath, version, {env});
 
         if (cdnConfig == null) {
@@ -82,45 +87,33 @@ export default class ModulesCdnWebpackPlugin {
             return false;
         }
 
-        if (this.hasConflict(cdnConfig.name, version)) {
-            return false;
-        }
-
         if (this.verbose) {
             console.log(`✔️ '${cdnConfig.name}' will be served by ${cdnConfig.url}`);
         }
 
-        let result = cdnConfig.var;
         if (peerDependencies) {
             for (const peerDependencyName in peerDependencies) {
                 if ({}.hasOwnProperty.call(peerDependencies, peerDependencyName)) {
-                    result = result && this.addModule(contextPath, peerDependencyName, {env});
+                    this.addModule(contextPath, peerDependencyName, {env});
                 }
             }
         }
 
-        if (result) {
-            this.urls[cdnConfig.name] = cdnConfig.url;
-            this.cacheModuleVersion[cdnConfig.name] = version;
-        }
-
-        return result;
-    }
+        this.modulesFromCdn[cdnConfig.name] = cdnConfig;
 
-    hasConflict(varName, version) {
-        return this.cacheModuleVersion[varName] && this.cacheModuleVersion[varName] !== version;
+        return cdnConfig.var;
     }
 
     applyWebpackCore(compiler) {
         compiler.plugin('after-compile', (compilation, cb) => {
             const entrypoint = compilation.entrypoints[Object.keys(compilation.entrypoints)[0]];
             const parentChunk = entrypoint.chunks.find(x => x.isInitial());
 
-            for (const name of Object.keys(this.urls)) {
-                const url = this.urls[name];
+            for (const name of Object.keys(this.modulesFromCdn)) {
+                const cdnConfig = this.modulesFromCdn[name];
 
                 const chunk = compilation.addChunk(name);
-                chunk.files.push(url);
+                chunk.files.push(cdnConfig.url);
 
                 chunk.parents = [parentChunk];
                 parentChunk.addChunk(chunk);
@@ -141,7 +134,7 @@ export default class ModulesCdnWebpackPlugin {
         includeAssetsPlugin.apply(compiler);
 
         compiler.plugin('after-compile', (compilation, cb) => {
-            const assets = Object.values(this.urls);
+            const assets = Object.keys(this.modulesFromCdn).map(key => this.modulesFromCdn[key].url);
 
             // HACK: Calling the constructor directly is not recomended
             //       But that's the only secure way to edit `assets` afterhand

test/core.js

@@ -391,3 +391,40 @@ test('async loading', async t => {
     const doesIncludeReact = outputs.some(output => includes(output, 'THIS IS REACT!'));
     t.false(doesIncludeReact);
 });
+
+test('when using multiple versions of a module, make sure the right version is used for each', async t => {
+    await cleanDir(path.resolve(__dirname, './fixtures/output/multiple-versions'));
+
+    const stats = await runWebpack({
+        context: path.resolve(__dirname, './fixtures/app'),
+
+        output: {
+            publicPath: '',
+            path: path.resolve(__dirname, './fixtures/output/multiple-versions')
+        },
+
+        entry: {
+            app: './mix.js'
+        },
+
+        plugins: [
+            new ModulesCdnWebpackPlugin({
+                verbose: true
+            })
+        ]
+    });
+
+    const files = stats.compilation.chunks.reduce((files, x) => files.concat(x.files), []);
+
+    t.true(includes(files, 'app.js'));
+    t.true(includes(files, 'https://unpkg.com/[email protected]/dist/react.js'));
+
+    const output = await fs.readFile(path.resolve(__dirname, './fixtures/output/multiple-versions/app.js'));
+
+    // NOTE: not inside t.false to prevent ava to display whole file in console
+    const doesIncludeReact14 = includes(output, 'THIS IS [email protected]!');
+    t.true(doesIncludeReact14);
+
+    const doesIncludeReact = includes(output, 'THIS IS REACT!');
+    t.false(doesIncludeReact);
+});