Webpack: "ERROR: [h3] write EPIPE"

[kolessios]

Version

• @nuxtjs/tailwindcss: ^5.0.4
• nuxt: 3.0.0-rc.2
• @nuxt/webpack-builder: ^3.0.0-rc.2

Reproduction Link

https://codesandbox.io/s/nostalgic-snow-5m605u

Steps to reproduce

• npx nuxi init nuxt-app
• cd nuxt-app
• yarn install
• yarn add --dev @nuxt/webpack-builder @nuxtjs/tailwindcss
• Add builder: "webpack" to nuxt.config.ts
• Add modules: ["@nuxtjs/tailwindcss"] to nuxt.config.ts
• yarn dev
• Open project url

What is Expected?

It should work without problems displaying the project content and having tailwindcss support.

What is actually happening?

The project is not built and the following errors are displayed:

Terminal:

ℹ Merging Tailwind config from ~/tailwind.config.js  nuxt:tailwindcss 14:17:12
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/  nuxt:tailwindcss 14:17:12
✔ Vite server built in 3243ms                                         14:17:13
✔ Nitro built in 2753 ms                                        nitro 14:17:18
Nuxt CLI v3.0.0-rc.2                                                  14:17:18
                                                                      14:17:18
  > Local:    http://localhost:3000/
  > Network:  http://192.168.203.50:3000/

<i> [webpack-dev-middleware] wait until bundle finished: /

 ERROR  [h3] write EPIPE                                              14:20:33

  at afterWriteDispatched (internal/stream_base_commons.js:156:25)
  at writeGeneric (internal/stream_base_commons.js:147:3)
  at Socket._writeGeneric (net.js:798:11)
  at Socket.connect (net.js:780:12)
  at Object.onceWrapper (events.js:519:28)
  at Socket.emit (events.js:412:35)
  at Socket.emit (domain.js:475:12)
  at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1145:10)

Web browser:

{
  "statusCode": 500,
  "statusMessage": "H3Error",
  "stack": []
}

Notes

• Setting builder to vite makes everything work again. (But I need webpack)

[galaxy79]

@kolessios is there a workaround for this issue ? I'm also facing the same issue with nuxt3-rc3

[Javierieh]

@kolessios Your logs indicate that "Vite" is being used. Did you end up making it work with vite?

Faced similar problems with webpack builder. Ended up just importing all the dependencies for tailwindcess manually (it looks like this module is just a wrapper around some npm packages and config parameters anyway)

Followed steps depicted https://stackoverflow.com/questions/70302520/nuxtjs-v3-and-tailwindcss-v3-postcss8-not-compatible

But made sure to remove this statement:

'./nuxt.config.{js,ts}', After that it worked without problem (not even sure why we need to include nuxt.config to scan for css classes?) You probably dont need this either:

'./assets/**/*.{vue,js,css}'

[Cellarion]

Hi, I have a similar error : This is the case when I run the app in docker-compose hosted on mac or linux machine

  ERROR  [h3] [unhandled] write EPIPE
 
   at createError (node_modules/h3/dist/index.mjs:196:15)
   at nodeHandler (node_modules/h3/dist/index.mjs:386:21)
   at processTicksAndRejections (node:internal/process/task_queues:96:5)

In browser :

{
  "statusCode": 500,
  "statusMessage": "Internal Server Error",
  "stack": []
}

It occurs when the app is building, and it remains a window with the last app running from the last docker-compose up, and at random moments when I use the application. In terms of libraries, I use tailwindcss and many other dependencies with vite builder

[ineshbose]

Closing this issue as it is believed to be resolved/stale now - please feel free to comment if it is still an issue in the latest version of the module.

[vietanhbui]

I have same error when using upload image of ant design vue and nuxt 3