package.json "type": "module" uses javascript/esm vs javascript/auto

[bchavez]

Hello,

Thank you for the cool Ladda library. Just wanted to drop a quick note in case anyone had the same issue as me... I googled for a few hours and didn't come up with anything.

• I recently updated from 2.0.1 to 2.0.3 and my webpack build broke.

I tracked down the breaking change to this commit and this line:

• b75722f#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R12

• Ladda/package.json

  Line 12 in c7a9c44

  "type": "module",

I think this "type": "module" has something to do with a JS loader that was causing expose-loader not to function correctly.

Basically, I have the following code:

import "expose-loader?exposes=Ladda!ladda/js/ladda.js";

which exports Ladda to the global window; and then I can use Ladda on a webpage.

However, with 2.0.3, I got the following JS error in console:

Uncaught ReferenceError: require is not defined
    at Object../node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js (ladda-exposed.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at Page.ts:22:1
    at Page.ts:23:45
    at Page.ts:23:45

Checking webpack outputs, the 2.0.3 output is:

// BAD
/***/ "./node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js":
/*!*******************************************************************************************************!*\
  !*** ./node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js ***!
  \*******************************************************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
var ___EXPOSE_LOADER_IMPORT___ = require("-!./ladda.js");
var ___EXPOSE_LOADER_GET_GLOBAL_THIS___ = require("../../expose-loader/dist/runtime/getGlobalThis.js");
var ___EXPOSE_LOADER_GLOBAL_THIS___ = ___EXPOSE_LOADER_GET_GLOBAL_THIS___;
if (typeof ___EXPOSE_LOADER_GLOBAL_THIS___["Ladda"] === 'undefined') ___EXPOSE_LOADER_GLOBAL_THIS___["Ladda"] = ___EXPOSE_LOADER_IMPORT___;
else throw new Error('[exposes-loader] The "Ladda" value exists in the global scope, it may not be safe to overwrite it, use the "override" option')
module.exports = ___EXPOSE_LOADER_IMPORT___;

When you downgrade to 2.0.1, or remove "type": "module" from node_modules\ladda\package.json you get the following webpack output:

// GOOD
/***/ "./node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js":
/*!*******************************************************************************************************!*\
  !*** ./node_modules/expose-loader/dist/cjs.js?exposes=Ladda!./node_modules/ladda/js/ladda-exposed.js ***!
  \*******************************************************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

var ___EXPOSE_LOADER_IMPORT___ = __webpack_require__(/*! -!./ladda.js */ "./node_modules/ladda/js/ladda.js");
var ___EXPOSE_LOADER_GET_GLOBAL_THIS___ = __webpack_require__(/*! ../../expose-loader/dist/runtime/getGlobalThis.js */ "./node_modules/expose-loader/dist/runtime/getGlobalThis.js");
var ___EXPOSE_LOADER_GLOBAL_THIS___ = ___EXPOSE_LOADER_GET_GLOBAL_THIS___;
if (typeof ___EXPOSE_LOADER_GLOBAL_THIS___["Ladda"] === 'undefined') ___EXPOSE_LOADER_GLOBAL_THIS___["Ladda"] = ___EXPOSE_LOADER_IMPORT___;
else throw new Error('[exposes-loader] The "Ladda" value exists in the global scope, it may not be safe to overwrite it, use the "override" option')
module.exports = ___EXPOSE_LOADER_IMPORT___;

Basically, with webpack export-loader:

// with "type": "module" you get this:
var ___EXPOSE_LOADER_IMPORT___ = require("-!./ladda.js");
// without "type": "module" you get this:
var ___EXPOSE_LOADER_IMPORT___ = __webpack_require__(/*! -!./ladda.js */ "./node_modules/ladda/js/ladda.js");

After some heavy debugging in export-loader and webpack, it seems that adding "type": "module" in package.json had the effect of changing the loader module type from javascript/auto (good v2.0.1) to javascript/esm (bad v2.0.3).

The fix to correct ladda from using javascript/esm back to javascript/auto was the following rule:

module: {
      rules: [
         {
            test: /ladda.js$/,
            type: 'javascript/auto'
         },

Hope that helps someone; -- also not sure if the "type": "module" was important or not (or something needs to change for better webpack compatibility).

Hope this helps someone. Feel free to close the issue as you see fit. 👍 😎