Replace override raw-loader with ?raw query (#33854)

* Replace override raw-loader with `?raw` query

For compatibility with vite/st

* Make knip happy

* Fix icon in Jitsi lobby

* Fix jest config for `?raw`

* Remove stale `$webapp` alias

* Ensure css files loaded as `?raw` do not get bundled

apps/web/__mocks__/languages.json

@@ -1,4 +0,0 @@
-{
-    "en": "en_EN.json",
-    "en-us": "en_US.json"
-}

apps/web/jest.config.ts

@@ -31,10 +31,9 @@ const config: Config = {
     moduleNameMapper: {
         // Support CSS module
         "\\.(module.css)$": "identity-obj-proxy",
-        "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
+        "\\.(css|scss|pcss)(\\?raw)?$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",
-        "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json",
         "^matrix-js-sdk(.*)$": "<rootDir>/node_modules/matrix-js-sdk$1",
         "^react$": "<rootDir>/node_modules/react",
         "^react-dom$": "<rootDir>/node_modules/react-dom",
@@ -43,7 +42,7 @@ const config: Config = {
         "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
         "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
         "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
-        "^!!raw-loader!.*": "jest-raw-loader",
+        ".*\\?raw": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "@vector-im/compound-web": "<rootDir>/node_modules/@vector-im/compound-web",
     },

apps/web/package.json

@@ -216,7 +216,6 @@
         "postcss-scss": "4.0.9",
         "postcss-simple-vars": "7.0.1",
         "process": "^0.11.10",
-        "raw-loader": "^4.0.2",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
         "stylelint": "^17.0.0",

apps/web/src/@types/raw.d.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-declare module "!!raw-loader!*" {
+declare module "*?raw" {
     const contents: string;
     export default contents;
 }

apps/web/src/utils/exportUtils/HtmlExport.tsx

@@ -32,8 +32,7 @@ import { textForEvent } from "../../TextForEvent";
 import { haveRendererForEvent } from "../../events/EventTileFactory";
 import { SDKContext, SdkContextClass } from "../../contexts/SDKContext.ts";
 import { DateSeparatorViewModel } from "../../viewmodels/room/timeline/DateSeparatorViewModel";
-
+import exportJS from "./exportJS.js?raw";
-import exportJS from "!!raw-loader!./exportJS";
 
 export default class HTMLExporter extends Exporter {
     protected avatars: Map<string, boolean>;

apps/web/src/utils/exportUtils/exportCSS.ts

@@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import type { CssNode, Rule, StyleSheet } from "css-tree";
-
+import customCSS from "./exportCustomCSS.css?raw";
-import customCSS from "!!raw-loader!./exportCustomCSS.css";
 
 const cssSelectorTextClassesRegex = /\.[\w-]+/g;
 const appLayerName = "app-web";

apps/web/src/vector/jitsi/index.html

@@ -9,7 +9,7 @@
         <div id="joinButtonContainer">
             <div class="joinConferenceFloating">
                 <div class="joinConferencePrompt">
-                    <%= require('!!raw-loader!@vector-im/compound-design-tokens/icons/video-call-solid.svg').default %>
+                    <%= require('@vector-im/compound-design-tokens/icons/video-call-solid.svg?raw') %>
                     <!-- TODO: i18n -->
                     <h2>Jitsi Video Conference</h2>
                     <div id="widgetActionContainer">

apps/web/webpack.config.ts

@@ -254,9 +254,6 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 "matrix-widget-api": getPackageRoot("matrix-widget-api"),
                 "oidc-client-ts": getPackageRoot("oidc-client-ts"),
 
-                // Define a variable so the i18n stuff can load
-                "$webapp": path.resolve(__dirname, "webapp"),
-
                 // Make shared-components imports resolve to EW deps
                 "@vector-im/compound-web": getPackageRoot("@vector-im/compound-web", ""),
             },
@@ -300,6 +297,12 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 /highlight\.js[\\/]lib[\\/]languages/,
             ],
             rules: [
+                {
+                    // Match imports containing the ?raw query string
+                    resourceQuery: /raw/,
+                    // Instruct Webpack to emit the file source as a string
+                    type: "asset/source",
+                },
                 {
                     test: /\.js$/,
                     enforce: "pre" as const,
@@ -337,6 +340,7 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 },
                 {
                     test: /\.css$/,
+                    resourceQuery: { not: [/raw/] },
                     use: [
                         MiniCssExtractPlugin.loader,
                         {

pnpm-lock.yaml

@@ -1027,9 +1027,6 @@ importers:
       process:
         specifier: ^0.11.10
         version: 0.11.10
-      raw-loader:
-        specifier: ^4.0.2
-        version: 4.0.2(webpack@5.107.2)
       semver:
         specifier: ^7.5.2
         version: 7.8.4
@@ -12033,12 +12030,6 @@ packages:
     resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
     engines: {node: '>= 0.10'}
 
-  raw-loader@4.0.2:
-    resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      webpack: ^4.0.0 || ^5.0.0
-
   re-resizable@6.11.2:
     resolution: {integrity: sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A==}
     peerDependencies:
@@ -26148,12 +26139,6 @@ snapshots:
       iconv-lite: 0.7.2
       unpipe: 1.0.0
 
-  raw-loader@4.0.2(webpack@5.107.2):
-    dependencies:
-      loader-utils: 2.0.4
-      schema-utils: 3.3.0
-      webpack: 5.107.2(esbuild@0.27.4)(lightningcss@1.32.0)(postcss@8.5.15)(webpack-cli@7.0.3)
-
   re-resizable@6.11.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       react: 19.2.7