Inconsistent "Relative imports outside of src/" restriction ?

Is this a bug report?

Maybe not

Which terms did you search for in User Guide?

This is related to my previous answer : https://github.com/facebook/create-react-app/issues/1333#issuecomment-428200810

Steps to Reproduce

I have a projet which imports an other “private” package. I am using sass in both packages. The private package is passed to babel only (not node-sass).

I have something like the following in the private module :

// src/component/module.js

import '../styles/module.scss';

// src/styles/module.scss

.module {
    background: url('../images/module.jpg');
}

Then in the main project, if i do this :

// src/index.js

import '@my/module/dist/component/module.js';

everything works fine, but if i do “the same thing” from my sass file :

// src/main.scss

@import '@my/module/dist/styles/module.scss';

i obtain the following error :

Module not found: You attempted to import ../images/module.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Expected Behavior

Both import should fail or success ?

To be able to split my project, i would like to be able to import other packages components and sass files.

Actual Behavior

Importing from sass from sass fails but importing sass from js works.

[iamandrewluca]

@aimadghssisse files outside src/ are not compiled by Babel. Better keep them in src/ folder

[hugomallet]

Ok finally the issue is different.

The problem is :

• if imported from javascript, “url()” in sass file are relative to the imported module
• if imported directly from sass, “url()” in sass file are relative to the main package

Both pass through webpack so the behaviour should be the same ?