Astro Check Errors - Only when using React #6631

GrantBirki · 2023-03-22T22:24:42Z

What version of `astro` are you using?

2.1.2

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

None

What package manager are you using?

npm

What operating system are you using?

Windows, Linux, and MacOS - All the same error

What browser are you using?

Chrome and Brave

Describe the Bug

When running astro check, I am seeing errors displayed in my terminal ever since adding React components into my project. I added React functionality by closely following the official Astro docs.

What is really strange, is that these errors are also shown in build command with Astro but the build still successfully completes and my sites are all deployed. In fact, I didn't even know these errors were happening until I checked my GitHub Actions build logs and saw them in there. All the sites I am deploying and using Astro have these "error" messages (that are using React) but they are deployed fine and have no visible issues.

Here are the errors I'm seeing and how to recreate them

Clone this template repository
Install npm packages
```
npm install
```
Run a build and view the error:

$ npm run build

> <name>@0.0.0 build
> astro build

X [ERROR] The build was canceled

10:19:30 PM [content] Types generated 1.89s
10:19:30 PM [build] output target: static  
10:19:30 PM [build] Collecting build info...
10:19:30 PM [build] Completed in 2.21s.     
10:19:30 PM [build] Building static entrypoints...
10:19:33 PM [build] Completed in 2.47s.

 building client 
Completed in 1.89s.       

...
 generating static routes 
▶ src/pages/index.astro
...
10:19:48 PM [build] 19 page(s) built in 19.51s
10:19:48 PM [build] Complete!

As you can see in the logs above, the build completes successfully, but there is an odd line in the output -> X [ERROR] The build was canceled.

Running astro check shows some additional info

$ npm run astro check
> <project-name-here>@0.0.0 astro
> astro "check"

10:22:33 PM [check] Checking files
X [ERROR] The build was canceled

