Fix linting on nextjs branch #1509

ChristopherChudzicki · 2024-09-03T19:29:20Z

What are the relevant tickets?

Description (What does it do?)

On the current NextJS branch, linting is failing with

Oops! Something went wrong! :(

ESLint: 8.38.0

TypeError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js » eslint-config-mitodl#overrides[0]': Class extends value undefined is not a constructor or null

This PR resolves that issue and fixes linting/formatting errors that are present in the initial nextjs work.

How can this be tested?

Run yarn lint-check everything should pass.
- there will be some warnings about img
The linting check should be passing on CI (typechecking + tests still fail)

Additional Info

ChristopherChudzicki · 2024-09-03T19:42:29Z

frontends/.eslintrc.js

    "plugin:styled-components-a11y/recommended",
    "plugin:import/typescript",
    "plugin:mdx/recommended",
+    "plugin:@next/next/recommended",


From the docs: https://nextjs.org/docs/pages/building-your-application/configuring/eslint#migrating-existing-config

If you already have ESLint configured in your application and any of the following conditions are true:...Then we recommend either [1] removing these settings if you prefer how these properties have been configured within eslint-config-next or [2] extending directly from the Next.js ESLint plugin instead:

(Emphasis mine)

IMO (2) is a better way for us... I don't think using next lint would work for a monorepo with a root eslint config.

Resolve linting errors for nextjs branch and introduce nextjs linting plugin

* Next.js Initial Migration (#1505) * Next.js scaffold * Supply env vars on process.env.NEXT_PUBLIC_ * Replace react-router hook with next/navigation * MUI theme provider for Next.js * Styled elements * Restructuring to bring pages and components into ssr project * Images and link fixes * Set up prerendering with React Query and fetch Featured Courses carousel on server * Head meta tags * Main entrypoint. Include in yarn workspaces. API URL for local * Add remaining homepage sections * Move into frontends * Lint fixes * Routed drawer and updates for homepage resource drawer search triggers * Move pages (conflict with Next.js Pages Router) * Webpack configs for babel loader (import type) and ignore test files from build * Typescript config, move common/urls * Updates towards successful build * Suspense boudary for header useSearchParam * Provide origin on environment (cannot reference window) * Update drawer hooks for next/navigation * Unit listing page and dependencies * Image fixes. ol-component compatibility updates * Logo image fixes and footer image * Search page * Remove temp course-serach-utils * Remove temp course-serach-utils * Channel Page. Rewrite for image paths * Move @mui/material-nextjs into ol-components * Department listing page * Topic listing page * Terms page * Privacy page * Image paths * Lockfile * Migrates the dashboard pages * Migrate learning path listing page * Migrate learning path details page * Prettier fixes * Migrate test utils. Fixes for passing typechecks on test files (excluding React Router dependencies) * Migrate the onboarding page * Migrate program letter page * Migrate error page * Resolves issue with Server Components treated as Client Components (transpiler). Wraps library imports for use in Next.js. User lists detail page. * Metadata utility * Fetch learning resource for metadata when drawer is open * Async and sync metadata utilities * .env example file * Preserve hero image aspect * Put back SliderInput * Fix linting on nextjs branch (#1509) Resolve linting errors for nextjs branch and introduce nextjs linting plugin * Fixes for successful build (#1516) - Removes unnecessary Client Component wrappers and "use client" directives. - Set `<Suspense />` boundaries to client render components that useSearchParams() around: - all of the Search page. - the Learning Resource drawer. - the dashboard carousels. * Move Storybook root to ol-components * Move GlobalStyles to ol-components * Self contained images * Storybook for Next.js * Remove react-router addon. Upgrade Storybook addons * Fix issue trying to resolve react-dom/test-utils. Storybook 8 migration script package updates * Local image * Replace react-router useLocation * Images fixes. Copy images into ol-components. Embedly fallback * Migrate routed drawer stories for @storybook/nextjs * Next.js Initial Migration (#1505) * Next.js scaffold * Supply env vars on process.env.NEXT_PUBLIC_ * Replace react-router hook with next/navigation * MUI theme provider for Next.js * Styled elements * Restructuring to bring pages and components into ssr project * Images and link fixes * Set up prerendering with React Query and fetch Featured Courses carousel on server * Head meta tags * Main entrypoint. Include in yarn workspaces. API URL for local * Add remaining homepage sections * Move into frontends * Lint fixes * Routed drawer and updates for homepage resource drawer search triggers * Move pages (conflict with Next.js Pages Router) * Webpack configs for babel loader (import type) and ignore test files from build * Typescript config, move common/urls * Updates towards successful build * Suspense boudary for header useSearchParam * Provide origin on environment (cannot reference window) * Update drawer hooks for next/navigation * Unit listing page and dependencies * Image fixes. ol-component compatibility updates * Logo image fixes and footer image * Search page * Remove temp course-serach-utils * Remove temp course-serach-utils * Channel Page. Rewrite for image paths * Move @mui/material-nextjs into ol-components * Department listing page * Topic listing page * Terms page * Privacy page * Image paths * Lockfile * Migrates the dashboard pages * Migrate learning path listing page * Migrate learning path details page * Prettier fixes * Migrate test utils. Fixes for passing typechecks on test files (excluding React Router dependencies) * Migrate the onboarding page * Migrate program letter page * Migrate error page * Resolves issue with Server Components treated as Client Components (transpiler). Wraps library imports for use in Next.js. User lists detail page. * Metadata utility * Fetch learning resource for metadata when drawer is open * Async and sync metadata utilities * .env example file * Preserve hero image aspect * Put back SliderInput * Fix linting on nextjs branch (#1509) Resolve linting errors for nextjs branch and introduce nextjs linting plugin * Fixes for successful build (#1516) - Removes unnecessary Client Component wrappers and "use client" directives. - Set `<Suspense />` boundaries to client render components that useSearchParams() around: - all of the Search page. - the Learning Resource drawer. - the dashboard carousels. * Enable Storybook action * Enable Storybook action * Update lockfile * Use client directive missing from layout --------- Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>