chore: add astro to troubleshooting guide

[reesscot]

Description of changes

Added instructions for Astro and updated instructions for Vite to be clearer. Also added both JS and TS version of the instructions and tested them out in an Astro app.

Issue #, if available

Related to: #3206 (comment)

Description of how you validated changes

Ran yarn docs dev and smoke tested the troubleshooting page:

Checklist

• PR description included
• Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3d558aa

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[reesscot]

note: all astro files are TS files

[dbanksdesign]

LGTM! Just one teeny comment

[dbanksdesign]

Much more explicit!

[dbanksdesign]

Should we remove "in", "add in a resolve" v. "add a resolve"

[ErikCH]

I found this thread, and you can add in the window object in Vite as well, instead of adding it into the html file.

aws-amplify/amplify-js#9639 (comment)

export default defineConfig({
  integrations: [react(), tailwind()],
  vite: {
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
      },
    },
    build: {
      rollupOptions: {
        plugins: [rollupNodePolyFill()],
      },
    },
    resolve: {
      alias: {
        './runtimeConfig': './runtimeConfig.browser',
      },
    },
  },
}) 

That's what I've done with Nuxt, which is also another section we should add eventually.

export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
  resolve: {
    alias: {
      "./runtimeConfig": "./runtimeConfig.browser",
    },
  },
});

[reesscot]

I found this thread, and you can add in the window object in Vite as well, instead of adding it into the html file.

aws-amplify/amplify-js#9639 (comment)

export default defineConfig({
  integrations: [react(), tailwind()],
  vite: {
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
      },
    },
    build: {
      rollupOptions: {
        plugins: [rollupNodePolyFill()],
      },
    },
    resolve: {
      alias: {
        './runtimeConfig': './runtimeConfig.browser',
      },
    },
  },
}) 

That's what I've done with Nuxt, which is also another section we should add eventually.

export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
  resolve: {
    alias: {
      "./runtimeConfig": "./runtimeConfig.browser",
    },
  },
});

I say that too. My concern there is that then you have to pull in an extra dependency rollupNodePolyFill to polyfill the rest of the Node globals (exports, and process). It feels a bit cleaner to do it all in one location, but I would be open to the idea of offering both options. Thoughts @ErikCH @dbanksdesign?

[ErikCH]

I say that too. My concern there is that then you have to pull in an extra dependency rollupNodePolyFill to polyfill the rest of the Node globals (exports, and process). It feels a bit cleaner to do it all in one location, but I would be open to the idea of offering both options. Thoughts @ErikCH @dbanksdesign?

I wasn't aware you had to pull in the pollyfill for it to work. In Nuxt case you don't have too. Then I'm fine with just adding it into the index.astro html file, and not adding the polyfill.

[reesscot]

I say that too. My concern there is that then you have to pull in an extra dependency rollupNodePolyFill to polyfill the rest of the Node globals (exports, and process). It feels a bit cleaner to do it all in one location, but I would be open to the idea of offering both options. Thoughts @ErikCH @dbanksdesign?

I wasn't aware you had to pull in the pollyfill for it to work. In Nuxt case you don't have too. Then I'm fine with just adding it into the index.astro html file, and not adding the polyfill.

Yeah, unfortunately there are Auth flows where process and exports will throw runtime errors. It's a known issue and will be fixed in a future version of Auth.