Ensure the correct file-loader version gets used

JBaczuk · Apr 24, 2020 · ec515ee · ec515ee
1 parent b862a6a
commit ec515ee
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/__tests__/loaders/url-loader.test.js b/__tests__/loaders/url-loader.test.js
@@ -1,12 +1,13 @@
 const { getConfig } = require('../../lib/config');
 const { getUrlLoaderOptions } = require('../../lib/loaders/url-loader');
+const { getFileLoaderPath } = require('../../lib/loaders/file-loader');
 
 describe('next-optimized-images/loaders/url-loader', () => {
  it('uses the default config', () => {
  const options = getUrlLoaderOptions(getConfig({}), false);
 
  expect(options.limit).toEqual(8192);
- expect(options.fallback).toEqual('file-loader');
+ expect(options.fallback).toEqual(getFileLoaderPath());
  expect(options.name).toEqual('[name]-[hash].[ext]');
  });
 

diff --git a/lib/loaders/file-loader.js b/lib/loaders/file-loader.js
@@ -1,3 +1,6 @@
+const path = require('path');
+const fs = require('fs');
+
 /**
  * Build options for the webpack file loader
  *
@@ -27,6 +30,21 @@ const getFileLoaderOptions = ({
  };
 };
 
+/**
+ * Get the file-loader path
+ *
+ * @returns {string}
+ */
+const getFileLoaderPath = () => {
+ const absolutePath = path.resolve(__dirname, '..', '..', 'node_modules', 'file-loader', 'dist', 'cjs.js');
+
+ if (fs.existsSync(absolutePath)) {
+ return absolutePath;
+ }
+
+ return 'file-loader';
+};
+
 /**
  * Apply the file loader to the webpack configuration
  *
@@ -42,7 +60,7 @@ const applyFileLoader = (webpackConfig, nextConfig, isServer, fileRegex) => {
  oneOf: [
  {
  use: {
- loader: 'file-loader',
+ loader: getFileLoaderPath(),
  options: getFileLoaderOptions(nextConfig, isServer),
  },
  },
@@ -54,5 +72,6 @@ const applyFileLoader = (webpackConfig, nextConfig, isServer, fileRegex) => {
 
 module.exports = {
  getFileLoaderOptions,
+ getFileLoaderPath,
  applyFileLoader,
 };
diff --git a/lib/loaders/url-loader.js b/lib/loaders/url-loader.js
@@ -1,4 +1,4 @@
-const { getFileLoaderOptions } = require('./file-loader');
+const { getFileLoaderOptions, getFileLoaderPath } = require('./file-loader');
 
 /**
  * Build options for the webpack url loader
@@ -13,7 +13,7 @@ const getUrlLoaderOptions = ({
 }, isServer) => ({
  ...getFileLoaderOptions(config, isServer),
  limit: inlineImageLimit,
- fallback: 'file-loader',
+ fallback: getFileLoaderPath(),
 });
 
 module.exports = {

diff --git a/lib/resource-queries.js b/lib/resource-queries.js
@@ -1,5 +1,5 @@
 const { getUrlLoaderOptions } = require('./loaders/url-loader');
-const { getFileLoaderOptions } = require('./loaders/file-loader');
+const { getFileLoaderOptions, getFileLoaderPath } = require('./loaders/file-loader');
 const { getLqipLoaderOptions } = require('./loaders/lqip-loader');
 const { getResponsiveLoaderOptions } = require('./loaders/responsive-loader');
 const { getImageTraceLoaderOptions } = require('./loaders/image-trace-loader');
@@ -11,7 +11,7 @@ const queries = [
  // ?url: force a file url/reference, never use inlining
  {
  test: 'url',
- loaders: ['file-loader'],
+ loaders: [getFileLoaderPath()],
  optimize: true,
  combinations: ['original'],
  },
@@ -128,6 +128,7 @@ const getResourceQueries = (
  const loaderOptions = {
  'url-loader': getUrlLoaderOptions(nextConfig, isServer),
  'file-loader': getFileLoaderOptions(nextConfig, isServer),
+ [getFileLoaderPath()]: getFileLoaderOptions(nextConfig, isServer),
  'lqip-loader': getLqipLoaderOptions(nextConfig, isServer),
  'responsive-loader': getResponsiveLoaderOptions(nextConfig, isServer, detectLoaders),
  'image-trace-loader': getImageTraceLoaderOptions(nextConfig),