Node version incompatibility fix

^18.0.0 (v18.x)  
^20.0.0 (v20.x)  
>=22.0.0 (v22+)

### ✅ Solution: Use a supported Node.js version

You should **switch to Node.js v20.x or v18.x**. Here's how:

—

### 🔧 If you are using `nvm` (Node Version Manager)

Run:

nvm install 20
nvm use 20

Or, to use Node 18:

nvm install 18
nvm use 18

To make it default:

nvm alias default 20

Then try:

yarn install

—

### ❌ Don't use Node 21 for this project

Because `@roots/vite-plugin@1.0.4` explicitly **rejects** Node 21.

—

Let me know if you're not using `nvm` and I’ll guide you on manually switching Node versions.

—

### ✅ Step-by-Step: Update Node.js using `nvm`

#### 1. **Install `nvm` (if not already installed)**

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Then activate it:

export NVM_DIR="$HOME/.nvm"
source "$NVM_DIR/nvm.sh"

> 🔄 Or log out and log back in so `nvm` loads automatically.

—

#### 2. **Install a supported Node version**

To install **Node.js 20** (recommended for your error):

nvm install 20

Set it as the default:

nvm alias default 20

Use it for current session:

nvm use 20

—

#### 3. **Verify the installed version**

node -v
# Should show: v20.x.x

—

#### 4. **Re-run your Yarn command**

Now go to your project folder and run:

yarn install

✅ It should now work without the Node version error.

—

Let me know if you're using a specific Node version manager or AMI setup (like Bitnami, etc.), and I’ll adjust instructions.

/var/www/wp-react/web/app/cache/acorn/framework/cache

**does not exist** or **is not writable** by your web server (likely `www-data` on Ubuntu).

—

### ✅ Fix in Two Steps:

#### **1. Create the missing directory**

Run this:

mkdir -p /var/www/wp-react/web/app/cache/acorn/framework/cache

#### **2. Set proper ownership and permissions**

Assuming your web server user is `www-data` (common on Ubuntu):

sudo chown -R www-data:www-data /var/www/wp-react/web/app/cache
sudo chmod -R 775 /var/www/wp-react/web/app/cache

> `775` means:
> – Owner and group can read/write/execute
> – Others can read/execute

—

### 🔁 Then: Clear and regenerate cache (optional)

If you're using Sage (Roots), you can do:

wp acorn optimize

Or manually clear cache if needed:

rm -rf /var/www/wp-react/web/app/cache/acorn/framework/cache/*

—

Let me know if you're using a different user or need to persist this in deployment scripts.

Can't resolve 'test' in '/var/www/html/web/app/themes/sage/resources/css'

…indicates that in your `app.css`, you likely wrote:

@import "test";

But this is **not valid** unless:
– `test.css` or `test.scss` exists **in the same directory**
– AND it has the proper extension
– AND you're using `@import` in the right syntax and supported way

—

### ✅ Fix Options

#### ✅ **Option 1: Rename and import it correctly**

If your file is `resources/css/test.scss`, then in `app.css`:

**Wrong:**

@import "test"; // ← CSS tries to find a "test.css", NOT "test.scss"

**Fix:**

@import "./test.scss";

> 📝 Make sure it's a **valid SCSS** file and you're using `postcss-import` or Vite handles it correctly.

—

#### ✅ **Option 2: Move to `resources/styles` and use `app.scss` instead**

Roots Sage often uses `app.scss`, not `app.css`.

If you're writing SCSS, do:

1. Rename `resources/css/app.css` to `resources/styles/app.scss`
2. Move your `test.scss` to `resources/styles/partials/_test.scss`
3. Then in `app.scss`, import it like this:

@import "partials/test";

Then update `bud.config.js`:

app
  .entry('app', ['@scripts/app', '@styles/app.scss']);

—

### ❌ Avoid importing `.scss` in `.css` files

`.css` does **not** support SCSS features like variables, nesting, or partial imports. You need to rename to `.scss` and use SCSS syntax.

—

### ✅ Summary

– Change `@import "test";` → `@import "./test.scss";` **or** use SCSS properly
– Use `app.scss` instead of `app.css`
– Ensure file paths and extensions are correct

Let me know if you're using Tailwind with PostCSS or full SCSS — I can adjust config accordingly.