Hanging indefinitely when build fails

[excid3]

Hey there! I was trying this out today and everything seems to work great.

The only thing I noticed was that if we were to run esbuild and watch, if we introduce a typo in the CSS, the watcher hangs forever will no longer rebuild.

Here's logs from a successful first build, introducnig an invalid line of CSS, the build error, and no further rebuilds.

± yarn run build --watch
yarn run v1.22.11
$ node ./esbuild.config.js --watch

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
[watch] build finished
 > app/javascript/application.js:5:7: error: [plugin: postcss2] expected "}".
   ╷
10 │   }
   │    ^
   ╵
  app/javascript/stylesheets/application.scss 10:4  root stylesheet
     5 │ import "./stylesheets/application.scss"
       ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   node_modules/esbuild-plugin-postcss2/dist/index.js:64:10: note: This error came from the "onResolve" callback registered here
    64 │     build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
       ╵           ~~~~~~~~~
    at setup (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild-plugin-postcss2/dist/index.js:64:11)
    at handlePlugins (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:736:23)
    at Object.buildOrServe (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1024:7)
    at /Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1756:17
    at new Promise (<anonymous>)
    at Object.build (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1755:14)
    at Object.build (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1631:51)
    at Object.<anonymous> (/Users/chris/code/tailwind-jsbuilding-example/esbuild.config.js:35:9)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)

[watch] build failed Error: Build failed with 1 error:
app/javascript/application.js:5:7: error: [plugin: postcss2] expected "}".
   ╷
10 │   }
   │    ^
   ╵
  app/javascript/stylesheets/application.scss 10:4  root stylesheet
    at failureErrorWithLog (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1451:15)
    at /Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1192:39
    at runOnEndCallbacks (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:921:63)
    at /Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:1189:17
    at handleRequest (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:673:15)
    at handleIncomingPacket (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:699:7)
    at Socket.readFromStdout (/Users/chris/code/tailwind-jsbuilding-example/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:309:12)
    at readableAddChunk (_stream_readable.js:284:9) {
  errors: [
    {
      detail: [Error],
      location: [Object],
      notes: [Array],
      pluginName: 'postcss2',
      text: 'expected "}".\n' +
        '   ╷\n' +
        '10 │   }\n' +
        '   │    ^\n' +
        '   ╵\n' +
        '  app/javascript/stylesheets/application.scss 10:4  root stylesheet'
    }
  ],
  warnings: []
}

[Spone]

Hi @excid3, did you find a solution to this by any chance?

[excid3]

I don't remember. I don't use this anymore.

[Spone]

How do you respond so fast? :laughing: Thanks for taking the time! If you still have a similar setup with esbuild+postcss, can you recommend an alternative package?

[excid3]

LOL! I am using the Tailwind CLI now, so I don't have an alternative to suggest unfortunately.

[FlafyDev]

How do you respond so fast? laughing Thanks for taking the time! If you still have a similar setup with esbuild+postcss, can you recommend an alternative package?

maybe this, https://github.com/g45t345rt/esbuild-style-plugin (i never used it so idk)

[Spone]

Thank you @FlafyDev, switching to the package you recommended fixes the issue!