fix can't access property "jsonDefaults" (#4050)

* try

* try

* test

* test

* try monaco-editor/esm/vs/language/json/monaco.contribution.js

* fix build

* upd

* upd

Author: dimaMachina

.changeset/yellow-pumas-itch.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+fix can't access property "jsonDefaults"

packages/graphiql-react/src/components/provider.tsx

@@ -27,9 +27,11 @@ import {
 import {
   DEFAULT_PRETTIFY_QUERY,
   DEFAULT_QUERY,
+  JSON_DIAGNOSTIC_OPTIONS,
   STORAGE_KEY,
 } from '../constants';
 import { getDefaultTabState } from '../utility/tabs';
+import { languages } from '../monaco-editor';
 
 interface InnerGraphiQLProviderProps
   extends EditorProps,
@@ -328,6 +330,16 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    /**
+     * Set diagnostics options for JSON
+     *
+     * Setting it on mount fix Uncaught TypeError: Cannot read properties of undefined (reading 'jsonDefaults')
+     * @see https://github.com/graphql/graphiql/pull/4042#issuecomment-3017167375
+     */
+    languages.json.jsonDefaults.setDiagnosticsOptions(JSON_DIAGNOSTIC_OPTIONS);
+  }, []);
+
   return (
     <GraphiQLContext.Provider value={storeRef}>
       {children}

packages/graphiql-react/src/constants.ts

@@ -126,16 +126,13 @@ export const URI_NAME = {
 } as const;
 
 // set these early on so that initial variables with comments don't flash an error
-const JSON_DIAGNOSTIC_OPTIONS: languages.json.DiagnosticsOptions = {
+export const JSON_DIAGNOSTIC_OPTIONS: languages.json.DiagnosticsOptions = {
   // Fixes Comments are not permitted in JSON.(521)
   allowComments: true,
   // Fixes Trailing comma json(519)
   trailingCommas: 'ignore',
 };
 
-// Set diagnostics options for JSON
-languages.json.jsonDefaults.setDiagnosticsOptions(JSON_DIAGNOSTIC_OPTIONS);
-
 export const MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS: DiagnosticSettings = {
   validateVariablesJSON: {},
   jsonDiagnosticSettings: {

packages/graphiql-react/src/monaco-editor.ts

@@ -25,15 +25,16 @@ import { MouseTargetFactory } from 'monaco-editor/esm/vs/editor/browser/controll
 if (navigator.userAgent.includes('Firefox/')) {
   const originalFn = MouseTargetFactory._doHitTestWithCaretPositionFromPoint;
 
-  // @ts-expect-error -- internal override of Monaco method
-  MouseTargetFactory._doHitTestWithCaretPositionFromPoint = (...args) => {
+  MouseTargetFactory._doHitTestWithCaretPositionFromPoint = (
+    ...args: any[]
+  ) => {
     const [ctx, coords] = args;
     const hitResult = ctx.viewDomNode.ownerDocument.caretPositionFromPoint(
       coords.clientX,
       coords.clientY,
     );
     if (hitResult) {
-      // Delegate to original function if hitResult is valid
+      // Delegate to the original function if hitResult is valid
       const result = originalFn(...args);
       return result;
     }