Calendar styles not loaded on Vercel cloud #2493

PrimozRome · 2024-09-26T20:52:44Z

PrimozRome
Sep 26, 2024

For some reason my styles are not loaded in production (Vercel). They are wroking fine locally:

But in production on Vercel not. Check here the calendar: https://balkancampers.vercel.app/campervans/bibita

I am importing all styles in my NextJS's _app.js file like this:

import "react-day-picker/style.css";
import "../public/styles/index.css";

import { GoogleTagManager } from "@next/third-parties/google";
import Layout from "@/components/layout/Layout.js";
import { ChakraProvider } from "@chakra-ui/react";
import theme from "../theme/index.js";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider resetCSS theme={theme}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
      <GoogleTagManager gtmId="GTM-5VRD865" />
    </ChakraProvider>
  )
}

export default MyApp;

I was following this guide https://daypicker.dev/docs/styling. Everything works in local dev. environment but when deployed to Vercel the styles are not loaded.

Tevuu · 2024-09-27T12:47:56Z

Tevuu
Sep 27, 2024

Hi! I have exactly the same problem. Locally all styles work correctly, but as soon as you install the site, everything immediately crashes. This problem also works if you clone the repository and run the project, all styles also crash.

0 replies

gpbl · 2024-09-27T13:21:33Z

gpbl
Sep 27, 2024
Maintainer

@PrimozRome, could you check if the issue occurs when running the built project locally?

Vercel might not be building CSS imported from a package. You could try copying the CSS from node_modules to a relative directory to see if that resolves it.

This looks like a Vercel issue, so please reach out to their support or provide us with a way to quickly reproduce the problem. Unfortunately, I can’t spend much time on issues without a clear reproduction path...

4 replies

PrimozRome Sep 28, 2024
Author

I copied CSS from node_modules into my public/styles -> same result. Working locally, not working on Vercel. Very strange! Especially becasue I load another CSS from the same path and that one is loaded!

Here is the CSS link: https://balkancampers.vercel.app/styles/daypicker.css

This is how I include it in _app.js

import "../public/styles/daypicker.css";
import "../public/styles/index.css";

I built application locally - same situation

How would you like me to get you a clear reproduction path? I know you are busy but I can send you the code via github?

BTW, Vercel is building CSS imported from a package... I have used other packages, no problems. I will try to reach out to Vercel if they can help.

PrimozRome Sep 28, 2024
Author

I did some additional tests.

For some reason all the the rdp- CSS classes that Day picker module is using aren't added into the CSS file when app is built.

If I use one of the rdp- classes from the module in my markup, that only that class is added into the built CSS file.

So at this moment I have zero clue why is that!!

PrimozRome Sep 28, 2024
Author

I think it is the same situation on the Code Sandbox. I did a quick demo with default NextJS template. Here is the link:

https://codesandbox.io/p/devbox/s6g5yk

No styles are loaded here as well...

PrimozRome Sep 28, 2024
Author

ANOTHER UPDATE

I found a solution that works. Loaded Day Picker CSS file from jsDeliver in _document.js file using <link />. Not the ideal solution but it works.

import Document, { Html, Head, Main, NextScript } from "next/document";
import { ColorModeScript } from '@chakra-ui/react'
import theme from '/theme'

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="sl">
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
          <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
          <link href="https://cdn.jsdelivr.net/npm/[email protected]/src/style.min.css" rel="stylesheet" />
        </Head>
        <body>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

gpbl · 2024-09-28T21:42:21Z

gpbl
Sep 28, 2024
Maintainer

@PrimozRome thanks for your updates and for the code sandbox. I couldn't replicate the issue there either;

https://codesandbox.io/p/sandbox/day-picker-next-js-p4zzzy

It looks like there's something in the CSS that Vercel doesn't like.

Could it be the css variables?

I copied CSS from node_modules into my public/styles -> same result.

Interesting...

Try by finding or removing the code that could break the build.
Investigate the built CSS: what is in there related to daypicker
Try to use the css module: https://daypicker.dev/docs/styling#importing-the-css-module

0 replies

Uh oh!

Calendar styles not loaded on Vercel cloud #2493

Uh oh!

Uh oh!

PrimozRome Sep 26, 2024

Replies: 3 comments · 4 replies

Uh oh!

Tevuu Sep 27, 2024

Uh oh!

gpbl Sep 27, 2024 Maintainer

Uh oh!

Uh oh!

PrimozRome Sep 28, 2024 Author

Uh oh!

Uh oh!

PrimozRome Sep 28, 2024 Author

Uh oh!

Uh oh!

PrimozRome Sep 28, 2024 Author

Uh oh!

Uh oh!

PrimozRome Sep 28, 2024 Author

Uh oh!

gpbl Sep 28, 2024 Maintainer

PrimozRome
Sep 26, 2024

Replies: 3 comments 4 replies

Tevuu
Sep 27, 2024

gpbl
Sep 27, 2024
Maintainer

PrimozRome Sep 28, 2024
Author

PrimozRome Sep 28, 2024
Author

PrimozRome Sep 28, 2024
Author

PrimozRome Sep 28, 2024
Author

gpbl
Sep 28, 2024
Maintainer