diff --git a/lib/craco-less.dev.test.js b/lib/craco-less.dev.test.js index 25fb4ed..3bcfdfe 100644 --- 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 index 1515864..6257197 100644 --- 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 index 6ccebbf..8e3bd6c 100644 --- 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;