CSS dependency with private module @import fails with

[rogy]

Can you reproduce the problem with latest npm?

Yes

Description

CSS dependency with private module @import fails with error

Error in ./~/@privaterepo/somepackage/lib/PropertyPicker/PropertyPicker.css
Module not found: ./@privaterepo/somepackage-two/css/variables/dimension in /Users/rogan/projects/create-react-app-folder/node_modules/@priaterepo/somepackage/lib/PropertyPicker

it produces a lot of these errors for many of the files in @privaterepo/somepackage

an example of how these files look is:

@import '@privaterepo/somepackage-two/css/variables/color';
@import '@privaterepo/somepackage-two/css/variables/dimension';
@import './DateInput.css';

.somecss {
  border: solid 1px var(--color-pumiceGray--darker);
}

Expected behavior

It should build

Actual behavior

Fails to build with the above error

Environment

Run these commands in the project folder and fill in their results:

2. node -v: 6.9.0
3. npm -v: 4.0.5

Then, specify:

1. Operating system: MacOS Sierra
2. Browser and version: Chrome 55

[gaearon]

Tagging because we need to report this upstream to Webpack (if the issue is still reproducing).
Feel free to untag after we have reported it.

[gaearon]

This is not a bug with scoped packages.
The same happens if you import from any npm package:

@import 'my-package/something.css';

The reason is because Webpack doesn’t know this CSS file “understands” module system, and so it assumes that my-package/something.css is relative, for backwards compatibility with normal CSS.

The workaround is simple: put ~ before the package name to tell Webpack it’s a Node module:

@import '~my-package/something.css';

This works with scoped packages too:

@import '~@my-user/my-package/something.css';

I hope this helps!

[TaguranJohnFranz]

how can i deploy my react app to heroku with private modules?