Open
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 workspaces
monorepo - Create monorepo package containing valid CSS file
- Initialize another monorepo package with
yarn create react-app
- 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.