search

liamfiddler / eleventy-plugin-lazyimages

Eleventy plugin that adds blurry placeholders & lazy loading to your images
MIT License
139 stars 29 forks source link

Error when requiring plugin. #53

Closed artulloss closed 2 years ago

artulloss commented 2 years ago

Requiring the plugin following the instructions in readme causes eleventy crash.

I have this problem on both my local environment and two codespaces - one I setup to specifically test this problem.

How to reproduce

Install plugin Add to .eleventy.js const lazyImagesPlugin = require('eleventy-plugin-lazyimages'); Error in console, eleventy crashes on launch

Console output

Eleventy fatal error: (more in DEBUG output)
> Error in your Eleventy config file '/workspaces/Lazyload-plugin-bug/.eleventy.js'.

`EleventyConfigError` was thrown
> Must use import to load ES Module: /workspaces/Lazyload-plugin-bug/node_modules/node-fetch/src/index.js
require() of ES modules is not supported.
require() of /workspaces/Lazyload-plugin-bug/node_modules/node-fetch/src/index.js from /workspaces/Lazyload-plugin-bug/node_modules/eleventy-plugin-lazyimages/.eleventy.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /workspaces/Lazyload-plugin-bug/node_modules/node-fetch/package.json.

`Error` was thrown:
    Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /workspaces/Lazyload-plugin-bug/node_modules/node-fetch/src/index.js
    require() of ES modules is not supported.
    require() of /workspaces/Lazyload-plugin-bug/node_modules/node-fetch/src/index.js from /workspaces/Lazyload-plugin-bug/node_modules/eleventy-plugin-lazyimages/.eleventy.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
    Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /workspaces/Lazyload-plugin-bug/node_modules/node-fetch/package.json.

        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
        at Module.load (internal/modules/cjs/loader.js:937:32)
        at Function.Module._load (internal/modules/cjs/loader.js:778:12)
        at Module.require (internal/modules/cjs/loader.js:961:19)
        at require (internal/modules/cjs/helpers.js:92:18)
        at Object.<anonymous> (/workspaces/Lazyload-plugin-bug/node_modules/eleventy-plugin-lazyimages/.eleventy.js:6:15)
        at Module._compile (internal/modules/cjs/loader.js:1072:14)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
        at Module.load (internal/modules/cjs/loader.js:937:32)
        at Function.Module._load (internal/modules/cjs/loader.js:778:12)
liamfiddler commented 2 years ago

Thanks for bringing this to my attention.

Looks like newer versions of node-fetch no longer support require syntax, and when we merged this PR to update Sharp, node-fetch was updated to the incompatible version too.

We've resolved this by switching to another dependency that continues to support require syntax.

Please try again with eleventy-plugin-lazyimages v2.1.2 and let me know if this resolves your issue.

artulloss commented 2 years ago

Looks like this change fixed it, many thanks for this awesome plugin!