react-day-picker [Error] Failed to load resource (style.css.map)

Answered

Plott Hound posted this in #help-forum

Open in Discord

Plott HoundOP

2024-01-15T16:05:35.000Z

Hi i'm using https://react-day-picker.js.org/start in my next 14.0.4 app folder project and i'm getting an error every time a page re-renders that the style.css.map is not found.

import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

function Component() {
  return <DayPicker />;
}

it is in a client component and the css is loading fine and the component works perfectly but my console is spamming these errors.

should i be doing something special when importing the css?

I tested the lib in a fresh react vite ts and the error was not there.

Answered by Ray

I don't get error with fresh next project, how do you use it?

View full answer

88 Replies

Plott HoundOP

2024-01-18T12:20:30.000Z

bump

@Plott Hound Hi i'm using https://react-day-picker.js.org/start in my next 14.0.4 app folder project and i'm getting an error every time a page re-renders that the style.css.map is not found. import { DayPicker } from 'react-day-picker'; import 'react-day-picker/dist/style.css'; function Component() { return <DayPicker />; } it is in a client component and the css is loading fine and the component works perfectly but my console is spamming these errors. should i be doing something special when importing the css? I tested the lib in a fresh react vite ts and the error was not there.

2024-01-18T12:30:36.000Z

I don't get error with fresh next project, how do you use it?

Answer

@Ray I don't get error with fresh next project, how do you use it?

Plott HoundOP

2024-01-18T12:38:33.000Z

thanks for taking a look. i just tried it in a fresh project and also didn't get the warning

so it must be an issue in my code. I'll go back to the drawing board and figure it out since its specific to my code. its a huge file at this point so i'll spare all the gory details but it boils down to this

'use client'
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';
import './DayPicker.css'; // custom styles, makes no difference if i remove them.

// Server actions and states 

  return (
    <DayPicker
      mode="single"
      selected={selectedDate}
      onSelect={handleDateSelect}
      footer={footer}
      showOutsideDays 
      fixedWeeks
      disabled={disabledDays}
    />
  )

i'll start from scratch and figure out what is triggering it

just wanted to check if it was a common issue of importing the css like so
import 'react-day-picker/dist/style.css';

also its not happening in prod

2024-01-18T12:41:57.000Z

maybe try importing the style on the page

Plott HoundOP

2024-01-18T12:43:05.000Z

lemme try that now

the actual error is
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style.css.map, line 0)

2024-01-18T12:44:49.000Z

it show the error on page load?

do you see a 404 request in the dev console?

Plott HoundOP

2024-01-18T12:45:36.000Z

i tried it in the top level page.tsx of the page and get the same error.

the path its looking for is
http://localhost:3000/_next/static/css/app/(board-layout)/task/[id]/style.css.map which is clearly wrong

2024-01-18T12:47:00.000Z

lol

let me try importing there

you have this path app/(board-layout)/task/[id]/page.tsx right?

Plott HoundOP

2024-01-18T12:48:24.000Z

yeah thats the path that the date picker is running on

the style map is in node_modules/react-day-picker/dist/style.css.map

sorry if this is a really dumb question. i've not imported css in next like this before

in my code the import is import 'react-day-picker/dist/style.css';

which was just what the guide suggested

2024-01-18T12:49:52.000Z

yes it is how next import css

Plott HoundOP

2024-01-18T12:49:58.000Z

the css is loading fine and i can see its working. just a browser 404 for the style map in dev mode

2024-01-18T12:49:59.000Z

I still don't get error

Plott HoundOP

2024-01-18T12:50:14.000Z

ok clearly my code is shit. im gonna start over and stop wasting your time lol

2024-01-18T12:50:30.000Z

what url are you visiting and you get that error?

/ or /task/[id]?

Plott HoundOP

2024-01-18T12:50:56.000Z

http://localhost:3000/task/clrgnwoex00016y7zoamv9n4o

its in the dynamic route under task / [id]

which would correlate to the 404 from http://localhost:3000/_next/static/css/app/(board-layout)/task/[id]/style.css.map

did you try yours in a dynamic route and it worked?

2024-01-18T12:52:33.000Z

have you tried with disable cache?

Plott HoundOP

2024-01-18T12:52:39.000Z

lemme try

@Plott Hound did you try yours in a dynamic route and it worked?

2024-01-18T12:53:10.000Z

it works for me

but the path of the styles is

Plott HoundOP

2024-01-18T12:54:59.000Z

thanks for confirming. no difference with disable cache

2024-01-18T12:55:20.000Z

do you import the style on global.css?

Plott HoundOP

2024-01-18T12:55:49.000Z

my global.css is just

@tailwind base;
@tailwind components;
@tailwind utilities;

im importing the css in the page.tsx of the dynamic route
import 'react-day-picker/dist/style.css';
which is app/(board-layout)/task/[id]/page.tsx

2024-01-18T12:57:10.000Z

rm -rf .next

Plott HoundOP

2024-01-18T12:57:27.000Z

more like rm -rf / lol

lemme try

2024-01-18T12:57:58.000Z

rm -rf .next may work but Im sure rm -rf / will not work lol

Plott HoundOP

2024-01-18T12:58:53.000Z

nah that didnt do it. dude thank you so much for trying. there's clearly some bad code somewhere so im gonna start out fresh and see whats going on

its a massive app so hard to show you all the related code

2024-01-18T12:59:42.000Z

oh well

you could try import the style in css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "~react-day-picker/dist/style.css";

Plott HoundOP

2024-01-18T13:00:12.000Z

i'll let you know if i figure it out. weird that i dont get it in prod, just dev considering its a 404

@Ray you could try import the style in css css @tailwind base; @tailwind components; @tailwind utilities; @import "~react-day-picker/dist/style.css";

Plott HoundOP

2024-01-18T13:01:37.000Z

doing this and removing the other import gives:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (style.css.map, line 0)

404 on http://localhost:3000/_next/static/css/app/style.css.map

2024-01-18T13:02:48.000Z

maybe rm -rf node_modules and install again

"react-day-picker": "^8.10.0", ?

Plott HoundOP

2024-01-18T13:05:11.000Z

"react-day-picker": "^8.9.1",
and npm outdated shows no updates :/

2024-01-18T13:05:42.000Z

ðŸ‘€

Plott HoundOP

2024-01-18T13:06:22.000Z

updated it manually. now im on "react-day-picker": "^8.10.0", still getting the error lol

gonna try to setup a minimal repro and see whats going on

once again thank you so much for the help

2024-01-18T13:08:06.000Z

do you have anything in next.config.js?

Plott HoundOP

2024-01-18T13:08:47.000Z

also to clarify - if i remove this import 'react-day-picker/dist/style.css'; the 404 goes away so its definitely this import

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    images: {
        remotePatterns: [
          {
            protocol: 'https',
            hostname: 'avatars.githubusercontent.com',
            port: '',
          },
          {
            protocol: 'https',
            hostname: 'images.unsplash.com',
            port: '',
          },
        ]
      }
}

module.exports = nextConfig

not really

2024-01-18T13:09:42.000Z

try create a styles.css and import it

@Ray try create a styles.css and import it

Plott HoundOP

2024-01-18T13:10:10.000Z

sorry can you clarify?

not sure what you meant

2024-01-18T13:10:39.000Z

create a style.css on app/(board-layout)/task/[id]/style.css

and import it on the page

Plott HoundOP

2024-01-18T13:10:51.000Z

1 sec

yeah it works and i get no errors.

import './style.css'

2024-01-18T13:13:39.000Z

you see a request to page.css?v=xxxxx right?

Plott HoundOP

2024-01-18T13:15:29.000Z

in the network tab like this?

i just put !important on to check it works. no judgement! lol

omg its only happening in safari ðŸ¤¦â€â™‚ï¸

ffs

2024-01-18T13:21:12.000Z

lol

let me try on safari

I don't get error with safari

oh nm it does

Plott HoundOP

2024-01-18T13:22:54.000Z

i remember havign the same thing using react-bootstrap years ago

2024-01-18T13:22:56.000Z

it logged on the console but not on the network tab

Plott HoundOP

2024-01-18T13:24:49.000Z

i guess i just have to ignore it, or dont import the css and build it myself

thanks for the help mate. that was a journey ha!

2024-01-18T13:26:11.000Z

Plott HoundOP

2024-01-18T13:26:46.000Z

i dont see any solution other than ignoring or rewriting the css. i'll leave an issue on the day picker repo

ngl glad i dont have some underlying borked code that was causing this

Cape lion

2024-02-16T13:52:42.000Z

Hey @Plott Hound did you find any solution. I just wanted to try out react-day-picker but as ssoon as I add the css import import style from './day-picker.module.css'; I see a bunch of errors from my server.

@Cape lion Hey <@578864362882727958> did you find any solution. I just wanted to try out react-day-picker but as ssoon as I add the css import `import style from './day-picker.module.css';` I see a bunch of errors from my server.

Plott HoundOP

2024-02-16T13:53:26.000Z

What are your errors?

Cape lion

2024-02-16T13:54:37.000Z

Not realy related to pin point the issue. I use Next 14 app folder with trpc and as soon as I add the css import bunch of trpc call fail as Unauthenticated