I have a css that is shared between two projects. Currently I have both of them symbolicly linked to each other.
I have an error that says :

middleware called
 ○ Compiling / ...
 ✓ Compiled / in 4.5s
 ⨯ ./src/app/layout.tsx:2:1
Module not found: Can't resolve './globals.css'
  1 | import type { Metadata } from "next"
> 2 | import "./globals.css"
    | ^^^^^^^^^^^^^^^^^^^^^^
  3 | // import "~/DEV/PROJECT/src/app/globals.css" -- original file 

here is my setup :
next.config.ts

import type { NextConfig } from "next"
import path from "path"
/** @type {import('next').NextConfig} */
const nextConfig: NextConfig = {
  // output: "standalone",
  cacheHandler: path.resolve("./cacheHandler.mjs"),
  cacheMaxMemorySize: 4096,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "placehold.co",
        port: "",
        pathname: "/**",
      },
    ],
    dangerouslyAllowSVG: true, // Allows SVG support
  },
  // tried this but it didn't work
  webpack(config, { isServer }) {
    // Allow resolving symlinks in Webpack
    config.resolve.symlinks = false

    return config
  },
  // I tried searching for this but I couldn't find any references to this
  experimental: {
    turbo: {},
  },
  // this is the nearest thing I could find but I did not understand it
  // outputFileTracingRoot: path.join(__dirname, "../"),
  compress: false,
}

export default nextConfig