Tailwind SourceMap/EsBuild Issue

[asciant]

Have you experienced this bug with the latest version of the template?

Yes

Steps to Reproduce

1. Create a new app npx create-remix@latest --template remix-run/indie-stack
2. Run the dev server npm run dev
3. Open the Chrome Dev Tools (I also tried Firefox) and go to the Sources tab.
4. Expand the app group under localhost:3000
5. Observe the file <no source> - it appears to be a stylesheet

There will also be an error in the Terminal that you used to run npm run dev:

No routes matched location "/app/%3Cno%20source%3E"
GET /app/%3Cno%20source%3E 404 - - 6.741 ms
GET / 200 - - 5.656 ms
ErrorResponse {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/app/%3Cno%20source%3E"',
  error: Error: No route matches URL "/app/%3Cno%20source%3E"
      at getInternalRouterError (/Users/asciant/Projects/test/my-remix-app/node_modules/@remix-run/router/router.ts:4132:5)
      at Object.query (/Users/asciant/Projects/test/my-remix-app/node_modules/@remix-run/router/router.ts:2631:19)
      at handleDocumentRequestRR (/Users/asciant/Projects/test/my-remix-app/node_modules/@remix-run/server-runtime/dist/server.js:170:35)
      at requestHandler (/Users/asciant/Projects/test/my-remix-app/node_modules/@remix-run/server-runtime/dist/server.js:61:24)
      at /Users/asciant/Projects/test/my-remix-app/node_modules/@remix-run/express/dist/server.js:39:28
}
No routes matched location "/app/%3Cno%20source%3E"
GET /app/%3Cno%20source%3E 404 - - 3.922 ms

This seems to relate to the Tailwind Source Map that is created by EsBuild (I assume).

 8 -rw-r--r--@  1 asciant  staff   3293 23 Jul 13:55 tailwind-H5XCNLFK.css.map
32 -rw-r--r--@  1 asciant  staff  15532 23 Jul 13:55 tailwind-HIGRSUZW.css

The contents of tailwind-H5XCNLFK.css.map appears to also include a reference to the <no source> file, which may then result in the error:

{
  "version": 3,
  "sources": ["../../../app/tailwind.css", "../../../app/<no source>"],
  "sourcesContent": ["@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", null],
  "mappings": ";AAAA;;;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA;;;;AAAA;;;;;;;;;AAAA;;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAAA;;AAAA;;AAAA;;;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;;;;;;;;;;;;;AAAA;;AAAA;AAAA;;;AAAA;AAAA;;AAAA;;;AAAA;AAAA;;;AAAA;AAAA;;AAAA;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;AAAA;;AAAA;AAAA;;AAAA;;;;;;;;AAAA;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;;AAAA;AAFA;;AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAFA;;AAEA;AAFA;;AAEA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAFA;;AAEA;AAFA;;AAEA;AAFA;;AAEA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;;;;AAAA;AAAA;AAAA;AAAA;;;;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;;;;;;;AAAA;;;;;;;;;;;;AAAA;;;;;;;;;;;;;AAAA;AAAA;;AAFA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;;AAAA;AAAA;AAAA;;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;;",
  "names": []
}

If you remove the Tailwind import from root.tsx file, it doesn't build these files and that removes the error from the build.

import stylesheet from "~/tailwind.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

This was a clean install of the Indie Stack. I noticed the issue on a few other apps that were started on the Indie stack some time ago, and tried a clean copy to see if it was something that I had accidentally done. It appears to be something else however.

Node 18

Expected Behavior

I would expect that the file didn't get included in the bundle. Although, I'm not sure what it does or if it will cause any major problems, beyond some annoying errors.

Actual Behavior

It is included and an error is thrown when accessing the DevTools.

[hernanponcetta]

I've started encountering the same error after updating the Indie Stack from version 1.7 to 2.8. Any updates on this?

[csalvador58]

If your using vite, check to make sure your css imports have the ?url syntax. Seemed to fix my issue. https://remix.run/docs/en/main/future/vite#fix-up-css-imports-referenced-in-links

[Rioba-Ian]

If your using vite, check to make sure your css imports have the ?url syntax. Seemed to fix my issue. https://remix.run/docs/en/main/future/vite#fix-up-css-imports-referenced-in-links

Yeah, this solved my issue, if anyone else encounters this is how my root.tsx file looks after creating a remix app from the npx create-remix@latest, in the root.tsx

import {
 Links,
 LiveReload,
 Meta,
 Outlet,
 Scripts,
 ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";

import styles from "./tailwind.css?url";

export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];

export function Layout({ children }: { children: React.ReactNode }) {
 return (
  <html lang="en">
   <head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <Meta />
    <Links />
   </head>
   <body>
    {children}
    <ScrollRestoration />
    <Scripts />
    <LiveReload />
   </body>
  </html>
 );
}

export default function App() {
 return <Outlet />;
}

Hope this helps.

[ainzizou]

@Rioba-Ian Thanks that solved my issue too.

[sostenesapollo]

import styles from "./tailwind.css?url";