Skip to content

React compiler #278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
burtonjong wants to merge 7 commits into
base: main
Choose a base branch
from
Open

React compiler #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
06a2734
feat: add react compiler cleanup packages
burtonjong Jan 31, 2026
a07c73f
fix: fix no data in fetch
burtonjong Jan 31, 2026
4134017
fix: add rimraf back as dep
burtonjong Jan 31, 2026
bdcfcfe
fix deps
burtonjong Feb 7, 2026
57edebd
fix all linting errors
burtonjong Feb 7, 2026
4ec0848
Merge branch 'main' into react-compiler
burtonjong Feb 7, 2026
714af64
last fix
burtonjong Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .eslintignore
View file
Open in desktop

This file was deleted.

40 changes: 0 additions & 40 deletions .eslintrc.cjs
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion .prettierrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const config = {
// require.resolve("@trivago/prettier-plugin-sort-imports"),
require.resolve("prettier-plugin-tailwindcss"),
],
tailwindConfig: "./packages/client/tailwind.config.ts",
tailwindConfig: "tailwind.config.ts",
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
echo "=== Searching for tailwind.config.ts ==="
fd -t f 'tailwind\.config\.ts'
echo ""
echo "=== Checking file structure around packages/client ==="
ls -la packages/client/ 2>/dev/null | grep -i tailwind || echo "No tailwind files in packages/client/"
echo ""
echo "=== Checking repo root ==="
ls -la tailwind.config.ts 2>/dev/null || echo "No tailwind.config.ts at repo root"

Repository: UCSolarCarTeam/Helios-Telemetry

Length of output: 337

Fix the tailwindConfig path — it points to a non-existent file.

The config file is at packages/client/tailwind.config.ts, not the repo root. The current path "tailwind.config.ts" will cause Prettier's Tailwind plugin to silently fail to resolve the config, disabling class sorting. Revert to "./packages/client/tailwind.config.ts".

🤖 Prompt for AI Agents 
In @.prettierrc.cjs at line 15, Update the tailwindConfig path in
.prettierrc.cjs: change the tailwindConfig value (currently
"tailwind.config.ts") to point to the actual config at
./packages/client/tailwind.config.ts so Prettier's Tailwind plugin can resolve
the file and re-enable class sorting; locate the tailwindConfig property in the
existing .prettierrc.cjs and replace the string with the correct relative path.

};

module.exports = config;
13 changes: 11 additions & 2 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,14 @@
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"typescript.preferences.importModuleSpecifier": "non-relative",
"javascript.preferences.importModuleSpecifier": "non-relative"
}
"javascript.preferences.importModuleSpecifier": "non-relative",
"eslint.enable": true,
"eslint.useFlatConfig": true,
"eslint.workingDirectories": [{ "mode": "auto" }],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}
115 changes: 115 additions & 0 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import path from "path";
import { fileURLToPath } from "url";

import prettierPlugin from "eslint-plugin-prettier";
import promisePlugin from "eslint-plugin-promise";
import reactPlugin from "eslint-plugin-react";
import nextPlugin from "@next/eslint-plugin-next";
import reactHooks from "eslint-plugin-react-hooks";
import tseslint from "typescript-eslint";
import sortKeys from "eslint-plugin-sort-keys";
import sortDestructureKeys from "eslint-plugin-sort-destructure-keys";

