feat: support for CRA v5

Resolve #86
DocSpring · Dec 15, 2021 · 5757a60 · 5757a60
1 parent a4c93b1
commit 5757a60
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 69 deletions.
diff --git a/lib/craco-less.dev.test.js b/lib/craco-less.dev.test.js
@@ -475,36 +475,6 @@ test("the webpack config is modified correctly with the modifyLessModuleRule opt
   );
 });
 
-test("throws an error when we can't find file-loader in the webpack config", () => {
-  let oneOfRule = webpackConfig.module.rules.find((r) => r.oneOf);
-  oneOfRule.oneOf = oneOfRule.oneOf.filter(
-    (r) => !(r.loader && r.loader.includes("file-loader"))
-  );
-
-  const runTest = () => {
-    applyCracoConfigAndOverrideWebpack({
-      plugins: [{ plugin: CracoLessPlugin }],
-    });
-  };
-
-  expect(runTest).toThrowError(
-    "Can't find file-loader in the development webpack config!\n\n" +
-      "This error probably occurred because you updated react-scripts or craco. " +
-      "Please try updating craco-less to the latest version:\n\n" +
-      "   $ yarn upgrade craco-less\n\n" +
-      "Or:\n\n" +
-      "   $ npm update craco-less\n\n" +
-      "If that doesn't work, craco-less needs to be fixed to support the latest version.\n" +
-      "Please check to see if there's already an issue in the DocSpring/craco-less repo:\n\n" +
-      "   * https://github.com/DocSpring/craco-less/issues?q=is%3Aissue+webpack+file-loader\n\n" +
-      "If not, please open an issue and we'll take a look. (Or you can send a PR!)\n\n" +
-      "You might also want to look for related issues in the " +
-      "craco and create-react-app repos:\n\n" +
-      "   * https://github.com/sharegate/craco/issues?q=is%3Aissue+webpack+file-loader\n" +
-      "   * https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack+file-loader\n"
-  );
-});
-
 test("throws an error when we can't find the oneOf rules in the webpack config", () => {
   let oneOfRule = webpackConfig.module.rules.find((r) => r.oneOf);
   oneOfRule.oneOf = null;

diff --git a/lib/craco-less.js b/lib/craco-less.js
@@ -160,15 +160,13 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
     );
   }
 
-  let fileLoaderIndex = oneOfRule.oneOf.findIndex(loaderByName("file-loader"));
-  if (fileLoaderIndex === -1) {
-    throwError(
-      `Can't find file-loader in the ${context.env} webpack config!`,
-      "webpack+file-loader"
-    );
-  }
-
-  oneOfRule.oneOf.splice(fileLoaderIndex, 0, lessRule, lessModuleRule);
+  // https://github.com/facebook/create-react-app/blob/9673858a3715287c40aef9e800c431c7d45c05a2/packages/react-scripts/config/webpack.config.js#L590-L596
+  // insert less loader before resource loader
+  // https://webpack.js.org/guides/asset-modules/
+  const resourceLoaderIndex = oneOfRule.oneOf.findIndex(
+    ({ type }) => type === "asset/resource"
+  );
+  oneOfRule.oneOf.splice(resourceLoaderIndex, 0, lessRule, lessModuleRule);
 
   return webpackConfig;
 };

diff --git a/lib/craco-less.prod.test.js b/lib/craco-less.prod.test.js
@@ -495,36 +495,6 @@ test("the webpack config is modified correctly with the modifyLessModuleRule opt
   );
 });
 
-test("throws an error when we can't find file-loader in the webpack config", () => {
-  let oneOfRule = webpackConfig.module.rules.find((r) => r.oneOf);
-  oneOfRule.oneOf = oneOfRule.oneOf.filter(
-    (r) => !(r.loader && r.loader.includes("file-loader"))
-  );
-
-  const runTest = () => {
-    applyCracoConfigAndOverrideWebpack({
-      plugins: [{ plugin: CracoLessPlugin }],
-    });
-  };
-
-  expect(runTest).toThrowError(
-    "Can't find file-loader in the production webpack config!\n\n" +
-      "This error probably occurred because you updated react-scripts or craco. " +
-      "Please try updating craco-less to the latest version:\n\n" +
-      "   $ yarn upgrade craco-less\n\n" +
-      "Or:\n\n" +
-      "   $ npm update craco-less\n\n" +
-      "If that doesn't work, craco-less needs to be fixed to support the latest version.\n" +
-      "Please check to see if there's already an issue in the DocSpring/craco-less repo:\n\n" +
-      "   * https://github.com/DocSpring/craco-less/issues?q=is%3Aissue+webpack+file-loader\n\n" +
-      "If not, please open an issue and we'll take a look. (Or you can send a PR!)\n\n" +
-      "You might also want to look for related issues in the " +
-      "craco and create-react-app repos:\n\n" +
-      "   * https://github.com/sharegate/craco/issues?q=is%3Aissue+webpack+file-loader\n" +
-      "   * https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack+file-loader\n"
-  );
-});
-
 test("throws an error when we can't find the oneOf rules in the webpack config", () => {
   let oneOfRule = webpackConfig.module.rules.find((r) => r.oneOf);
   oneOfRule.oneOf = null;