remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
29.78k stars 2.51k forks source link

`npm run dev` TailwindCSS watch not working on DEV with 1.18.0 #6705

Closed huyb1991 closed 1 year ago

huyb1991 commented 1 year ago

What version of Remix are you using?

1.18.0

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

  1. Upgrade version from 1.17.1 for remix package
  2. Remove node_modules then re-install
  3. Run npm run dev

This is not build new css file as hot reload, throw error for can't mapping CSS map file:

💿 File changed: app/components/TopPerformance.tsx
💿 Rebuilding...
💿 Rebuilt in 780ms
GET / 200 - - 119.703 ms
ErrorResponse {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/build/_assets/global-medium-UHEJVJF7.css.map"',
  error: Error: No route matches URL "/build/_assets/global-medium-UHEJVJF7.css.map"
      at getInternalRouterError (/Users/app/node_modules/@remix-run/router/router.ts:4084:5)

css-map-file

Expected Behavior

Should do hot reload for Taildwindcss, and add correct CSS map file

Actual Behavior

Didn't run taildwincss --watch. No hot reload, update styles on dev env

JClackett commented 1 year ago

Yep, was about to create an issue for this exact thing. I also get it for loading custom css fonts:

import poppins800 from "@fontsource/poppins/800.css"
export const links: LinksFunction = () => {
  return [
     { rel: "stylesheet", href: poppins800 },
  ]
}
ErrorResponse {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/build/_assets/poppins-latin-900-normal-RIGQSGVS.woff"',
  error: Error: No route matches URL "/build/_assets/poppins-latin-900-normal-RIGQSGVS.woff"
      at getInternalRouterError (/<pwd>/node_modules/@remix-run/router/router.ts:4084:5)
      at Object.query (/<pwd>/node_modules/@remix-run/router/router.ts:2589:19)
      at handleDocumentRequestRR (/<pwd>/node_modules/@remix-run/server-runtime/dist/server.js:163:35)
      at requestHandler (/<pwd>/node_modules/@remix-run/server-runtime/dist/server.js:61:24)
      at /<pwd>/node_modules/@remix-run/express/dist/server.js:39:28
}
No routes matched location "/build/_assets/poppins-latin-900-normal-RIGQSGVS.woff" 

Works fine on initial load then when saving a file it does all this

markdalgleish commented 1 year ago

@huyb1991 @JClackett I'm not able to manually reproduce the issues you mentioned. Could you share a minimal repro?

huyb1991 commented 1 year ago

@huyb1991 @JClackett I'm not able to manually reproduce the issues you mentioned. Could you share a minimal repro?

Thanks @markdalgleish ! I got issue, this come from migration missing some update, if I init new app with v.1.18.0, it works. I'm going to close this issue.

christopherpickering commented 1 year ago

@JClackett did you get the error to go away? I'm on remix 1.18.1 and get that error when adding in remix-image's css file.

JClackett commented 1 year ago

@christopherpickering yeah so I needed to use the new remix bundled-css package and not import them directly into the links function

christopherpickering commented 1 year ago

Ah ok cool thanks I will check that out 👍🏼 I appreciate the tip!