search

remix-run / remix

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

Integration with PandaCSS #7103

Open ranyefet opened 11 months ago

ranyefet commented 11 months ago

What version of Remix are you using?

Latest

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

Steps to Reproduce

I opened same bug on PandaCSS repo but they closed it and suggested I will try here as it seems to be related to Remix.

https://github.com/chakra-ui/panda/issues/1114

To reproduce follow this guide https://panda-css.com/docs/installation/remix

Expected Behavior

I should not see 404 error after installing PandaCSS.

Actual Behavior

Getting this error when navigating to localhost:3000

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/ranyefet/Code/filecraft/node_modules/@remix-run/router/router.ts:4132:5)
      at Object.query (/Users/ranyefet/Code/filecraft/node_modules/@remix-run/router/router.ts:2631:19)
      at handleDocumentRequestRR (/Users/ranyefet/Code/filecraft/node_modules/@remix-run/server-runtime/dist/server.js:170:35)
      at requestHandler (/Users/ranyefet/Code/filecraft/node_modules/@remix-run/server-runtime/dist/server.js:61:24)
      at /Users/ranyefet/Code/filecraft/node_modules/@remix-run/express/dist/server.js:39:28
}
No routes matched location "/app/%3Cno%20source%3E"

After investigating the issue I found this in the generated source map for index.css

{
  "version": 3,
  "sources": ["../../../app/index.css", "../../../app/<no source>"],
  "sourcesContent": ["@layer reset, base, tokens, recipes, utilities;\n", null],
  "mappings": "...",
  "names": []
}

You can see the sources property have some reference to "../../../app/<no source>" not sure how that got there.

Found this issue that mention the same error.

CryptoGraffe commented 3 months ago

I have a related error, I get this after following the installation guide on the panda site - my stuff "works" but I get an error in the console on every page load:

12:02:26 AM [vite] Internal server error: URI malformed
      at decodeURI (<anonymous>)
      at viteTransformMiddleware (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:63530:19)
      at call (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42866:7)
      at next (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42810:5)
      at viteServePublicMiddleware (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:53495:20)
      at call (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42866:7)
      at next (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42810:5)
      at viteHMRPingMiddleware (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:64817:13)
      at call (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42866:7)
      at next (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42810:5)
      at next (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42788:14)
      at viteCachedTransformMiddleware (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:63514:9)
      at call (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42866:7)
      at next (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42810:5)
      at cors (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:43338:7)
      at file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:43374:17
      at originCallback (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:43364:15)
      at file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:43369:13
      at optionsCallback (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:43349:9)
      at corsMiddleware (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:43354:7)
      at call (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42866:7)
      at next (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42810:5)
      at Function.handle (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42813:3)
      at Server.app (file:///Users/user/dev/project/node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:42678:37)
      at Server.emit (node:events:518:28)
      at parserOnIncoming (node:_http_server:1143:12)
      at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17) (x3)

It looks like vite is trying to load the contents of the index.css file as a url:

   return async function viteTransformMiddleware(req, res, next) {
        if (req.method !== 'GET' || knownIgnoreList.has(req.url)) {
            return next();
        }
        let url;
        console.log(req.url);
        try {
            url = decodeURI(removeTimestampQuery(req.url)).replace(NULL_BYTE_PLACEHOLDER, '\0');
        }

I added the console.log above and I get this (two distinct lines):

/app/styles/index.css

/@layer%20reset,%20base,%20tokens,%20recipes,%20utilities;@layer%20reset%20%7B%20%20html%20%7B%20%20%20%20--font-fallback:%20ui-sans-serif,%20system-ui,%20-apple-system,%20BlinkMacSystemFont,%20'Segoe%20UI',%20Roboto,%20'Helvetica%20Neue',%20Arial,%20'Noto%20Sans',%20sans-serif,%20'Apple%20Color%20Emoji',%20'Segoe%20UI%20Emoji',%20'Segoe%20UI%20Symbol',%20'Noto%20Color%20Emoji';%20%20%20%20-webkit-text-size-adjust:%20100%;%20%20%20%20-webkit-font-smoothing:%20antialiased;%20%20%20%20-moz-osx-font-smoothing:%20grayscale;%20%20%20%20-moz-tab-size:%204;%20%20%20%20tab-size:%204;%20%20%20%20line-height:%201.5;%20%20%20%20font-family:%20var(--global-font-body,%20var(--font-fallback));%7D%20%20*%20%7B%20%20%20%20margin:%200px;%20%20%20%20padding:%200px;%20%20%20%20font:%20inherit;%7D%20%20*,*::before,*::after%20%7B%20%20%20%20box-sizing:%20border-box;%20%20%20%20border-width:%200px;%20%20%20%20border-style:%20solid;%20%20%20%20border-color:%20var(--global-color-border,%20currentColor);%7D%20%20hr%20%7B%20%20%20%20height:%200px;%20%20%20%20color:%20inherit;%20%20%20%20border-top-width:%201px;%7D%20%20body%20%7B%20%20%20%20height:%20100%;%7D%20%20img%20%7B%20%20%20%20border-style:%20none;%7D%20%20img,svg,video,canvas,audio,iframe,embed,object%20%7B%20%20%20%20display:%20block;%20%20%20%20vertical-align:%20middle;%7D%20%20img,video%20%7B%20%20%20%20max-width:%20100%;%20%20%20%20height:%20auto;%7D%20%20p,h1,h2,h3,h4,h5,h6%20%7B%20%20%20%20overflow-wrap:%20break-word;%7D%20%20ol,ul%20%7B%20%20%20%20list-style:%20none;%7D%20%20code,kbd,pre,samp%20%7B%20%20%20%20font-size:%201em;%7D%20%20button,[type='button'],[type='reset'],[type='submit']%20%7B%20%20%20%20-webkit-appearance:%20button;%20%20%20%20background-color:%20var(--colors-transparent);%20%20%20%20background-image:%20none;%7D%20%20button,input,optgroup,select,textarea%20%7B%20%20%20%20color:%20inherit;%7D%20%20button,select%20%7B%20%20%20%20text-transform:%20none;%7D%20%20table%20%7B%20%20%20%20text-indent:%200px;%20%20%20%20border-collapse:%20collapse;%20%20%20%20border-color:%20inherit;%7D%20%20input::placeholder,textarea::placeholder%20%7B%20%20%20%20opacity:%201;%20%20%20%20color:%20var(--global-color-placeholder,%20

This is what I have in my root.tsx:

import styles from "~/styles/index.css";

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

I followed this guide: https://panda-css.com/docs/installation/remix

CryptoGraffe commented 3 months ago

Adding ?url seems to fix it:

import styles from "~/styles/index.css?url";
AnthonY-Dole commented 3 months ago

Adding ?url seems to fix it:

import styles from "~/styles/index.css?url";

And you can just do that: export const links = () => { return [ { rel: "stylesheet", href: styles } ]; } Because "cssBundleHref" is only useful when using the Remix Classic Compiler