package updates

next.config.js

@@ -6,20 +6,37 @@ const next = (phase, { defaultConfig }) => {
    */
   const nextConfig = {
     webpack: (config, options) => {
+      // Grab the existing rule that handles SVG imports
+      const fileLoaderRule = config.module.rules.find((rule) =>
+        rule.test?.test?.('.svg')
+      )
+
       config.module.rules.push(
+        // Reapply the existing rule, but only for svg imports ending in ?url
         {
-          test: /\.svg$/,
-          issuer: /\.(tsx|ts)$/,
-          use: [{ loader: '@svgr/webpack', options: { icon: true } }]
+          ...fileLoaderRule,
+          test: /\.svg$/i,
+          resourceQuery: /url/ // *.svg?url
         },
+        // Convert all other *.svg imports to React components
         {
-          test: /\.gif$/,
-          // yay for webpack 5
-          // https://webpack.js.org/guides/asset-management/#loading-images
-          type: 'asset/resource'
+          test: /\.svg$/i,
+          issuer: /\.[jt]sx?$/,
+          resourceQuery: { not: /url/ }, // exclude if *.svg?url
+          use: [{ loader: '@svgr/webpack', options: { icon: true } }]
         }
       )
 
+      // Modify the file loader rule to ignore *.svg, since we have it handled now.
+      fileLoaderRule.exclude = /\.svg$/i
+
+      config.module.rules.push({
+        test: /\.gif$/,
+        // yay for webpack 5
+        // https://webpack.js.org/guides/asset-management/#loading-images
+        type: 'asset/resource'
+      })
+
       return typeof defaultConfig.webpack === 'function'
         ? defaultConfig.webpack(config, options)
         : config

package.json

@@ -24,12 +24,12 @@
     "favicon": "ts-node-esm ./scripts/favicon.ts"
   },
   "dependencies": {
-    "@giphy/js-fetch-api": "^5.0.0",
+    "@giphy/js-fetch-api": "^5.1.0",
     "@radix-ui/react-select": "^1.2.2",
-    "@yaireo/relative-time": "^1.0.3",
+    "@yaireo/relative-time": "^1.0.4",
     "file-saver": "^2.0.5",
-    "framer-motion": "^10.12.18",
-    "lucide-react": "^0.259.0",
+    "framer-motion": "^10.15.2",
+    "lucide-react": "^0.268.0",
     "next": "13.4.7",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
@@ -40,27 +40,27 @@
     "vcf": "^2.1.1"
   },
   "devDependencies": {
-    "@svgr/webpack": "^8.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/jest": "^29.5.2",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@types/jest": "^29.5.3",
     "@types/js-yaml": "^4.0.5",
-    "chalk": "^5.2.0",
-    "eslint": "^8.43.0",
-    "eslint-config-next": "^13.4.7",
-    "jest": "^29.6.1",
+    "chalk": "^5.3.0",
+    "eslint": "^8.47.0",
+    "eslint-config-next": "^13.4.16",
+    "jest": "^29.6.2",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.2",
     "js-yaml": "^4.1.0",
-    "ora": "^6.3.1",
+    "ora": "^7.0.1",
     "prepend": "^1.0.2",
-    "prettier": "^2.8.8",
-    "sharp": "^0.32.1",
+    "prettier": "^3.0.1",
+    "sharp": "^0.32.4",
     "sharp-ico": "^0.1.5",
     "slugify": "^1.6.6",
-    "stylelint": "^15.10.1",
-    "stylelint-prettier": "^3.0.0",
+    "stylelint": "^15.10.2",
+    "stylelint-prettier": "^4.0.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6"
   },

tests/jest.setup.tsx

@@ -1,5 +1,5 @@
 import { jest } from '@jest/globals'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import 'jest-canvas-mock'
 import giphy from './__fixtures__/giphy.json'
 import { dataLocation } from './__fixtures__/location'