[examples] Update create-react-app examples with styled-components to…

… use package aliases (#27591)
mui · Aug 4, 2021 · 873e79c · 873e79c
1 parent 4fb6b01
commit 873e79c
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 37 deletions.
diff --git a/examples/create-react-app-with-styled-components-typescript/README.md b/examples/create-react-app-with-styled-components-typescript/README.md
@@ -38,8 +38,6 @@ npm start
 
 <!-- #default-branch-switch -->
 
-Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui-org/material-ui/tree/next/examples/create-react-app-with-styled-components-typescript).
-
 The following link leverages this demo: https://next.material-ui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d)

diff --git a/examples/create-react-app-with-styled-components-typescript/config-overrides.js b/examples/create-react-app-with-styled-components-typescript/config-overrides.js
diff --git a/examples/create-react-app-with-styled-components-typescript/package.json b/examples/create-react-app-with-styled-components-typescript/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@material-ui/core": "next",
     "@material-ui/lab": "next",
-    "@material-ui/styled-engine-sc": "next",
+    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next",
     "@testing-library/jest-dom": "latest",
     "@testing-library/react": "latest",
     "@testing-library/user-event": "latest",
@@ -14,12 +14,15 @@
     "react-scripts": "latest",
     "styled-components": "latest"
   },
+  "resolutions": {
+    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next"
+  },
   "scripts": {
     "tsc": "./node_modules/.bin/tsc",
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
   "browserslist": {
     "production": [
@@ -38,8 +41,6 @@
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@types/styled-components": "latest",
-    "customize-cra": "latest",
-    "react-app-rewired": "latest",
     "typescript": "latest"
   }
 }
diff --git a/examples/create-react-app-with-styled-components-typescript/tsconfig.json b/examples/create-react-app-with-styled-components-typescript/tsconfig.json
@@ -14,9 +14,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "paths": {
-      "@material-ui/styled-engine": ["./node_modules/@material-ui/styled-engine-sc"]
-    }
+    "skipLibCheck": true
   },
   "include": ["src/**/*"]
 }
diff --git a/examples/create-react-app-with-styled-components/README.md b/examples/create-react-app-with-styled-components/README.md
@@ -22,8 +22,6 @@ npm start
 
 <!-- #default-branch-switch -->
 
-Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui-org/material-ui/tree/next/examples/create-react-app-with-styled-components).
-
 The following link leverages this demo: https://next.material-ui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d)

diff --git a/examples/create-react-app-with-styled-components/config-overrides.js b/examples/create-react-app-with-styled-components/config-overrides.js
diff --git a/examples/create-react-app-with-styled-components/package.json b/examples/create-react-app-with-styled-components/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@material-ui/core": "next",
     "@material-ui/lab": "next",
-    "@material-ui/styled-engine-sc": "next",
+    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next",
     "@testing-library/jest-dom": "latest",
     "@testing-library/react": "latest",
     "@testing-library/user-event": "latest",
@@ -14,11 +14,14 @@
     "react-scripts": "latest",
     "styled-components": "latest"
   },
+  "resolutions": {
+    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next"
+  },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   },
   "browserslist": {
     "production": [
@@ -31,9 +34,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "customize-cra": "latest",
-    "react-app-rewired": "latest"
   }
 }