Repository navigation
CSS import from sibling package inside monorepo fails #10373
Description
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
- Create new
yarn workspacesmonorepo - Create monorepo package containing valid CSS file
- Initialize another monorepo package with
yarn create react-app - From the CRA app package's
index.cssimport 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.
Activity
ikornienko commentedon Jan 12, 2021
Some observations in case it could be helpful:
react-scripts@3this CSS import falls into thisifcondition. Since monorepo has symlinks fromnode_modulesto the packages, while debugging the problem I see eitherrequest.descriptionFileRootis not a resolved symlink and therefore containsnode_modules, or it's a resolved symlink but thenrequest.__innerRequest_requestisn't defined.react-scripts@4when it hits the sameifcondition,request.descriptionFileRootis a resolved symlink,so it doesn't contain
node_modules, andrequest.__innerRequest_requestdoes have a value.molanostephane commentedon Mar 23, 2021
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 commentedon Apr 30, 2021
Up
pallavi commentedon Jun 1, 2021
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
srcfolder. 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-loaderin #5829 (and a related followup: #8281).romanwozniak commentedon Aug 17, 2022
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
*.sassfiles from the sibling project works as expected, the only issue is with*.cssfiles.Danny-Kettle commentedon Feb 11, 2025
Hi, four years later, the same problem is still occurring. Is removing the ModuleScopePlugin really the best solution? Or, is there better workaround?