In webpack_demo, add example showing that you can only use either ESM export syntax or CommonJS export syntax, not both

Author: arcticmatt

webpack_demo/dist/main.js

@@ -1,3 +1,5 @@
+console.log("commonjs_module");
+
 exports.myCommonJsModuleExportedFunction = function () {
   return "antlers";
 };

webpack_demo/src/commonjs_module.js

@@ -1,3 +1,5 @@
+console.log("es_module");
+
 export function myEsModuleExportedFunction() {
   return "elephant";
 }

webpack_demo/src/es_module.js

@@ -0,0 +1,10 @@
+console.log("export_both");
+
+exports.exportBothCommonJs = function () {
+  return "lion";
+};
+
+// If you want to use exports, this needs to be commented out.
+// export function exportBothEs() {
+//   return "tiger";
+// }

webpack_demo/src/export_both.js

@@ -1,16 +1,27 @@
-// All of these work!
+console.log("index");
 
-// import { myEsModuleExportedFunction } from "./es_module.js";
+// ===== All of these work! =====
+import { myEsModuleExportedFunction } from "./es_module.js";
 // const { myEsModuleExportedFunction } = require("./es_module.js");
 
 // const { myCommonJsModuleExportedFunction } = require("./commonjs_module.js");
 // import { myCommonJsModuleExportedFunction } from "./commonjs_module.js";
+// ==============================
+
+// ===== Can only use one of these =====
+// import { exportBothEs } from "./export_both";
+import { exportBothCommonJs } from "./export_both";
+// =====================================
 
 function component() {
   const element = document.createElement("div");
 
-  // element.innerHTML = myEsModuleExportedFunction();
-  // element.innerHTML = myCommonJsModuleExportedFunction();
+  element.innerHTML = "";
+  // element.innerHTML += myEsModuleExportedFunction();
+  // element.innerHTML += myCommonJsModuleExportedFunction();
+
+  // element.innerHTML += exportBothEs();
+  element.innerHTML += exportBothCommonJs();
 
   return element;
 }