10:22:35 PM [content] Types generated 1.80s
X [ERROR] Invalid command: on-resolve [plugin JavaScript plugins]

    node_modules/esbuild/lib/main.js:728:12:
      728 │       throw new Error(`Invalid command: ` + request.command);
          ╵             ^

    at handleRequest (<project-path-here>\node_modules\esbuild\lib\main.js:728:13)       
    at handleIncomingPacket (<project-path-here>\node_modules\esbuild\lib\main.js:745:7) 
    at Socket.readFromStdout (<project-path-here>\node_modules\esbuild\lib\main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  The plugin "JavaScript plugins" was triggered by this import

    node_modules/@mui/material/ButtonBase/Ripple.js:3:17:
      3 │ import clsx from 'clsx';
        ╵                  ~~~~~~

⠋  Getting diagnostics for Astro files in <project-path-here>\…X [ERROR] Invalid command: on-resolve [plugin JavaScript plugins]

    node_modules/esbuild/lib/main.js:728:12:
      728 │       throw new Error(`Invalid command: ` + request.command);
          ╵             ^

    at handleRequest (<project-path-here>\node_modules\esbuild\lib\main.js:728:13)
    at handleIncomingPacket (<project-path-here>\node_modules\esbuild\lib\main.js:745:7)
    at Socket.readFromStdout (<project-path-here>\node_modules\esbuild\lib\main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  The plugin "JavaScript plugins" was triggered by this import

    node_modules/@mui/material/ButtonBase/Ripple.js:8:28:
      8 │ import { jsx as _jsx } from "react/jsx-runtime";
        ╵                             ~~~~~~~~~~~~~~~~~~~

✔  Getting diagnostics for Astro files in <project-path-here>\…
10:22:40 PM [diagnostics] Result (48 files): 
- 0 errors
- 0 warnings
- 0 hints

Additional Details

The pull request that added React components to my repository when things broke

Actions logs showing the error. This is where I traced things back to the Actions workflow when things first started acting weird

Link to Minimal Reproducible Example

https://github.com/grantbirki/astrowind

Participation

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

The text was updated successfully, but these errors were encountered:

matthewp · 2023-03-24T20:20:41Z

Can you provide a minimal reproduction? The provided example is a full app it seems.

kodumbeats · 2023-03-27T15:27:22Z

I get errors using astro check with a brand new project with react, but not the same as the OP. Here are my reproduction steps:

Create new project with npm create astro@latest
- Empty template
- TypeScript (strict)
$ cd project
$ npm run astro check // Works as intended
$ npm run astro add react // Accept all defaults
$ npm run astro check // breaks with following error trace:

error trace


$ npm run astro check

> reactbreaksthings@0.0.1 astro
> astro check

11:07:05 a.m. [check] Checking files
11:07:06 a.m. [content] No content directory found. Skipping type generation.
✔  Getting diagnostics for Astro files in /home/kdmb/reactbreaksthings/…
11:07:07 a.m. [diagnostics] Result (1 file): 
- 0 errors
- 0 warnings
- 0 hints

fatal error: all goroutines are asleep - deadlock!

goroutine 1 [chan receive]:
github.com/evanw/esbuild/internal/helpers.(*ThreadSafeWaitGroup).Wait(...)
	github.com/evanw/esbuild/internal/helpers/waitgroup.go:36
main.runService.func2()
	github.com/evanw/esbuild/cmd/esbuild/service.go:114 +0x59
main.runService(0x1)
	github.com/evanw/esbuild/cmd/esbuild/service.go:160 +0x4ed
main.main()
	github.com/evanw/esbuild/cmd/esbuild/main.go:236 +0xa29

goroutine 18 [chan receive]:
main.runService.func1()
	github.com/evanw/esbuild/cmd/esbuild/service.go:98 +0x4a
created by main.runService
	github.com/evanw/esbuild/cmd/esbuild/service.go:97 +0x1e5

goroutine 19 [chan receive]:
main.(*serviceType).sendRequest(0xc0000a1da0, {0x8ec5a0, 0xc000166450})
	github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0xfa
main.runService.func3()
	github.com/evanw/esbuild/cmd/esbuild/service.go:125 +0x39
created by main.runService
	github.com/evanw/esbuild/cmd/esbuild/service.go:122 +0x31c

goroutine 51 [chan receive]:
main.(*serviceType).sendRequest(0xc0000a1da0, {0x8ec5a0, 0xc0002817a0})
	github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0xfa
main.(*serviceType).convertPlugins.func2.3({{0xc000028620, 0x9}, {0xc0000d0400, 0x3d}, {0x959da6, 0x4}, {0xc0000d0400, 0x33}, 0x3, {0x0, ...}})
	github.com/evanw/esbuild/cmd/esbuild/service.go:966 +0x785
github.com/evanw/esbuild/pkg/api.(*pluginImpl).onResolve.func1({{0xc000028620, 0x9}, {0xc0000d0400, 0x33}, {0x0, 0x0}, {{0xc0000d0400, 0x3d}, {0x959da6, 0x4}, ...}, ...})
	github.com/evanw/esbuild/pkg/api/api_impl.go:1883 +0x215
github.com/evanw/esbuild/internal/bundler.RunOnResolvePlugins({_, _, _}, _, {0xc0001a0000, 0xc000190048, 0xc000190060, 0xc0001a2000, 0x5, 0xc0002625a0}, ...)
	github.com/evanw/esbuild/internal/bundler/bundler.go:793 +0x8d5
github.com/evanw/esbuild/internal/bundler.parseFile({{0xa3ae58, 0xc0001a2020}, {0xc0001a0000, 0xc000190048, 0xc000190060, 0xc0001a2000, 0x5, 0xc0002625a0}, 0xc00019ac00, 0xc000070660, ...})
	github.com/evanw/esbuild/internal/bundler/bundler.go:393 +0x2fbc
created by github.com/evanw/esbuild/internal/bundler.(*scanner).maybeParseFile
	github.com/evanw/esbuild/internal/bundler/bundler.go:1360 +0xaaa

goroutine 52 [chan receive]:
main.(*serviceType).sendRequest(0xc0000a1da0, {0x8ec5a0, 0xc00065ab70})
	github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0xfa
main.(*serviceType).convertPlugins.func2.3({{0xc000652700, 0x5}, {0xc000434780, 0x47}, {0x959da6, 0x4}, {0xc000434780, 0x38}, 0x2, {0x0, ...}})
	github.com/evanw/esbuild/cmd/esbuild/service.go:966 +0x785
github.com/evanw/esbuild/pkg/api.(*pluginImpl).onResolve.func1({{0xc000652700, 0x5}, {0xc000434780, 0x38}, {0x0, 0x0}, {{0xc000434780, 0x47}, {0x959da6, 0x4}, ...}, ...})
	github.com/evanw/esbuild/pkg/api/api_impl.go:1883 +0x215
github.com/evanw/esbuild/internal/bundler.RunOnResolvePlugins({_, _, _}, _, {0xc0001a0000, 0xc000190048, 0xc000190060, 0xc0001a2000, 0x5, 0xc0002625a0}, ...)
	github.com/evanw/esbuild/internal/bundler/bundler.go:793 +0x8d5
github.com/evanw/esbuild/internal/bundler.parseFile({{0xa3ae58, 0xc0001a2020}, {0xc0001a0000, 0xc000190048, 0xc000190060, 0xc0001a2000, 0x5, 0xc0002625a0}, 0xc00019ac00, 0xc000070660, ...})
	github.com/evanw/esbuild/internal/bundler/bundler.go:393 +0x2fbc
created by github.com/evanw/esbuild/internal/bundler.(*scanner).maybeParseFile
	github.com/evanw/esbuild/internal/bundler/bundler.go:1360 +0xaaa

goroutine 23 [chan receive]:
github.com/evanw/esbuild/internal/bundler.(*scanner).scanAllDependencies(0xc00019a800)
	github.com/evanw/esbuild/internal/bundler/bundler.go:1832 +0x232
github.com/evanw/esbuild/internal/bundler.ScanBundle({_, _, _, _, _, _}, {_, _}, _, {0xc000212680, ...}, ...)
	github.com/evanw/esbuild/internal/bundler/bundler.go:1220 +0xb3c
github.com/evanw/esbuild/pkg/api.rebuildImpl({0xc000070660, {0xc000010390, 0x1, 0x1}, {0x0, 0x0, 0x0}, {0x0, 0x1, 0x2, ...}, ...}, ...)
	github.com/evanw/esbuild/pkg/api/api_impl.go:1418 +0x226
github.com/evanw/esbuild/pkg/api.(*internalContext).rebuild(_)
	github.com/evanw/esbuild/pkg/api/api_impl.go:961 +0x2a5
github.com/evanw/esbuild/pkg/api.(*internalContext).Rebuild(0xc000025200?)
	github.com/evanw/esbuild/pkg/api/api_impl.go:1022 +0x58
main.(*serviceType).handleIncomingPacket.func5()
	github.com/evanw/esbuild/cmd/esbuild/service.go:293 +0xd5
created by main.(*serviceType).handleIncomingPacket
	github.com/evanw/esbuild/cmd/esbuild/service.go:290 +0x118d

goroutine 37 [chan receive]:
main.(*serviceType).sendRequest(0xc0000a1da0, {0x8ec5a0, 0xc000166390})
	github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0xfa
main.(*serviceType).convertPlugins.func2.3({{0xc00060eb08, 0x5}, {0xc0001bb0e0, 0x53}, {0x959da6, 0x4}, {0xc0001bb0e0, 0x37}, 0x3, {0x0, ...}})
	github.com/evanw/esbuild/cmd/esbuild/service.go:966 +0x785
github.com/evanw/esbuild/pkg/api.(*pluginImpl).onResolve.func1({{0xc00060eb08, 0x5}, {0xc0001bb0e0, 0x37}, {0x0, 0x0}, {{0xc0001bb0e0, 0x53}, {0x959da6, 0x4}, ...}, ...})
	github.com/evanw/esbuild/pkg/api/api_impl.go:1883 +0x215
github.com/evanw/esbuild/internal/bundler.RunOnResolvePlugins({_, _, _}, _, {0xc0001a0000, 0xc000190048, 0xc000190060, 0xc0001a2000, 0x5, 0xc0002625a0}, ...)
	github.com/evanw/esbuild/internal/bundler/bundler.go:793 +0x8d5
github.com/evanw/esbuild/internal/bundler.parseFile({{0xa3ae58, 0xc0001a2020}, {0xc0001a0000, 0xc000190048, 0xc000190060, 0xc0001a2000, 0x5, 0xc0002625a0}, 0xc00019ac00, 0xc000070660, ...})
	github.com/evanw/esbuild/internal/bundler/bundler.go:393 +0x2fbc
created by github.com/evanw/esbuild/internal/bundler.(*scanner).maybeParseFile
	github.com/evanw/esbuild/internal/bundler/bundler.go:1360 +0xaaa

system details

Packages:

node_modules/astro: v2.1.7
node_modules/@astrojs/react: v2.1.0
node_modules/react: v18.2.0
node_modules/react-dom: v18.2.0

SSR
N/A

Package Manager
npm

OS
PopOS/Ubuntu 22.04

Browser
Firefox 111

GrantBirki · 2023-03-27T18:16:05Z

Yeah something definitely seems up with React in Astro projects. cc @matthewp

GrantBirki · 2023-03-27T21:54:22Z

@matthewp or @ematipico - If it helps at all, I would be happy to hop in a Discord/zoom/call to troubleshoot and show you what I'm experiencing. I would then be happy to write up our findings in this issue so they are documented publicly and others can follow along with our results.

ematipico · 2023-03-28T13:00:40Z

@GrantBirki I checked with the team, here's the findings:

the error log X [ERROR] The build was canceled is harmless; it comes from vite. It was fixed upstream and I was confirmed that it wouldn't break anything in your code;
astro check is the equivalent of running tsc. A program would still work even if it has type errors. The reason for not checking for types during the build is intended because the command might be slower than astro build. I would suggest to review your github actions and add astro check before the build

@kodumbeats, I suggest opening a different issue. Your problem is unrelated to this issue.

kodumbeats · 2023-03-28T13:10:38Z

@ematipico Thanks for reviewing! I found a more relevant ticket (6306) that I missed on my first pass through open issues 🙈 so I'll move my report there.

GrantBirki · 2023-03-29T12:06:14Z

the error log X [ERROR] The build was canceled is harmless; it comes from vite. It was fixed upstream and I was confirmed that it wouldn't break anything in your code;

@ematipico Do you have any reference to this or links?

It would be nice if there was a way to suppress this error if it is indeed "harmless" because I don't like the color "red" in my production pipeline unless there is something actually going wrong 😄

ematipico · 2023-03-29T14:12:52Z

the error log X [ERROR] The build was canceled is harmless; it comes from vite. It was fixed upstream and I was confirmed that it wouldn't break anything in your code;

@ematipico Do you have any reference to this or links?

It would be nice if there was a way to suppress this error if it is indeed "harmless" because I don't like the color "red" in my production pipeline unless there is something actually going wrong 😄

@bluwy would you mind chiming in?

bluwy · 2023-03-29T14:17:44Z

@GrantBirki it was fixed in vitejs/vite#12358 and should be gone when you upgrade Astro's internal Vite dep to v4.2. You can run npm update vite in your project to bump it.

GrantBirki · 2023-03-29T14:58:00Z

@bluwy Thank you for the suggestion! I checked out the PR you linked and it looks like that is exactly what I need to suppress the error.

It looks like vite is set to ^4.1.2 all throughout the Astro repo. Once this gets updated, I would imagine that these wonky errors will disappear for all users on the latest version of Astro

bluwy · 2023-03-29T15:22:02Z

Yep! Usually we bump the internal Vite version when we rely on a certain features on that version. I think npm/pnpm would pull the latest version of Vite by default, as long as it respects the semver range.

GrantBirki · 2023-03-29T16:22:12Z

npm is not pulling the new version down so I'm guessing it has to be bumped in Astro as that is where the dependency is coming from 🤷

onyoo · 2023-05-04T18:04:48Z

This issue doesn't happen on npm run astro check but has similar output. Maybe it's related? react-syntax-highlighter/react-syntax-highlighter#519

GrantBirki · 2023-05-04T21:43:25Z

FWIW this error doesn't appear for me any more on the latest version of astro so at least for me this is resolved.

matthewp added the needs repro Issue needs a reproduction label Mar 24, 2023

matthewp added - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs repro Issue needs a reproduction labels Mar 27, 2023

ematipico self-assigned this Mar 27, 2023

ematipico closed this as not planned Won't fix, can't repro, duplicate, stale Mar 28, 2023

mauricekleine mentioned this issue May 8, 2023

[Bug]: Fails to start using Vite v4.3 (esbuild error) storybookjs/storybook#22253

Closed

mooreds mentioned this issue Jul 29, 2023

Scary error message with build that doesn't affect the build FusionAuth/fusionauth-site#2375

Open

mkilpatrick mentioned this issue Jan 12, 2024

The build was canceled error vitejs/vite#15594

Closed

7 tasks

AriPerkkio mentioned this issue Oct 23, 2024

Getting the message "Error the build was canceled" immediately after setup stackblitz/tutorialkit#390

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Astro Check Errors - Only when using React #6631

Astro Check Errors - Only when using React #6631

GrantBirki commented Mar 22, 2023

matthewp commented Mar 24, 2023

kodumbeats commented Mar 27, 2023

GrantBirki commented Mar 27, 2023

GrantBirki commented Mar 27, 2023

ematipico commented Mar 28, 2023

kodumbeats commented Mar 28, 2023

GrantBirki commented Mar 29, 2023

ematipico commented Mar 29, 2023

bluwy commented Mar 29, 2023

GrantBirki commented Mar 29, 2023

bluwy commented Mar 29, 2023

GrantBirki commented Mar 29, 2023

onyoo commented May 4, 2023

GrantBirki commented May 4, 2023

Astro Check Errors - Only when using React #6631

Astro Check Errors - Only when using React #6631

Comments

GrantBirki commented Mar 22, 2023

What version of astro are you using?

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

What package manager are you using?

What operating system are you using?

What browser are you using?

Describe the Bug

Additional Details

Link to Minimal Reproducible Example

Participation

matthewp commented Mar 24, 2023

kodumbeats commented Mar 27, 2023

GrantBirki commented Mar 27, 2023

GrantBirki commented Mar 27, 2023

ematipico commented Mar 28, 2023

kodumbeats commented Mar 28, 2023

GrantBirki commented Mar 29, 2023

ematipico commented Mar 29, 2023

bluwy commented Mar 29, 2023

GrantBirki commented Mar 29, 2023

bluwy commented Mar 29, 2023

GrantBirki commented Mar 29, 2023

onyoo commented May 4, 2023

GrantBirki commented May 4, 2023

What version of `astro` are you using?