Create-react-app: Inconsistent "Relative imports outside of src/" restriction ?

Created on 11 Oct 2018 · 13Comments · Source: facebook/create-react-app

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.

needs investigation

Source

hugomallet

👍19 👀2

Most helpful comment

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 ?

hugomallet on 11 Oct 2018

🎉4 🚀1

All 13 comments

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 ?

hugomallet on 11 Oct 2018

🎉4 🚀1

One is detecting the symlink and the other is not, we'll need to look into this.

Timer on 11 Oct 2018

Do you need the tilda, ie
@import '~@my/module/dist/styles/module.scss';

bugzpodder on 11 Oct 2018

👍1

@bugzpodder, It does not seem to work.

hugomallet on 12 Oct 2018

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale[bot] on 14 Dec 2018

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

stale[bot] on 20 Dec 2018

It looks like this is a case of "Problems with url(...)", as sass-loader does not resolve paths in urls. It appears that #5829 _may_ fix this, however it seems to have some other issues at the moment when resolving paths.

jackwilsdon on 20 Mar 2019

This is not a sass-loader problem. Create React App does not allow sources outside src folder. There are a lot of issue related to this type of problem.

https://github.com/facebook/create-react-app/blob/eee8491d57d67dd76f0806a7512eaba2ce9c36f0/packages/react-scripts/config/webpack.config.js#L283-L288

iamandrewluca on 20 Mar 2019

👍1

I'm pretty sure CRA does support loading files outside of the src folder through the use of NODE_PATH, which allows you to specify additional node_modules directories (e.g. vendor_modules). This is designed to support monorepos and such better, see the release notes for v0.4.0 and also #253.

It looks like I may have misread this issue, as it does not actually use NODE_PATH and it sounds like the author actually has their private packages already in node_modules, and in this case #5829 does fix this issue.

It looks like there _is_ still an issue with NODE_PATH and relative SASS imports in modules within NODE_PATH, however that is a separate problem which can be addressed after #5289 and will probably require some changes to be made to the ModuleScopePlugin to take NODE_PATH into account.

jackwilsdon on 20 Mar 2019

I noticed that in CRA3, if NODE_PATH=src was set, then url(...) within SASS did not work at all. It either complained that the image cannot be found, or that it's outside src.

This happened while I was migrating CRA2 to CRA3.

Removing NODE_PATH=src fixed the issue.

Posting here in case someone stumbles over the same issue.