This repo reproduces the issue facebook/create-react-app#10373.
- Check out the repository
- Do
yarn && yarn build
- Build fails
Error:
./src/index.css
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/.
The "culprit" of the error is import statement in index.css:
@import '~@my-company/package1/index.css';
It imports CSS from a sibling package in the monorepo controlled by yarn workspaces
. Note that it's not
a relative import, yet a proper import from node_modules
.
Notes:
- This issue is a behavior change in
react-scripts@4
, identical example withreact-scripts@3
works. - Import is basically identical to JS import in index.js from the same
@my-company/package1
. JS import works fine, so it's reasonable to expect CSS import to be fine as well.
It's a monorepo controlled by yarn workspaces. There are two packages:
- @my-company/package1 - simple package from which files are imported
- @my-company/app - application created with
yarn create react-app app
The application attempts to make imports from the package1
package.
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, 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 this condition, request.descriptionFileRoot
is a resolved symlink,
so it doesn't contain node_modules
, and request.__innerRequest_request
does have a value.