import prettierConfig from "./.prettierrc.cjs";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default [
// ========================
// Global ignores
// ========================
{
ignores: [
"**/node_modules/**",
"packages/db/src/entities/*.ts",
"packages/client/tailwind.config.ts",
"**/.next/**",
"**/dist/**",
"**/build/**",
"**/.turbo/**",
],
},

...tseslint.configs.recommendedTypeChecked.map((config) => ({
...config,
files: ["**/*.ts", "**/*.tsx"], // We use TS config only for TS files
})),

// ========================
// Base TypeScript rules (ALL packages)
// ========================
{
files: ["**/*.ts", "**/*.tsx"],
languageOptions: {
parserOptions: {
projectService: true,
tsconfigRootDir: __dirname,
},
},
plugins: {
"@typescript-eslint": tseslint.plugin,
prettier: prettierPlugin,
promise: promisePlugin,
"sort-keys": sortKeys,
"sort-destructure-keys": sortDestructureKeys,
},
rules: {
"@typescript-eslint/no-unused-vars": [
"warn",
{ argsIgnorePattern: "^_" },
],

eqeqeq: ["error", "smart"],
"no-console": "error",
"no-eval": "error",
"no-var": "error",

"prettier/prettier": ["error", prettierConfig],

"sort-destructure-keys/sort-destructure-keys": "error",
"sort-keys": "error",
"sort-keys/sort-keys-fix": "error",
Comment on lines +71 to +72
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Duplicate sort-keys enforcement — built-in rule + plugin rule both active.

Line 71 enables ESLint's built-in sort-keys rule (report-only, not auto-fixable), and Line 72 enables the plugin's sort-keys/sort-keys-fix (auto-fixable). Both will flag the same unsorted keys, producing duplicate diagnostics. Drop the built-in rule and keep only the fixable plugin version.

Proposed fix 
       "sort-destructure-keys/sort-destructure-keys": "error",
-      "sort-keys": "error",
       "sort-keys/sort-keys-fix": "error",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"sort-keys": "error",
"sort-keys/sort-keys-fix": "error",
"sort-destructure-keys/sort-destructure-keys": "error",
"sort-keys/sort-keys-fix": "error",
🤖 Prompt for AI Agents 
In `@eslint.config.mjs` around lines 71 - 72, The config currently enables both
ESLint's built-in rule "sort-keys" and the plugin rule
"sort-keys/sort-keys-fix", causing duplicate diagnostics; remove the built-in
rule entry "sort-keys": "error" and keep only "sort-keys/sort-keys-fix": "error"
in the rules object (ensure the plugin providing sort-keys-fix is present in the
plugins list/installed). This ensures only the auto-fixable plugin rule runs.

},
},

// ========================
// CLIENT (Next.js + React)
// ========================
{
files: ["packages/client/**/*.{ts,tsx}"],
plugins: {
react: reactPlugin,
"@next/next": nextPlugin,
"react-hooks": reactHooks,
},
settings: {
react: {
version: "detect",
},
next: {
rootDir: "packages/client",
},
},
rules: {
...reactPlugin.configs.recommended.rules,
...nextPlugin.configs["core-web-vitals"].rules,

"react/jsx-sort-props": "error",
"react/sort-comp": "off",
"react/react-in-jsx-scope": "off",
"@next/next/no-html-link-for-pages": ["error", "packages/client/src"],
},
},
Comment on lines 79 to 103
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

React Hooks rules are not enforced — plugin is registered but no rules are enabled.

The react-hooks plugin is added on Line 84, but its recommended rules (rules-of-hooks and exhaustive-deps) are never spread or individually listed. Without them, hooks usage won't be linted at all.

Proposed fix 
     rules: {
       ...reactPlugin.configs.recommended.rules,
       ...nextPlugin.configs["core-web-vitals"].rules,
+      ...reactHooks.configs.recommended.rules,
 
       "react/jsx-sort-props": "error",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{
files: ["packages/client/**/*.{ts,tsx}"],
plugins: {
react: reactPlugin,
"@next/next": nextPlugin,
"react-hooks": reactHooks,
},
settings: {
react: {
version: "detect",
},
next: {
rootDir: "packages/client",
},
},
rules: {
...reactPlugin.configs.recommended.rules,
...nextPlugin.configs["core-web-vitals"].rules,
"react/jsx-sort-props": "error",
"react/sort-comp": "off",
"react/react-in-jsx-scope": "off",
"@next/next/no-html-link-for-pages": ["error", "packages/client/src/pages"],
},
},
{
files: ["packages/client/**/*.{ts,tsx}"],
plugins: {
react: reactPlugin,
"@next/next": nextPlugin,
"react-hooks": reactHooks,
},
settings: {
react: {
version: "detect",
},
next: {
rootDir: "packages/client",
},
},
rules: {
...reactPlugin.configs.recommended.rules,
...nextPlugin.configs["core-web-vitals"].rules,
...reactHooks.configs.recommended.rules,
"react/jsx-sort-props": "error",
"react/sort-comp": "off",
"react/react-in-jsx-scope": "off",
"@next/next/no-html-link-for-pages": ["error", "packages/client/src/pages"],
},
},
🤖 Prompt for AI Agents 
In `@eslint.config.mjs` around lines 79 - 103, The react-hooks plugin is
registered but its rules aren't enabled; update the rules block for the files
entry that registers reactHooks (the object containing plugins: { ...,
"react-hooks": reactHooks }) to either spread
reactHooks.configs.recommended.rules into rules or explicitly add
"react-hooks/rules-of-hooks": "error" and "react-hooks/exhaustive-deps": "warn"
so the Hook lints are enforced for the rules-of-hooks and exhaustive-deps
checks.


// ========================
// SERVER (Node only)
// ========================
{
files: ["packages/server/**/*.ts"],
rules: {
// Server-specific overrides go here
// (currently same as base except no React rules)
},
},
];
25 changes: 10 additions & 15 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,26 @@
"schema:sync": "lerna run schema:sync --scope=db",
"schema:drop": "lerna run schema:drop --scope=db"
},
"dependencies": {
"@mantine/dates": "^8.0.1",
"@mantine/notifications": "^7.17.3",
"esbuild": "^0.23.0",
"uuid": "^11.0.5"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@next/eslint-plugin-next": "^16.1.6",
"@types/eslint": "^9.6.0",
"@typescript-eslint/eslint-plugin": "^7.4.0",
"@typescript-eslint/parser": "^7.4.0",
"clsx": "^2.1.1",
"eslint": "8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-turbo": "latest",
"eslint": "9.0.0",
Comment on lines +33 to +36
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

@eslint/js version 10 compatibility with eslint version 9

💡 Result:

@eslint/js v10 is not intended to be used with ESLint v9.

  • @eslint/js@10.0.1 declares a (optional) peer dependency on eslint: ^10.0.0—so with ESLint 9 you’ll get a peer-deps mismatch (and you’re outside supported compatibility). [1]
  • If you’re on ESLint v9, use @eslint/js@9.x instead; upgrade to ESLint v10 only if you can meet its requirements (notably Node >= 20.19.0). [2]

Sources: [1] [2]

Fix version mismatch: @eslint/js@10.0.1 requires eslint@^10.0.0, not 9.0.0.

@eslint/js@10.0.1 declares a peer dependency on eslint@^10.0.0, creating an incompatibility with the pinned eslint: "9.0.0". This configuration is outside the supported compatibility range and will result in a peer dependency mismatch.

Resolve by either:

  • Upgrade eslint to ^10.0.0 (requires Node >= 20.19.0), or
  • Downgrade @eslint/js to ^9.0.0 to align with ESLint v9
🤖 Prompt for AI Agents 
In `@package.json` around lines 33 - 36, The package.json has a peer dependency
mismatch: "@eslint/js@10.0.1" requires "eslint@^10.0.0" but the project pins
"eslint" to "9.0.0"; fix by either upgrading "eslint" to a ^10.x version (ensure
Node >= 20.19.0) and run tests/CI to validate, or downgrade "@eslint/js" to a
9.x compatible version (e.g., ^9.0.0) so it aligns with "eslint" 9.x; update the
dependency entry for the chosen package ("eslint" or "@eslint/js") in
package.json and run install to verify no peer dependency warnings remain.

"eslint-config-prettier": "^10.1.8",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-promise": "^6.4.0",
"eslint-plugin-prettier": "^5.5.5",
"eslint-plugin-promise": "^7.2.1",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-sort-destructure-keys": "^2.0.0",
"eslint-plugin-sort-keys": "^2.3.5",
"husky": "^8.0.3",
"lerna": "^8.1.9",
"lint-staged": "^13.2.2",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6",
"typescript": "^5.5.4"
"typescript": "^5.5.4",
"typescript-eslint": "^8.54.0"
},
"workspaces": [
"packages/*"
Expand Down
8 changes: 0 additions & 8 deletions packages/amplify/.eslintrc.cjs
View file
Open in desktop

This file was deleted.

5 changes: 1 addition & 4 deletions packages/amplify/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
{
"extends": "../../tsconfig.json",
"include": [
"amplify",
".eslintrc.cjs"
],
"include": ["amplify"]
}
2 changes: 0 additions & 2 deletions packages/client/.eslintignore
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions packages/client/.eslintrc.cjs
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions packages/client/next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
const nextConfig = {
reactStrictMode: true,
transpilePackages: ["@shared/heliostypes"],
reactCompiler: true,
};

export default nextConfig;
22 changes: 7 additions & 15 deletions packages/client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"dev": "npx next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "eslint ."
},
"dependencies": {
"@emotion/react": "^11.11.3",
Expand All @@ -29,13 +29,13 @@
"framer-motion": "^11.0.6",
"lodash": "^4.17.21",
"mapbox-gl": "^3.5.1",
"next": "15.1.4",
"next": "16.1.6",
"next-themes": "^0.4.6",
"plotly.js-dist-min": "^2.35.3",
"rc-slider": "^11.1.8",
"react": "19.0.0",
"react": "19.2.4",
"react-chartjs-2": "^5.3.0",
"react-dom": "19.0.0",
"react-dom": "19.2.4",
"react-icons": "^5.0.1",
"react-indiana-drag-scroll": "^2.2.0",
"react-map-gl": "^7.1.7",
Expand All @@ -45,25 +45,17 @@
},
"devDependencies": {
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@types/eslint": "^8.56.10",
"@types/google.maps": "^3.55.11",
"@types/lodash": "^4",
"@types/node": "^20.14.10",
"@types/plotly.js": "^3.0.0",
"@types/plotly.js-dist-min": "^2",
"@types/prettier": "^3.0.0",
"@types/react": "19.0.7",
"@types/react-dom": "19.0.3",
"@types/react": "19.2.10",
"@types/react-dom": "19.2.3",
"@types/react-plotly.js": "^2.6.3",
"@typescript-eslint/eslint-plugin": "^7.16.0",
"@typescript-eslint/parser": "^7.16.0",
"autoprefixer": "^10.4.19",
"eslint": "8.57.0",
"eslint-config-next": "15.1.4",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-promise": "^6.4.0",
"eslint-plugin-tailwindcss": "^3.17.4",
"babel-plugin-react-compiler": "^1.0.0",
"gltf-pipeline": "^4.1.0",
"postcss": "^8.5.3",
"postcss-preset-mantine": "^1.17.0",
Expand Down
4 changes: 2 additions & 2 deletions packages/client/src/components/atoms/PauseIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ const PauseIcon = (props: SvgProps) => {
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
clipRule="evenodd"
d="M5.948 1.25H6.052C6.95048 1.24997 7.6997 1.24995 8.29448 1.32991C8.92228 1.41432 9.48908 1.59999 9.94455 2.05546C10.4 2.51093 10.5857 3.07773 10.6701 3.70552C10.7501 4.30031 10.75 5.04953 10.75 5.94801V18.052C10.75 18.9505 10.7501 19.6997 10.6701 20.2945C10.5857 20.9223 10.4 21.4891 9.94455 21.9445C9.48908 22.4 8.92228 22.5857 8.29448 22.6701C7.6997 22.7501 6.95048 22.75 6.052 22.75H5.94801C5.04953 22.75 4.30031 22.7501 3.70552 22.6701C3.07773 22.5857 2.51093 22.4 2.05546 21.9445C1.59999 21.4891 1.41432 20.9223 1.32991 20.2945C1.24995 19.6997 1.24997 18.9505 1.25 18.052V5.948C1.24997 5.04952 1.24995 4.3003 1.32991 3.70552C1.41432 3.07773 1.59999 2.51093 2.05546 2.05546C2.51093 1.59999 3.07773 1.41432 3.70552 1.32991C4.3003 1.24995 5.04952 1.24997 5.948 1.25ZM3.90539 2.81654C3.44393 2.87858 3.24644 2.9858 3.11612 3.11612C2.9858 3.24644 2.87858 3.44393 2.81654 3.90539C2.7516 4.38843 2.75 5.03599 2.75 6V18C2.75 18.964 2.7516 19.6116 2.81654 20.0946C2.87858 20.5561 2.9858 20.7536 3.11612 20.8839C3.24644 21.0142 3.44393 21.1214 3.90539 21.1835C4.38843 21.2484 5.03599 21.25 6 21.25C6.96401 21.25 7.61157 21.2484 8.09461 21.1835C8.55607 21.1214 8.75357 21.0142 8.88389 20.8839C9.0142 20.7536 9.12143 20.5561 9.18347 20.0946C9.24841 19.6116 9.25 18.964 9.25 18V6C9.25 5.03599 9.24841 4.38843 9.18347 3.90539C9.12143 3.44393 9.0142 3.24644 8.88389 3.11612C8.75357 2.9858 8.55607 2.87858 8.09461 2.81654C7.61157 2.7516 6.96401 2.75 6 2.75C5.03599 2.75 4.38843 2.7516 3.90539 2.81654ZM17.948 1.25H18.052C18.9505 1.24997 19.6997 1.24995 20.2945 1.32991C20.9223 1.41432 21.4891 1.59999 21.9445 2.05546C22.4 2.51093 22.5857 3.07773 22.6701 3.70552C22.7501 4.30031 22.75 5.04953 22.75 5.94801V18.052C22.75 18.9505 22.7501 19.6997 22.6701 20.2945C22.5857 20.9223 22.4 21.4891 21.9445 21.9445C21.4891 22.4 20.9223 22.5857 20.2945 22.6701C19.6997 22.7501 18.9505 22.75 18.052 22.75H17.948C17.0495 22.75 16.3003 22.7501 15.7055 22.6701C15.0777 22.5857 14.5109 22.4 14.0555 21.9445C13.6 21.4891 13.4143 20.9223 13.3299 20.2945C13.2499 19.6997 13.25 18.9505 13.25 18.052V5.94801C13.25 5.04953 13.2499 4.30031 13.3299 3.70552C13.4143 3.07773 13.6 2.51093 14.0555 2.05546C14.5109 1.59999 15.0777 1.41432 15.7055 1.32991C16.3003 1.24995 17.0495 1.24997 17.948 1.25ZM15.9054 2.81654C15.4439 2.87858 15.2464 2.9858 15.1161 3.11612C14.9858 3.24644 14.8786 3.44393 14.8165 3.90539C14.7516 4.38843 14.75 5.03599 14.75 6V18C14.75 18.964 14.7516 19.6116 14.8165 20.0946C14.8786 20.5561 14.9858 20.7536 15.1161 20.8839C15.2464 21.0142 15.4439 21.1214 15.9054 21.1835C16.3884 21.2484 17.036 21.25 18 21.25C18.964 21.25 19.6116 21.2484 20.0946 21.1835C20.5561 21.1214 20.7536 21.0142 20.8839 20.8839C21.0142 20.7536 21.1214 20.5561 21.1835 20.0946C21.2484 19.6116 21.25 18.964 21.25 18V6C21.25 5.03599 21.2484 4.38843 21.1835 3.90539C21.1214 3.44393 21.0142 3.24644 20.8839 3.11612C20.7536 2.9858 20.5561 2.87858 20.0946 2.81654C19.6116 2.7516 18.964 2.75 18 2.75C17.036 2.75 16.3884 2.7516 15.9054 2.81654Z"
fill={color}
fill-rule="evenodd"
fillRule="evenodd"
/>
</svg>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/components/atoms/PlayIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const PlayIcon = (props: SvgProps) => {
<path
d="M20.4086 9.35258C22.5305 10.5065 22.5305 13.4935 20.4086 14.6474L7.59662 21.6145C5.53435 22.736 3 21.2763 3 18.9671L3 5.0329C3 2.72368 5.53435 1.26402 7.59661 2.38548L20.4086 9.35258Z"
stroke={color}
stroke-width="1.5"
strokeWidth="1.5"
/>
</svg>
);
Expand Down
10 changes: 6 additions & 4 deletions packages/client/src/components/containers/MLContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

import axios from "axios";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import type { PlotParams } from "react-plotly.js";
Expand All @@ -26,9 +27,9 @@ export default function MLContainer({
useEffect(() => {
const fetchPlot = async () => {
try {
const response = await fetch(plotType);
const graph = await response.json();
const data = JSON.parse(graph) as PlotParams;
// TODO: check to see if data is being parsed correctly.
const response = await axios.get<string>(plotType);
const data = JSON.parse(response.data) as PlotParams;
Comment on lines +30 to +32
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

JSON.parse(response.data) will throw at runtime — axios already parses JSON.

Since axios defaults to responseType: 'json', response.data is already a parsed object. Calling JSON.parse() on an object coerces it to "[object Object]" first, then throws SyntaxError. This means the plot will never load — the catch block will always fire, showing "Error loading data".

Fix by removing JSON.parse and typing the generic properly:

Proposed fix 
-        const response = await axios.get<string>(plotType);
-        const data = JSON.parse(response.data) as PlotParams;
+        const response = await axios.get<PlotParams>(plotType);
+        const data = response.data;

Alternatively, if the upstream API truly returns a JSON-encoded string (double-serialized), add { responseType: 'text' } to the axios config to prevent auto-parsing.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// TODO: check to see if data is being parsed correctly.
const response = await axios.get<string>(plotType);
const data = JSON.parse(response.data) as PlotParams;
// TODO: check to see if data is being parsed correctly.
const response = await axios.get<PlotParams>(plotType);
const data = response.data;
🤖 Prompt for AI Agents 
In `@packages/client/src/components/containers/MLContainer.tsx` around lines 30 -
32, The code calls JSON.parse on axios' response.data which is already parsed
JSON, causing a SyntaxError; in MLContainer.tsx change the axios call to return
parsed type directly (use axios.get<PlotParams>(plotType) and assign const data
= response.data) and remove JSON.parse; if the API truly returns a JSON-encoded
string instead, call axios.get<string>(plotType, { responseType: 'text' }) and
then JSON.parse(response.data) — update the types accordingly so data is a
PlotParams.

const layout: PlotParams["layout"] = {
autosize: true,
font: {
Expand All @@ -49,7 +50,8 @@ export default function MLContainer({
setPlot({ error: true });
}
};
fetchPlot();

void fetchPlot();
}, [plotType, resolvedTheme]);

if (!plot || !resolvedTheme || resolvedTheme === undefined) {
Expand Down
Loading