From 77fe415c17a0fe43013247f3af4d7fc38d7faa97 Mon Sep 17 00:00:00 2001 From: David Joy Date: Thu, 8 Jun 2023 16:40:21 -0400 Subject: [PATCH] fix: use .css extension on react-loading-skeleton import MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit react-loading-skeleton defines an exports field in its package.json which looks like this: "exports": { ".": { "types": "./dist/index.d.ts", "require": "./dist/index.cjs", "import": "./dist/index.js" }, "./dist/skeleton.css": "./dist/skeleton.css" }, The webpack documentation states that if an exports field is defined in package.json, it replaces the default module loading behavior and any other request for a module will result in a ModuleNotFound error. Our call to load react-loading-skeleton in Paragon looks like this: @import "~react-loading-skeleton/dist/skeleton"; That isn’t in the list of possible exports. This is though: @import "~react-loading-skeleton/dist/skeleton.css"; This commit updates our import to the latter, which fixes downstream issues in MFEs that can’t figure out how to import react-loading-skeleton --- scss/core/core.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/scss/core/core.scss b/scss/core/core.scss index d6a2b072f7..e9196e6fc8 100644 --- a/scss/core/core.scss +++ b/scss/core/core.scss @@ -5,7 +5,12 @@ @import "~bootstrap/scss/reboot"; @import "typography"; @import "grid"; -@import "~react-loading-skeleton/dist/skeleton"; +// The react-loading-skeleton package.json defines an 'exports' field which specifies a '.css' +// extension on this export. Without the '.css' on the end of this line, webpack can't find the file +// and the build fails. +// See https://webpack.js.org/guides/package-exports/ for more information on how webpack uses +// the 'exports' field. +@import "~react-loading-skeleton/dist/skeleton.css"; @import "~bootstrap/scss/transitions"; @import "utilities"; @import "~bootstrap/scss/media";