create-react-app: 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.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 30
Comments: 18 (6 by maintainers)

Most upvoted comments

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

+23

iamandrewluca on Dec 22, 2019

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 Oct 11, 2018

I came here while trying to debug a very mysterious issue and I just wanted to make it clear to future devs what the issue is and how to solve it should they run in to it.

In my App.css, at the top of the file, I was importing a css from a separate package:

@import "~markdown-it-music/renderers/renderer.css";

Everything works, but then I wanted to link markdown-it-music into my project, so I ran:

$ npm link markdown-it-music

At this point, my build was failing with:

Module not found: You attempted to import ../../../markdown-it-music/renderers/renderer.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

I was able to work around this by removing the import from App.css and updating App.js as follows:

import "markdown-it-music/renderers/renderer.css";
import "./App.css";

Now the build works on a clean install, or when a node package is linked.

shadanan on Jan 18, 2021

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 Mar 20, 2019

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

bugzpodder on Oct 11, 2018