Revert "[examples] Update create-react-app examples with styled-compo…

…nents to use package aliases (#27591)" (#27917) This reverts commit 873e79c.
mui · Aug 23, 2021 · e108dbc · e108dbc
1 parent debba91
commit e108dbc
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 17 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,6 +38,8 @@ 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
@@ -0,0 +1,7 @@
+const { addWebpackAlias, override } = require('customize-cra');
+
+module.exports = override(
+  addWebpackAlias({
+    '@material-ui/styled-engine': '@material-ui/styled-engine-sc',
+  }),
+);
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": "npm:@material-ui/styled-engine-sc@next",
+    "@material-ui/styled-engine-sc": "next",
     "@testing-library/jest-dom": "latest",
     "@testing-library/react": "latest",
     "@testing-library/user-event": "latest",
@@ -14,15 +14,12 @@
     "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-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
   "browserslist": {
     "production": [
@@ -41,6 +38,8 @@
     "@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,7 +14,9 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "skipLibCheck": true
+    "paths": {
+      "@material-ui/styled-engine": ["./node_modules/@material-ui/styled-engine-sc"]
+    }
   },
   "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,6 +22,8 @@ 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
@@ -0,0 +1,7 @@
+const { addWebpackAlias, override } = require('customize-cra');
+
+module.exports = override(
+  addWebpackAlias({
+    '@material-ui/styled-engine': '@material-ui/styled-engine-sc',
+  }),
+);
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": "npm:@material-ui/styled-engine-sc@next",
+    "@material-ui/styled-engine-sc": "next",
     "@testing-library/jest-dom": "latest",
     "@testing-library/react": "latest",
     "@testing-library/user-event": "latest",
@@ -14,14 +14,11 @@
     "react-scripts": "latest",
     "styled-components": "latest"
   },
-  "resolutions": {
-    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
   "browserslist": {
     "production": [
@@ -34,5 +31,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "customize-cra": "latest",
+    "react-app-rewired": "latest"
   }
 }