fix: add ScenesProvider for i18n initialization

Initialize @grafana/i18n before rendering scenes components.
Workaround for grafana/scenes#1322

Author: VikaCep

src/components/ScenesProvider.tsx

@@ -0,0 +1,25 @@
+import React, { type ReactNode, useEffect, useState } from 'react';
+import { initPluginTranslations } from '@grafana/i18n';
+import { Spinner } from '@grafana/ui';
+import pluginJson from 'plugin.json';
+
+// Initialize i18n (workaround for scenes#1322)
+const i18nPromise = initPluginTranslations(pluginJson.id);
+let i18nReady = false;
+i18nPromise.then(() => {
+  i18nReady = true;
+});
+
+export function ScenesProvider({ children }: { children: ReactNode }) {
+  const [ready, setReady] = useState(i18nReady);
+
+  useEffect(() => {
+    i18nPromise.then(() => setReady(true));
+  }, []);
+
+  if (!ready) {
+    return <Spinner />;
+  }
+
+  return children;
+}

src/routing/InitialisedRouter.tsx

@@ -12,6 +12,7 @@ import { useLimits } from 'hooks/useLimits';
 import { QueryParamMap, useNavigation } from 'hooks/useNavigation';
 import { useURLSearchParams } from 'hooks/useURLSearchParams';
 import { SceneRedirecter } from 'components/SceneRedirecter';
+import { ScenesProvider } from 'components/ScenesProvider';
 import { AlertingPage } from 'page/AlertingPage';
 import { CheckList } from 'page/CheckList';
 import { ChooseCheckGroup } from 'page/ChooseCheckGroup';
@@ -62,7 +63,9 @@ export const InitialisedRouter = () => {
         path={AppRoutes.Home}
         element={
           canReadChecks ? (
-            <SceneHomepage />
+            <ScenesProvider>
+              <SceneHomepage />
+            </ScenesProvider>
           ) : (
             <UnauthorizedPage permissions={['grafana-synthetic-monitoring-app.checks:read']} />
           )
@@ -76,7 +79,9 @@ export const InitialisedRouter = () => {
             index
             element={
               canReadChecks ? (
-                <DashboardPage />
+                <ScenesProvider>
+                  <DashboardPage />
+                </ScenesProvider>
               ) : (
                 <UnauthorizedPage permissions={['grafana-synthetic-monitoring-app.checks:read']} />
               )

webpack.config.ts

@@ -88,6 +88,14 @@ const config = async (env): Promise<Configuration> => {
     // See: https://grafana.com/blog/2025/01/22/react-19-is-coming-to-grafana-what-plugin-developers-need-to-know/
     // Requires Grafana >= 12.3.0
     externals: ['react/jsx-runtime', 'react/jsx-dev-runtime'],
+    // Ensure all @grafana/i18n imports resolve to the same copy
+    // Required for @grafana/scenes to use the i18n instance initialized by initPluginTranslations
+    resolve: {
+      alias: {
+        // workaround to keep scenes from crashing when running in dev mode, can remove when https://github.com/grafana/scenes/issues/1322 is resolved.
+        '@grafana/i18n': path.resolve(__dirname, 'node_modules/@grafana/i18n'),
+      },
+    },
     output: {
       asyncChunks: true,
       publicPath: `public/plugins/${pluginJson.id}/`,

yarn.lock

@@ -1090,7 +1090,7 @@
     micro-memoize "^4.1.2"
     react-i18next "^15.0.0"
 
-"@grafana/i18n@12.3.2":
+"@grafana/i18n@12.3.2", "@grafana/i18n@^12.2.0":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@grafana/i18n/-/i18n-12.3.2.tgz#f4dbb9b5aae2550486e57b94a433729ccb37f728"
   integrity sha512-1H/iVe52ipd4Vj3lFvMpH266tn8QibfTDEaDoNMHgR/TP68233035Z71Tgv1GZai72k3R4gEeSF+03pMAilaOg==