From c5f9cb0c2214fbaddf3dd6dfa0f6e16b3ed9b40e Mon Sep 17 00:00:00 2001 From: Scott Rees <6165315+reesscot@users.noreply.github.com> Date: Mon, 13 Feb 2023 13:05:48 -0700 Subject: [PATCH] chore: add astro to troubleshooting guide (#3410) --- .../troubleshooting/troubleshooting.react.mdx | 113 +++++++++++++++++- 1 file changed, 109 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.react.mdx b/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.react.mdx index d281c8bbed0..0d56da1aa3a 100644 --- a/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.react.mdx +++ b/docs/src/pages/[platform]/getting-started/troubleshooting/troubleshooting.react.mdx @@ -39,13 +39,53 @@ Webpack 4 already includes this polyfill. ``` ## Vite - + + When working with a [Vite](https://vitejs.dev) project you must make a few modifications. Please follow the steps below. -**1.** Add the following script tag to the `index.html` file at the bottom of the `` tag. +**1.** Add the following script tag to the `index.html` file right before the `` tag. ```html + + +``` + +**2.** Update the `vite.config.ts` and add a resolve alias inside the `defineConfig({})` as seen below. + +```ts +export default defineConfig({ + plugins: [react()], + resolve: { + alias: [ + { + find: './runtimeConfig', + replacement: './runtimeConfig.browser', + }, + ] + } +}) +``` +**3.** Update the `tsconfig.json` file and add `skipLibCheck: true` under `compilerOptions`. + +```json + "compilerOptions": { + "skipLibCheck": true, + } ... +``` + + +When working with a [Vite](https://vitejs.dev) project you must make a few modifications. Please follow the steps below. + +**1.** Add the following script tag to the `index.html` file right before the `` tag. This will only run on the client side and will polyfill Node globals. + +```html +``` + +**2.** Update the `astro.config.mjs` to add a resolve object inside the `defineConfig({})` as seen below. +```js +export default defineConfig({ + plugins: [react()], + resolve: { + alias: [ + { + find: './runtimeConfig', + replacement: './runtimeConfig.browser', + }, + ] + } +}) +``` **3.** Update the `tsconfig.json` file and add `skipLibCheck: true` under `compilerOptions`. ```js @@ -81,6 +154,38 @@ export default defineConfig({ "skipLibCheck": true, ... ``` + + +**1.** Add the following script to the bottom of the `index.astro` file. This will only run on the client side and will polyfill Node globals. + +```html + +``` + +**2.** Update the `astro.config.mjs` to add a resolve alias inside the `defineConfig({})` as seen below. + +```js +export default defineConfig({ + plugins: [react()], + resolve: { + alias: [ + { + find: './runtimeConfig', + replacement: './runtimeConfig.browser', + }, + ] + } +}) +``` + + + ## Create React App