Yarn Node 18 Compatibility

# Install system dependencies and PHP extensions
RUN apt-get update && apt-get install -y
zip
unzip
git
curl
libpng-dev
libjpeg-dev
libfreetype6-dev
libzip-dev
&& docker-php-ext-install pdo pdo_mysql zip gd mysqli bcmath
&& apt-get clean && rm -rf /var/lib/apt/lists/*

# Install Node.js (version 20.x)
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash – &&
apt-get install -y nodejs &&
apt-get clean && rm -rf /var/lib/apt/lists/*

# Install Yarn 4.3.1 using Corepack
RUN corepack enable && corepack prepare yarn@4.3.1 –activate

# Verify Yarn installation
RUN yarn –version

# Copy Composer (from official Composer image)
COPY –from=composer:2.7 /usr/bin/composer /usr/bin/composer

# Copy custom php.ini
COPY php.ini /usr/local/etc/php/php.ini

# Set the working directory
WORKDIR /var/www

# Expose PHP-FPM port
EXPOSE 9000
adjust yarn according to node 18

FROM php:7.3-fpm

# Install system dependencies and PHP extensions
RUN apt-get update && apt-get install -y 
    zip 
    unzip 
    git 
    curl 
    libpng-dev 
    libjpeg-dev 
    libfreetype6-dev 
    libzip-dev 
    && docker-php-ext-install pdo pdo_mysql zip gd mysqli bcmath 
    && apt-get clean && rm -rf /var/lib/apt/lists/*

# Install Node.js (version 18.x)
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && 
    apt-get install -y nodejs && 
    apt-get clean && rm -rf /var/lib/apt/lists/*

# Install Yarn (adjust version for Node.js 18 compatibility)
RUN npm install -g yarn@1.22.19 # Yarn 1.x is stable for Node.js 18

# Verify Yarn installation
RUN yarn --version

# Copy Composer (from official Composer image)
COPY --from=composer:2.7 /usr/bin/composer /usr/bin/composer

# Copy custom php.ini
COPY php.ini /usr/local/etc/php/php.ini

# Set the working directory
WORKDIR /var/www

# Expose PHP-FPM port
EXPOSE 9000

### Key Adjustments:
1. **Yarn Version**: Instead of Yarn 4.3.1, which uses Corepack and is designed for the latest Node.js versions, Yarn 1.22.19 is widely compatible with Node.js 18 and is a stable choice.
2. **Corepack Removal**: Removed `corepack` commands since Yarn 1.x does not use Corepack.
3. **Node.js Compatibility**: Node.js 18 and Yarn 1.x work seamlessly for most projects, especially if you're working with older PHP and Laravel environments.

If you're bound to Yarn 4.x, upgrade Node.js to 20 or 21 instead, ensuring alignment with your environment.

ERROR Failed to compile with 2 errors 10:33:05 AM

error in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (108)
For more information on which environments are supported please see:

—

### **1. Downgrade Node.js to a Supported Version**
Node Sass is compatible with Node.js 14 or lower. Modify your Dockerfile to install Node.js 14:

# Install Node.js (version 14.x)
RUN curl -fsSL https://deb.nodesource.com/setup_14.x | bash - && 
    apt-get install -y nodejs && 
    apt-get clean && rm -rf /var/lib/apt/lists/*

This is the simplest fix if you don’t need Node.js 18 for other parts of your project.

—

### **2. Use Dart Sass Instead of Node Sass**
Dart Sass is the recommended replacement for Node Sass, as it is actively maintained and compatible with modern Node.js versions. Replace Node Sass with Dart Sass in your project:

1. **Uninstall Node Sass**:

yarn remove node-sass

2. **Install Dart Sass**:

yarn add sass

3. Ensure your build tools (like Webpack or Laravel Mix) are configured to use Dart Sass. For example, in a Laravel Mix setup:

mix.sass('resources/assets/styles/main.scss', 'public/css', {
       implementation: require('sass')
   });

—

### **3. Install Compatible Node Sass**
If you must stick with Node.js 18, install a Node Sass version compatible with your runtime:

1. **Remove the existing Node Sass version**:

yarn remove node-sass

2. **Install a compatible version**:

yarn add node-sass@6.0.1

Node Sass 6.0.1 is compatible with Node.js 18.

—

### **4. Verify Installed Versions**
After making changes, verify your setup:
– Node.js: `node -v`
– Yarn: `yarn -v`
– Node Sass or Dart Sass: Check your `package.json` dependencies.

Rebuild your assets:

yarn install
yarn run build

—

### Recommendation
Using **Dart Sass** is the most future-proof solution, as Node Sass is deprecated. However, if you’re limited by project constraints, downgrading Node.js or installing a compatible Node Sass version are viable alternatives.

1. **Double-Check the Prototype Settings**:
– Ensure the interaction for the hover state is correctly set up in Figma's prototype settings.
– Go to the **Prototype** tab in Figma, select the element, and check if a hover interaction is defined.

2. **Layer Visibility**:
– Verify that the button or its hover state is not hidden in the layers panel.
– Check if the button's opacity is set to `0%` or if it’s masked unintentionally.

3. **Component States**:
– If you're using a component with variants, make sure the hover variant is properly connected to the default state.

4. **Share Details**:
– If you're comfortable, describe the setup of the hover state and the element that's supposed to display the button.
– You can also provide the text or screenshots of the interaction settings.

Let me know how you'd like to proceed! 😊