(React) SyntaxError: Unexpected token 'export'

[jm-bh]

Describe the bug When importing components into a Next.js (React framework) app, Astro throws SyntaxError: Unexpected token 'export'.

To Reproduce Steps to reproduce the behavior:

1. Create a new Next app yarn create next-app
2. Install Astro yarn add @astrouxds/react
3. Add the CSS in pages/_app.tsx
4. Use an Astro component on any page
5. Error

Current behavior While rendering, a SyntaxError is thrown. The error comes from @astrouxds/react/dist/index.js:1: export * from "./components";

Expected behavior No error

Screenshots

CodeSandbox View the problem on StackBlitz

Environment (please complete the following information):

• Browser [e.g. chrome, safari]: Chrome 114.0.5735.199 (Official Build) (64-bit)
• @astrouxds/astro-web-components version [e.g. 7.0.0]: 7.13.0
• Framework, if applicable (React, Angular, Vue, Svelte, ect): Next.js (React)
• Framework wrapper version, if applicable (@astrouxds/react or @astrouxds/angular): @astrouxds/react

Additional context n/a

[jm-bh]

Turns out this is an issue with Next.js, not Astro. Sorry about that!

For anyone else that runs into this issue, you need to use the transpilePackages option in next.config.js:

{
  ...

  transpilePackages: [
    '@astrouxds/react',
    '@astrouxds/astro-web-components',
  ],
}

[micahjones13]

That's a good gotcha, we'll throw that in our docs. Thanks for letting us know!