package.json "type": "module" uses javascript/esm vs javascript/auto
bchavez opened this issue · comments
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:
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. 👍 😎