@docusaurus/lqip-loader 4.0.0-canary-6928 → 4.0.0-canary-6930

package/README.md

@@ -16,31 +16,22 @@ Generating Base64 for a jpeg image imported in your JS bundle:
 
 ### `webpack.config.js`
 
+The LQIP loader must be chained after a loader exporting the image URL as a JS module, such as [`@docusaurus/responsive-loader`](https://github.com/slorber/responsive-loader):
+
 ```js
 {
-  // OPTION A: default file-loader fallback
-  test: /\.jpe?g$/,
-  loaders: [
-    {
-      loader: '@docusaurus/lqip-loader',
-      options: {
-        path: '/media', // your image going to be in media folder in the output dir
-        name: '[name].[ext]', // you can use [contenthash].[ext] too if you wish,
-      }
-    }
-  ]
-
-  // OPTION B: Chained with your own url-loader or file-loader
   test: /\.(png|jpe?g)$/,
-  loaders: [
+  // Loaders produce a JS module, not an asset
+  type: 'javascript/auto',
+  use: [
     '@docusaurus/lqip-loader',
     {
-      loader: 'url-loader',
+      loader: '@docusaurus/responsive-loader',
       options: {
-        limit: 8000
-      }
-    }
-  ]
+        adapter: require('@docusaurus/responsive-loader/sharp'),
+      },
+    },
+  ],
 }
 ```
 

package/lib/index.js

@@ -13,7 +13,7 @@ async function lqipLoader(contentBuffer) {
     this.cacheable();
     const callback = this.async();
     const imgPath = this.resourcePath;
-    let content = contentBuffer.toString('utf8');
+    const content = contentBuffer.toString('utf8');
     const contentIsUrlExport = /^(?:export default|module.exports =) "data:.*base64,.*/.test(content);
     const contentIsFileExport = /^(?:export default|module.exports =) .*/.test(content);
     let source;
@@ -22,10 +22,8 @@ async function lqipLoader(contentBuffer) {
     }
     else {
         if (!contentIsFileExport) {
-            // eslint-disable-next-line @typescript-eslint/no-require-imports
-            const fileLoader = require('file-loader');
-            // @ts-expect-error: type is a bit unwieldy...
-            content = fileLoader.call(this, contentBuffer);
+            callback(new Error(`The LQIP loader must be chained after a loader exporting the image URL, such as @docusaurus/responsive-loader. Image path: ${imgPath}`));
+            return;
         }
         source = content.match(/^(?:export default|module.exports =) (?<source>.*);/).groups.source;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/lqip-loader",
-  "version": "4.0.0-canary-6928",
+  "version": "4.0.0-canary-6930",
   "description": "Low Quality Image Placeholders (LQIP) loader for webpack.",
   "main": "lib/index.js",
   "publishConfig": {
@@ -13,8 +13,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/logger": "4.0.0-canary-6928",
-    "file-loader": "^6.2.0",
+    "@docusaurus/logger": "4.0.0-canary-6930",
     "sharp": "^0.35.1",
     "tslib": "^2.8.1"
   },
@@ -22,7 +21,6 @@
     "node": ">=24.21"
   },
   "devDependencies": {
-    "@types/file-loader": "^5.0.4",
     "webpack": "^5.111.0"
   },
   "scripts": {