diff --git a/TROUBLESHOOTING.md b/TROUBLESHOOTING.md index 4149d6b2..a1595923 100644 --- a/TROUBLESHOOTING.md +++ b/TROUBLESHOOTING.md @@ -304,6 +304,21 @@ Given `npm install` / `npm ci` floods the terminal with `npm warn deprecated … 3. Prefer fixing/removing those roots over adding an `override` per leaf package; 4. Keep using Node 18 + `npm install --legacy-peer-deps` for this stack. +## Gatsby HMR eslint-loader: unused vars / anonymous page exports + +Given the browser console (or terminal) shows eslint-loader module warnings such as: + +``` +'Skeleton' is defined but never used no-unused-vars +Anonymous arrow functions cause Fast Refresh to not preserve local component state. + no-anonymous-exports-page-templates +``` + +1. Remove unused imports (and dead commented-out usage) — e.g. `Skeleton` in `LocationStep` when only referenced inside comments; +2. Name page default exports like `src/pages/index.js` (`const NamedPage = () => …; export default NamedPage`); +3. Re-run / hard-refresh `gatsby develop` so eslint-loader clears the warnings; +4. See #453. + ## Gatsby HMR: bundle has N errors / ENOENT in node_modules Given the browser console (with `gatsby develop` running) shows: diff --git a/src/components/LocationStep/index.js b/src/components/LocationStep/index.js index ceaefb6e..cfcef0b9 100644 --- a/src/components/LocationStep/index.js +++ b/src/components/LocationStep/index.js @@ -5,7 +5,6 @@ import Alert from "@material-ui/lab/Alert" import AlertTitle from "@material-ui/lab/AlertTitle" import FormControl from "@material-ui/core/FormControl" import EmbedGoogleMap from "../../containers/EmbedGoogleMap" -import Skeleton from "@material-ui/lab/Skeleton" import Fade from "@material-ui/core/Fade" import FormHelperText from "@material-ui/core/FormHelperText" import Divider from "@material-ui/core/Divider" @@ -84,15 +83,6 @@ const LocationStep = (props) => { {currentPosition && (
- {/*loadingMap && ( - - )*/} - {!googleMapsJsToggle && ( { expect(tree).toMatchSnapshot() }) + it("does not import unused Skeleton (eslint no-unused-vars)", () => { + // Skeleton was only referenced in a commented-out block; keep the import gone. + const source = require("fs").readFileSync( + require("path").join(__dirname, "index.js"), + "utf8" + ) + expect(source).not.toMatch(/import Skeleton from/) + }) + it("should render warning panel", () => { props.isLocationValid = false render() diff --git a/src/pages/ajuda/index.js b/src/pages/ajuda/index.js index 86902f09..4df65f72 100644 --- a/src/pages/ajuda/index.js +++ b/src/pages/ajuda/index.js @@ -1,4 +1,6 @@ import React from "react" import HelpTemplate from "../../templates/help" -export default () => +const AjudaPage = () => + +export default AjudaPage diff --git a/src/pages/consultar/index.js b/src/pages/consultar/index.js index c602e582..90b12c9f 100644 --- a/src/pages/consultar/index.js +++ b/src/pages/consultar/index.js @@ -1,4 +1,6 @@ import React from "react" import CheckTemplate from "../../templates/check" -export default (props) => +const ConsultarPage = (props) => + +export default ConsultarPage diff --git a/src/pages/denunciar/index.js b/src/pages/denunciar/index.js index fea15603..3bd4abed 100644 --- a/src/pages/denunciar/index.js +++ b/src/pages/denunciar/index.js @@ -1,4 +1,6 @@ import React from "react" import ReportingTemplate from "../../templates/reporting" -export default () => +const DenunciarPage = () => + +export default DenunciarPage diff --git a/src/pages/pages.test.js b/src/pages/pages.test.js new file mode 100644 index 00000000..d1ba45f9 --- /dev/null +++ b/src/pages/pages.test.js @@ -0,0 +1,30 @@ +jest.mock("../templates/help", () => () => null) +jest.mock("../templates/check", () => () => null) +jest.mock("../templates/reporting", () => () => null) +jest.mock("../templates/privacy", () => () => null) +jest.mock("../templates/about", () => () => null) +jest.mock("../templates/terms", () => () => null) +jest.mock("../templates", () => () => null) + +import AjudaPage from "./ajuda" +import ConsultarPage from "./consultar" +import DenunciarPage from "./denunciar" +import PrivacidadePage from "./privacidade" +import SobrePage from "./sobre" +import TermosPage from "./termos" +import IndexPage from "./index" + +describe("Gatsby page default exports", () => { + it.each([ + ["AjudaPage", AjudaPage], + ["ConsultarPage", ConsultarPage], + ["DenunciarPage", DenunciarPage], + ["PrivacidadePage", PrivacidadePage], + ["SobrePage", SobrePage], + ["TermosPage", TermosPage], + ["IndexPage", IndexPage], + ])("%s is a named function (Fast Refresh / eslint-loader)", (name, page) => { + expect(typeof page).toBe("function") + expect(page.name).toBe(name) + }) +}) diff --git a/src/pages/privacidade/index.js b/src/pages/privacidade/index.js index f7674086..31bb2284 100644 --- a/src/pages/privacidade/index.js +++ b/src/pages/privacidade/index.js @@ -1,4 +1,6 @@ import React from "react" import PrivacyTemplate from "../../templates/privacy" -export default () => +const PrivacidadePage = () => + +export default PrivacidadePage diff --git a/src/pages/sobre/index.js b/src/pages/sobre/index.js index cb18b28e..4d70a67c 100644 --- a/src/pages/sobre/index.js +++ b/src/pages/sobre/index.js @@ -1,6 +1,6 @@ import React from "react" import AboutTemplate from "../../templates/about" -export default () => { - return -} +const SobrePage = () => + +export default SobrePage diff --git a/src/pages/termos/index.js b/src/pages/termos/index.js index 4178f82a..4cfd976f 100644 --- a/src/pages/termos/index.js +++ b/src/pages/termos/index.js @@ -1,4 +1,6 @@ import React from "react" import TermsTemplate from "../../templates/terms" -export default () => +const TermosPage = () => + +export default TermosPage