CSS import from sibling package inside monorepo fails

[ikornienko]

Describe the bug

CSS imports like

@import '~@my-company/package1/index.css';

break the build when @my-company/package1 is a sibling monorepo package, where monorepo is controlled by yarn workspaces.

It's a regression / change in behavior comparing to react-scripts@3.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Safari: 13.1.3
  npmPackages:
    react:  17.0.1 
    react-dom:  17.0.1 
    react-scripts:  4.0.1 

Steps to reproduce

1. Create new yarn workspaces monorepo
2. Create monorepo package containing valid CSS file
3. Initialize another monorepo package with yarn create react-app
4. From the CRA app package's index.css import CSS from a sibling package using syntax @import '~scope/sibling-package/file.css';

See react-scripts-4-import-monorepo-package-css-issue for a reproducible demo.

Expected behavior

Build works fine and react-scripts@4 is able to build the application same as react-scripts@3 does it.

Actual behavior

Build error:

ModuleNotFoundError: Module not found: Error: You attempted to import ../../package1/index.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

Reproducible demo

Please find it in react-scripts-4-import-monorepo-package-css-issue, the README there explains the demo in details.

[ikornienko]

Some observations in case it could be helpful:

• The build error originates from ModuleScopePlugin.js.
• With react-scripts@3 this CSS import falls into this if condition. Since monorepo has symlinks from node_modules to the packages, while debugging the problem I see either request.descriptionFileRoot is not a resolved symlink and therefore contains node_modules, or it's a resolved symlink but then request.__innerRequest_request isn't defined.
• With react-scripts@4 when it hits the same if condition, request.descriptionFileRoot is a resolved symlink, so it doesn't contain node_modules, and request.__innerRequest_request does have a value.

[molanostephane]

First of all thanks to @ikornienko for the POC. We also faced this issue when upgrading from 3.4.4 to 4.0.3

Since the bug was created on 12/01/21 i revive the topic. I think this is a quite important bug as regard of yarn workspaces and css.

Has anyone a workaround meanwhile ?

[molanostephane]

Up

[pallavi]

i'm running into what i think is a similar problem in my project, trying to upgrade from react-scripts from 3.4.2 -> 4.0.2.

the project has a directory of assets within the src folder. the directory is a symlink of a directory outside the project. in our sass files, url()s with links to these assets used to resolve without a problem in 3.4.2 and not trigger the 'Relative imports outside of src/' error.

@ikornienko i'm wondering if this change in behavior is from adding resolve-url-loader in https://github.com/facebook/create-react-app/pull/5829 (and a related followup: https://github.com/facebook/create-react-app/pull/8281).

[romanwozniak]

Hi all, one year later, I'm still seeing the same issue with react-scripts: ^5.0.1. Is there any workaround available to address this?

Importing *.sass files from the sibling project works as expected, the only issue is with *.css files.

[Danny-Kettle]

Hi, four years later, the same problem is still occurring. Is removing the ModuleScopePlugin really the best solution? Or, is there better workaround?