inside npm workspaces: use of`key` plus prop spreading causes build failure

[happycollision]

What version of astro are you using?

1.2.5

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When an Astro project is created within an NPM workspace (packages/astro-site in the reproduction repo) a bad import occurs when a React component uses both the prop spreading syntax (object destructure on a component invocation) and has a key prop specified.

Steps to reproduce:

1. Set up an Astro project with React integration within an NPM workspace
2. Render a React component in the project
3. Inside the React component's module, or any module in your dependency graph, use prop spreading and a key prop:

   // This component doesn't even need to be *used* anywhere. It just
   // needs to exist inside a file that is in the dependency graph for
   // a component that is used.
   function AnyComponent(props) {
     return (
       <div {...props} key="anything"/>
     )
   }
   

   In an actual project, the use of the key prop is likely going to be due to mapping over a list, but the actual map is not necessary to reproduce the bug.

Resulting behavior

At this point, if you are running the dev server, you will see that the island which has this component in its dependency graph will be affected in some way. Opting into JS with client:idle vs client:only="react" will cause the affected area to behave differently. In one case (client:idle), you'll see an error in the console, but if you haven't used the affected component you will still see other components render just fine. In the other case (client:only) nothing will render in that island.

But if you want to see the actual error regardless of opt-in strategy, you should build the site. At that point you will see something like the following error:

Full error text

> @example/[email protected] build
> astro build

09:31:28 AM [build] output target: static
09:31:28 AM [build] Collecting build info...
09:31:28 AM [build] Completed in 4ms.
09:31:28 AM [build] Building static entrypoints...
09:31:29 AM [build] Completed in 244ms.

 building client 
transforming (241) ../../node_modules/@Error when using sourcemap for reporting an error: Can't resolve original location of error.
'createElement' is not exported by ../../node_modules/@astrojs/react/dist/index.js, imported by src/components/index.tsx
file: /Users/dondenton/GitProjects/astro-monorepo-bug/packages/astro-site/src/components/index.tsx:1:9
1: import { createElement as _createElement } from "@astrojs/react";
            ^
2: import { jsx as _jsx } from "@astrojs/react/jsx-runtime";
3: export function Unused() {
 error   'createElement' is not exported by ../../node_modules/@astrojs/react/dist/index.js, imported by src/components/index.tsx
  File:
    /Users/dondenton/GitProjects/astro-monorepo-bug/packages/astro-site/src/components/index.tsx
  Code:
    1: import { createElement as _createElement } from "@astrojs/react";
                ^
    2: import { jsx as _jsx } from "@astrojs/react/jsx-runtime";
    3: export function Unused() {
  Stacktrace:
Error: 'createElement' is not exported by ../../node_modules/@astrojs/react/dist/index.js, imported by src/components/index.tsx
    at error (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
    at Module.error (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:12429:16)
    at Module.traceVariable (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:12788:29)
    at ModuleScope.findVariable (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:11440:39)
    at FunctionScope.findVariable (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:6372:38)
    at ChildScope.findVariable (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:6372:38)
    at Identifier.bind (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:7439:40)
    at CallExpression.bind (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:5269:23)
    at CallExpression.bind (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:8935:15)
    at ReturnStatement.bind (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:5269:23)
    at BlockStatement.bind (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:5265:73)
    at FunctionDeclaration.bind (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:5269:23)
    at ExportNamedDeclaration.bind (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:9667:73)
    at Program.bind (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:5265:73)
    at Module.bindReferences (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:12425:18)
    at Graph.sortModules (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:23024:20)
    at Graph.build (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:22902:14)
    at async file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:23689:13
    at async catchUnfinishedHookActions (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:23088:20)
    at async rollupInternal (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/rollup/dist/es/shared/rollup.js:23686:5)
    at async doBuild (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45806:24)
    at async Module.build (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45653:16)
    at async clientBuild (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/astro/dist/core/build/static-build.js:190:23)
    at async staticBuild (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/astro/dist/core/build/static-build.js:65:3)
    at async AstroBuilder.build (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/astro/dist/core/build/index.js:86:5)
    at async AstroBuilder.run (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/astro/dist/core/build/index.js:127:7)
    at async build (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/astro/dist/core/build/index.js:22:3)
    at async runCommand (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/astro/dist/cli/index.js:190:14)
    at async cli (file:///Users/dondenton/GitProjects/astro-monorepo-bug/node_modules/astro/dist/cli/index.js:207:5)

npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @example/[email protected] 
npm ERR!   at location: /Users/dondenton/GitProjects/astro-monorepo-bug/packages/astro-site 

Further comments

The repo linked below has two commits. The first sets up the project (steps 1 and 2 above) and shows that it runs just fine until the second commit, which finalizes the conditions needed for the bug.

So if you want to just see the error, check out the repo and follow the steps in the Readme. The commands are aliased so that you don't have to bother with NPM workspace options.

Link to Minimal Reproducible Example

https://github.com/happycollision/astro-monorepo-bug

Participation

• [ ] I am willing to submit a pull request for this issue.