docs: move troubleshooting to new page (#1959)

hbuchel · Heather Buchel · web-flow · commit 94b6821de983 · 2022-05-23T16:00:41.000-04:00
* docs: move troubleshooting to new page

Co-authored-by: Heather Buchel &lt;buchel@amazon.com&gt;
diff --git a/docs/src/components/Layout/SecondaryNav.tsx b/docs/src/components/Layout/SecondaryNav.tsx
@@ -141,6 +141,11 @@ export const SecondaryNav = (props) => {
               Migration
             </NavLink>
           )}
+          {platform !== 'flutter' && (
+            <NavLink {...props} href="/getting-started/troubleshooting">
+              Troubleshooting
+            </NavLink>
+          )}
         </>
       );
     case 'components':
diff --git a/docs/src/pages/[platform]/getting-started/installation/dependencies.vue.mdx b/docs/src/pages/[platform]/getting-started/installation/dependencies.vue.mdx
@@ -25,3 +25,21 @@ yarn add aws-amplify @aws-amplify/ui-vue
   documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue)
   please click here.
 </Alert>
+
+### Register as a global plugin (Optional)
+
+Optionally, you can register all the `@aws-amplify/ui-vue` components at once.
+
+```js
+// main.js
+import { createApp } from 'vue';
+import App from './App.vue';
+import AmplifyVue from '@aws-amplify/ui-vue';
+
+const app = createApp(App);
+app.use(AmplifyVue);
+app.mount('#app');
+```
+
+Otherwise, you can import individual components from the `@aws-amplify/ui-vue` package in each one of your components.
+
diff --git a/docs/src/pages/[platform]/getting-started/installation/index.page.mdx b/docs/src/pages/[platform]/getting-started/installation/index.page.mdx
@@ -23,7 +23,3 @@ import { Fragment } from '@/components/Fragment';
 <Fragment platforms={['web']} useCommonWebContent>
   {({ platform }) => import(`./fonts.${platform}.mdx`)}
 </Fragment>
-
-<Fragment platforms={['react', 'vue', 'angular']}>
-  {({ platform }) => import(`./troubleshooting.${platform}.mdx`)}
-</Fragment>
diff --git a/docs/src/pages/[platform]/getting-started/troubleshooting/index.page.mdx b/docs/src/pages/[platform]/getting-started/troubleshooting/index.page.mdx
@@ -0,0 +1,11 @@
+---
+title: Troubleshooting
+metaTitle: Troubleshooting
+description: Workarounds for common issues using Amplify UI.
+supportedFrameworks: react|angular|vue
+---
+
+import Link from 'next/link';
+import { Fragment } from '@/components/Fragment';
+
+<Fragment>{({ platform }) => import(`./troubleshooting.${platform}.mdx`)}</Fragment>
diff --git a/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.angular.mdx b/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.angular.mdx
@@ -1,5 +1,3 @@
-## Troubleshooting
-
 ### Global and Process Shim
 
 Angular 6+ no longer include shims for 'global' or 'process'. Add the following to your `src/polyfills.ts`:
diff --git a/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.react.mdx b/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.react.mdx
@@ -1,8 +1,6 @@
 import { Alert, Tabs, TabItem } from '@aws-amplify/ui-react';
 
-## Troubleshooting
-
-### Webpack 5+
+## Webpack 5+
 
 Follow the instructions below to if you are using Webpack 5:
 
@@ -47,7 +45,7 @@ yarn add node-polyfill-webpack-plugin -D
   ],
 ```
 
-### Vite
+## Vite
 
 When working with a [Vite](https://vitejs.dev) project you must make a few modifications. Please follow the steps below.
 
@@ -91,7 +89,7 @@ export default defineConfig({
 ...
 ```
 
-### Jest
+## Jest
 
 As of v2.15.0 of `@aws-amplify/ui-react` which included the release of Geo components, users of the Jest testing framework may run into the following error when attempting to run tests:
 
diff --git a/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.vue.mdx b/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.vue.mdx
@@ -1,23 +1,4 @@
-## Install as a global plugin (Optional)
-
-Optionally, you can register all the `@aws-amplify/ui-vue` components at once.
-
-```js
-// main.js
-import { createApp } from 'vue';
-import App from './App.vue';
-import AmplifyVue from '@aws-amplify/ui-vue';
-
-const app = createApp(App);
-app.use(AmplifyVue);
-app.mount('#app');
-```
-
-Otherwise, you can import individual components from the `@aws-amplify/ui-vue` package in each one of your components.
-
-## Troubleshooting
-
-### Vite
+## Vite
 
 When working with a [Vite](https://vitejs.dev) project you must make a few modifications. Please follow the steps below.
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-## Troubleshooting`
`2`		`-`
`3`	`1`	`### Global and Process Shim`
`4`	`2`
`5`	`3`	Angular 6+ no longer include shims for 'global' or 'process'. Add the following to your `src/polyfills.ts`: