Skip to content

CSS import from sibling package inside monorepo fails #10373

Open
@ikornienko

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions