panda: Windows: HMR doesn't work for a fresh Next.js project

Description

Creating a fresh Next.js with PandaCSS:

I receive a warning on compilation. It may be Windows only. There is a separate issue: #1783.
Styles don’t recompile. So I have to reboot the dev server every time I change styles.

Link to Reproduction

Windows only?

Steps to reproduce

Install via https://panda-css.com/docs/installation/nextjs
pnpm dev
Go to localhost:3000
Receive the following warning:

> next dev

   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000

 ✓ Ready in 4.2s
 ○ Compiling / ...
🐼 info [hrtime] Extracted in (8.99ms)
 ⚠ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/globals.css
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "C:/Users/boris/Projects/panda-nextjs/app"
 * "C:/Users/boris/Projects/panda-nextjs/node_modules/.pnpm/@pandacss+dev@0.23.0_typescript@5.3.3/node_modules/@pandacss/dev/dist/index.mjs"
 * "C:/Users/boris/Projects/panda-nextjs/pages"
 * and more ...

Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/globals.css
./app/globals.css
 ⚠ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/globals.css
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "C:/Users/boris/Projects/panda-nextjs/app"
 * "C:/Users/boris/Projects/panda-nextjs/node_modules/.pnpm/@pandacss+dev@0.23.0_typescript@5.3.3/node_modules/@pandacss/dev/dist/index.mjs"
 * "C:/Users/boris/Projects/panda-nextjs/pages"
 * and more ...

Also, go to page.tsx:

import { css } from '@/styled-system/css'

export default function Home() {
  return (
    <main className={css({bg: 'red'})}>Hello</main>
  )
}

Change red to green.
Panda still bundles the old color red. Since green wasn’t bundled, the background is now white.
To make it work, I have to pnpm dev again.

JS Framework

React (TS)

Panda CSS Version

0.23.0

Browser

N/A

Operating System

macOS
Windows
Linux

Additional Information

No response

About this issue

Original URL
State: closed
Created 6 months ago
Reactions: 6
Comments: 26 (3 by maintainers)

Most upvoted comments

I’m running into this issue on Windows as well and did a bit of digging through the various layers of webpack to see if I could find the root cause. It looks like it’s right here in NormalModule.js where it’s using a regex that doesn’t allow for forward slashes in absolute paths even though they’re valid in Windows.

From testing by hand-altering the files in my local node_modules a simple change to testing with isAbsolute from the node:path module would do the trick. However, there’s a comment from Tobias on a similar issue that makes me think a PR wouldn’t be easily accepted. 😅

mewdriller on Jan 12, 2024

not really, the only downside is that you lose the convenience of only running 1 process (your dev command) and instead having to run dev + pnpm panda -w

astahmer on Jan 7, 2024

@chrber04, you can make it work on the latest version by running panda --watch in parallel with next dev:
{ // package.json scripts
  "dev": "concurrently \"next dev\" \"panda --watch\"",
}
You need to clean the PostCSS config:
const postcssConfig = {
  plugins: {},
}

module.exports = postcssConfig
Also, modify your globals.css:
@import '../panda/system/styles.css'; /* double-check the path, it depends on your configuration */

Thank you so much, that did the job for me! And bonus points it seems to compile way faster now, which might just be the newer version but thanks all the same.

chrber04 on Jan 7, 2024

OK, I did some more digging, it looks like we can prevent this issue by making a couple of alterations in @pandacss/node. The gist of the changes is that we want to change out usages of pathe for node:path.

It seems counterintuitive because pathe is supposed to make things normalized for Windows, but from the webpack perspective it’s creating “invalid” absolute paths. Since both backslash and forward slash work work as path separators on windows it’s safe to use the webpack-friendly backslash version.

I’ve made the changes in my local node_modules directly and things are working properly. I’ll get started on a proper PR here in a bit.

mewdriller on Jan 13, 2024

sorry I should have made that clearer, this issue is specific to the @pandacss/postcss plugin so the CLI will always work just fine

And bonus points it seems to compile way faster now,

yes ! the CLI will always be better performance-wise than the postcss plugin (because we don’t control precisely how many times the postcss plugin will be called, it mostly depends on the host bundler (astro/vite/next etc))

astahmer on Jan 7, 2024

@chrber04, you can make it work on the latest version by running panda --watch in parallel with next dev:

{ // package.json scripts
  "dev": "concurrently \"next dev\" \"panda --watch\"",
}

You need to clean the PostCSS config:

const postcssConfig = {
  plugins: {},
}

module.exports = postcssConfig

Also, modify your globals.css:

@import '../panda/system/styles.css'; /* double-check the path, it depends on your configuration */

BorisZubchenko on Jan 7, 2024

@astahmer

I’ve also encountered this issue today after doing some dependency updates on my project. I’ve just run a bisect and from what I can see:

0.19.0 has no warnings in the terminal like in the OP.
0.21.0 has the warnings but still generates the global/reset/static files.
0.22.0 has the warnings and does not generate any of the files. Interestingly, using cssgen -w doesn’t work for me.

Also running Next 14.0.4. My repo is private but happy to try and produce an MRE if needed.

MeanBoyCousin on Jan 4, 2024

Experiencing same issue on Windows with 14.0.4 nextjs. Was driving me mad, so finding this thread was a relief.

Downgraded pandacss version to 0.19.0 “solved” it for now

chrber04 on Jan 6, 2024

Im using nx as well and concurently works fine with it, just update your scripts in package.json like you would normally do, nx does catch on this and allow you to run them. You can also do this in project.json if you use this, or nx.json if you have one global config.

Hope it helps.

neolectron on Jan 9, 2024

got it, so this would be a postcss issue, that helps a lot tracking the root cause 🙏

astahmer on Jan 1, 2024