How to properly configure hoisting

[stevebeauge]

Hi,

I'm working in a pnpm monorepo. One of my package references a 3rd party library which contains a scss file. The scss file contains an import to another scss file present in one of the nested dependencies.

Specifically, I added @microsoft/[email protected] to my project. This package references fluentui/[email protected].

The issue comes in the file @microsoft/sp-webpart-base/lib-commonjs/core/styles/cswp-base.module.scss:

@import '../../../node_modules/@fluentui/react/dist/sass/References.scss';

When I try to compile my package (using vite if it matters), the scss file cannot compile because the file is not found.

Assuming my monorepo contains packages under /packages/**, I believe the issue is because the scss file does not import the file using a "dependency" path, but using a direct path. I guess the scss compile will try to load <wsroot>/packages/mypackages/@microsoft/sp-webpart-base/node_modules/@fluentui/react/dist/sass/References.scss and not <wsroot>/node_modules/.pnpm/@fluentui/react/dist/sass/References.scss

What are my options?

I tried to play with the .npmrc file, but I did not find the proper way to setup this edge case. Actually, I'm not sure to fully understand the hoisting-related configuration. Not sure if I need to fix the direct dependency, or the nested dependency. Everything I tried never ended with a "local" node_modules inside my dependency folder.

As an alternative, I think I can play with patches, but I don't won't to have to fix every occurence of such flawed imports in current and future versions