replace react-app-rewired with craco, update deps

README.md

@@ -2,7 +2,7 @@
 
 > Opinionated Create React App template with all the important stuff<sup>1</sup>
 
-<sup>1</sup>: [PWA](https://web.dev/progressive-web-apps/), [eslint](https://eslint.org/), [Material UI](https://material-ui.com/), [react-router](https://reactrouter.com/), [cypress](https://www.cypress.io/), [Google Analytics](https://analytics.google.com/), [Sentry](https://sentry.io/welcome/), [swr](https://swr.vercel.app/), [zustand](https://zustand.surge.sh/), [react-app-rewired](https://github.com/timarney/react-app-rewired), [sass](https://sass-lang.com/) and other bits and bobs.
+<sup>1</sup>: [PWA](https://web.dev/progressive-web-apps/), [eslint](https://eslint.org/), [Material UI](https://material-ui.com/), [react-router](https://reactrouter.com/), [cypress](https://www.cypress.io/), [Google Analytics](https://analytics.google.com/), [Sentry](https://sentry.io/welcome/), [swr](https://swr.vercel.app/), [zustand](https://zustand.surge.sh/), [craco](https://github.com/gsoft-inc/craco), [sass](https://sass-lang.com/) and other bits and bobs.
 
 [![npm](https://img.shields.io/npm/v/@iamnapo/cra-template.svg?style=for-the-badge&logo=npm&label=)](https://www.npmjs.com/package/@iamnapo/cra-template) [![style](https://img.shields.io/badge/code%20style-iamnapo-cyan.svg?style=for-the-badge)](https://iamnapo.me)
 

template.json

@@ -3,20 +3,15 @@
 		"private": true,
 		"scripts": {
 			"analyze": "source-map-explorer 'build/static/js/*.js'",
-			"build": "react-app-rewired build",
+			"build": "craco build",
 			"cypress:open": "cypress open",
 			"cypress:run": "cypress run",
 			"generate-coverage-report": "nyc report --reporter=text-lcov > coverage.lcov",
 			"lint": "eslint . --cache",
-			"start": "react-app-rewired start",
-			"start:for-cypress": "react-app-rewired -r @cypress/instrument-cra start",
+			"start": "craco start",
+			"start:for-cypress": "craco -r @cypress/instrument-cra start",
 			"test": "npm run lint && start-server-and-test start:for-cypress :3000 cypress:run"
 		},
-		"husky": {
-			"hooks": {
-				"pre-commit": "npm run lint"
-			}
-		},
 		"browserslist": {
 			"production": [
 				">1%",
@@ -56,60 +51,58 @@
 			]
 		},
 		"dependencies": {
-			"@emotion/react": "^11.1.4",
-			"@emotion/styled": "^11.0.0",
-			"@fontsource/roboto": "^4.1.0",
+			"@craco/craco": "^6.1.1",
+			"@emotion/react": "^11.1.5",
+			"@emotion/styled": "^11.1.5",
+			"@fontsource/roboto": "^4.2.2",
 			"@iamnapo/construct-url": "^2.0.0",
-			"@material-ui/core": "^5.0.0-alpha.24",
-			"@material-ui/icons": "^5.0.0-alpha.24",
-			"@material-ui/lab": "^5.0.0-alpha.24",
-			"@sentry/browser": "^6.1.0",
+			"@material-ui/core": "^5.0.0-alpha.27",
+			"@material-ui/icons": "^5.0.0-alpha.27",
+			"@material-ui/lab": "^5.0.0-alpha.27",
+			"@sentry/browser": "^6.2.3",
 			"clsx": "^1.1.1",
-			"customize-cra": "^1.0.0",
-			"date-fns": "^2.16.1",
+			"date-fns": "^2.19.0",
 			"history": "^4.10.1",
-			"ky": "^0.26.0",
-			"notistack": "^1.0.3",
+			"ky": "^0.27.0",
+			"notistack": "^1.0.5",
 			"prop-types": "^15.7.2",
-			"query-string": "^6.13.8",
+			"query-string": "^7.0.0",
 			"react-ga": "^3.3.0",
 			"react-router-dom": "^5.2.0",
-			"swr": "^0.4.1",
-			"web-vitals": "^1.1.0",
-			"workbox-background-sync": "^6.1.0",
-			"workbox-broadcast-update": "^6.1.0",
-			"workbox-cacheable-response": "^6.1.0",
-			"workbox-core": "^6.1.0",
-			"workbox-expiration": "^6.1.0",
-			"workbox-google-analytics": "^6.1.0",
-			"workbox-navigation-preload": "^6.1.0",
-			"workbox-precaching": "^6.1.0",
-			"workbox-range-requests": "^6.1.0",
-			"workbox-routing": "^6.1.0",
-			"workbox-strategies": "^6.1.0",
-			"workbox-streams": "^6.1.0",
-			"zustand": "^3.3.1"
+			"swr": "^0.5.4",
+			"web-vitals": "^1.1.1",
+			"workbox-background-sync": "^6.1.2",
+			"workbox-broadcast-update": "^6.1.2",
+			"workbox-cacheable-response": "^6.1.2",
+			"workbox-core": "^6.1.2",
+			"workbox-expiration": "^6.1.2",
+			"workbox-google-analytics": "^6.1.2",
+			"workbox-navigation-preload": "^6.1.2",
+			"workbox-precaching": "^6.1.2",
+			"workbox-range-requests": "^6.1.2",
+			"workbox-routing": "^6.1.2",
+			"workbox-strategies": "^6.1.2",
+			"workbox-streams": "^6.1.2",
+			"zustand": "^3.3.3"
 		},
 		"devDependencies": {
 			"@cypress/code-coverage": "^3.9.2",
 			"@cypress/instrument-cra": "^1.4.0",
 			"@iamnapo/prettier-config": "^1.0.2",
 			"babel-plugin-import": "^1.13.3",
-			"cypress": "^6.4.0",
+			"cypress": "^6.8.0",
 			"dotenv": "^8.2.0",
-			"eslint": "^7.19.0",
-			"eslint-config-iamnapo": "^12.0.0",
+			"eslint": "^7.22.0",
+			"eslint-config-iamnapo": "^12.0.1",
 			"eslint-plugin-cypress": "^2.11.2",
 			"eslint-plugin-import": "^2.22.1",
 			"eslint-plugin-jsx-a11y": "^6.4.1",
 			"eslint-plugin-react": "^7.22.0",
 			"eslint-plugin-react-hooks": "^4.2.0",
-			"eslint-plugin-unicorn": "^27.0.0",
-			"husky": "^4.3.8",
-			"react-app-rewired": "^2.1.8",
-			"sass": "^1.32.6",
+			"eslint-plugin-unicorn": "^28.0.2",
+			"sass": "^1.32.8",
 			"source-map-explorer": "^2.5.2",
-			"start-server-and-test": "^1.12.0"
+			"start-server-and-test": "^1.12.1"
 		},
 		"engines": {
 			"node": ">=14"

template/.env

@@ -3,6 +3,4 @@ REACT_APP_SENTRY_DSN=
 REACT_APP_SENTRY_ENVIRONMENT="local"
 REACT_APP_SERVER_URL="http://localhost:4000"
 
-DISABLE_ESLINT_PLUGIN=true
-SKIP_PREFLIGHT_CHECK=true
 BROWSER="none"

template/.env.sample

@@ -3,6 +3,4 @@ REACT_APP_SENTRY_DSN=
 REACT_APP_SENTRY_ENVIRONMENT=
 REACT_APP_SERVER_URL=
 
-DISABLE_ESLINT_PLUGIN=true
-SKIP_PREFLIGHT_CHECK=true
 BROWSER="none"

template/.github/workflows/ci.yml

@@ -6,7 +6,6 @@ jobs:
   ci:
     runs-on: ubuntu-latest
     env:
-      SKIP_PREFLIGHT_CHECK: true
       REACT_APP_SENTRY_DSN:
       REACT_APP_SENTRY_ENVIRONMENT: ci
       REACT_APP_GA:

template/craco.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+	babel: {
+		plugins: [
+			["import", { libraryName: "@material-ui/core", libraryDirectory: "", camel2DashComponentName: false }, "core"],
+			["import", { libraryName: "@material-ui/icons", libraryDirectory: "", camel2DashComponentName: false }, "icons"],
+			["import", { libraryName: "@material-ui/lab", libraryDirectory: "", camel2DashComponentName: false }, "lab"],
+		],
+	},
+	eslint: {
+		enable: false,
+	},
+};

template/cypress/integration/initial.spec.js

@@ -1,4 +1,6 @@
-describe("Initial Visits", () => {
+/// <reference types="cypress" />
+
+context("Initial Visits", () => {
 	it("navigates to the initial screen", () => {
 		cy.visit("/");
 		cy.contains(/learn react/i).should("exist");

template/cypress/plugins/index.js

@@ -1,5 +1,10 @@
+/// <reference types="cypress" />
+
 require("dotenv").config();
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
 	require("@cypress/code-coverage/task")(on, config);
 

template/cypress/support/index.js

@@ -1,3 +1,5 @@
+/// <reference types="cypress" />
+
 import "@cypress/code-coverage/support";
 
 Cypress.on("window:before:load", (win) => {

template/netlify.toml

@@ -13,7 +13,6 @@ for = "/*.pdf"
 values = { Cache-Control = "no-store" }
 
 [build.environment]
-SKIP_PREFLIGHT_CHECK = "true"
 REACT_APP_SENTRY_DSN = ""
 REACT_APP_GA = ""
 REACT_APP_SENTRY_ENVIRONMENT = "develop"