NextJS module resolution error with multiple paths in my path resolution

Question

Hi everyone :) I was hoping I could get some fresh eyes on a problem I'm running into on my project:

I have a NextJS (12.1.4) project using absolute imports, I also have an NPM package where I directly import the source files in my project (since it's a library for shared components, internal use only). This package is called bs-components here.

Here is my jsconfig.json file

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@bscom/*": ["node_modules/@company/bs-components/*"],
      "*": ["node_modules/@company/bs-components/*", "*"]
    }
  }
}

I will explain the intent behind my paths config here:

The first entry for @bscom/* will allow me to import modules from my library using a shorthand.

The second entry for * is intended so that the module resolution goes like this:

• Look in the component library first for a module, so that absolute imports in the component library are respected.
• If module is not found in the library, then resolve using the baseUrl as the starting point for resolution.

Unfortunately when using this config, absolute imports within the component library fail with the following error:

./node_modules/@company/bs-components/styling/resets.js:1:0
Module not found: Can't resolve 'constants/colors'

This happens in my NextJS _document.js file, so during the server render step.

There are no modules with that path in my main project which could cause a conflict.

Any suggestions would be greatly appreciated, thanks :)