Referencing node_modules files on a JS monorepo using NPM Workspaces

node-modules-file-location-npm-workspace.md

Consider the following JS monorepo folder structure:

.
├── apps
│   ├── backend
│   └── react-app
│       ├── node_modules      <-- INNER NODE_MODULES
│       ├── package-lock.json
│       └── package.json
├── node_modules              <-- OUTER NODE_MODULES
├── package-lock.json
└── package.json

When installing dependencies for apps/react-app, some files may be saved in ./node_modules instead of apps/react-app/node_modules.

This behavior may break any kind of file references inside inner node_modules folders, since you cannot assume where the dependency will be installed.

I could not find out whether this behavior is configurable at all, contributions are welcome

Example: Tailwind CSS + React + Flowbite

This issue may be encountered when changing tailwind.config.ts, since you have to add flowbite-react to the Tailwind content array, as seen below:

tailwind.config.ts

import type { Config } from "tailwindcss";
import flowbite from 'flowbite/plugin';

export default {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",

    // This reference may not work, since there is no guarantee `flowbite-react` is located here
    "./node_modules/flowbite-react/**/*.js",

    // Adding a relative path to the outer node_modules solves the issue
    "../../node_modules/flowbite-react/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [flowbite],
} satisfies Config;