Module not found: Can't resolve './globals.css' using symbolic Links

[sharp flame]

Hi @crystal zenith. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the knowledge sources, I can offer some insights into your issue with resolving './globals.css' using symbolic links in Next.js. However, it's important to note that the knowledge sources don't provide a direct solution to your specific setup.

The error you're encountering suggests that Next.js is unable to resolve the './globals.css' file, which is likely due to the symbolic link not being properly recognized or followed.

Here are some potential approaches to address this issue:

1. Symlink Resolution:
   Next.js and Webpack may have issues with resolving symlinks in certain configurations. You've already tried setting config.resolve.symlinks = false in your webpack configuration, which is a good start, but it didn't resolve the issue.

2. Absolute Imports:
   Instead of using a relative import for your CSS file, you could try using an absolute import path. This might help Next.js locate the file correctly, regardless of symlinks. For example:

   import "~/DEV/PROJECT/src/app/globals.css"
   

   You may need to configure your tsconfig.json or jsconfig.json to recognize the ~ alias.

3. PostCSS Configuration:
   If you're using a custom PostCSS configuration, ensure that it's properly set up to work with Next.js. According to this issue, there can be problems with PostCSS configs and Turbopack on Windows.

4. Turbopack Considerations:
   You're using the experimental Turbo feature. According to this issue, there can be problems with resolving modules when using Turbopack in development mode. You might want to try running without the Turbo feature to see if it resolves the issue.

5. Output File Tracing:
   The outputFileTracingRoot option you commented out might actually be helpful. It allows you to specify the root directory for file tracing, which could help with resolving files outside the immediate project directory. You could try uncommenting and adjusting this option:

   outputFileTracingRoot: path.join(__dirname, ".."),
   

6. Alternative Approach:
   If none of the above solutions work, you might consider an alternative approach to sharing CSS between projects. For example, you could package the shared CSS as an npm module and import it in both projects, or use a monorepo setup with tools like Lerna or Nx that handle shared resources more robustly.

Unfortunately, the knowledge sources don't provide a definitive solution for your specific setup with symbolic links. If these suggestions don't resolve the issue, you may need to consider restructuring your project setup or seeking further assistance from the Next.js community or support channels.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: