Inconsistent "Relative imports outside of src/" restriction ?

[hugomallet]

Is this a bug report?

Maybe not

Which terms did you search for in User Guide?

This is related to my previous answer : #1333 (comment)

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.

[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 ?

[Timer]

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

[bugzpodder]

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

[hugomallet]

@bugzpodder, It does not seem to work.

[stale]

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]

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.

[jackwilsdon]

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.

[iamandrewluca]

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.

create-react-app/packages/react-scripts/config/webpack.config.js

Lines 283 to 288 in eee8491

	// Prevents users from importing files from outside of src/ (or node_modules/).
	// This often causes confusion because we only process files within src/ with babel.
	// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
	// please link the files into your node_modules/ and let module-resolution kick in.
	// Make sure your source files are compiled, as they will not be processed in any way.
	new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),

[jackwilsdon]

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.

[alamothe]

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.

[iamandrewluca]

@hugomallet can you reproduce this issue with latest CRA? #5829 was merged

[aimadghssisse]

hey ,
i create folder outside src/ when i import file give me error on first div
`..modules/Details/pages/Details.js: Unexpected token (4:4)

2 |
3 | const Details = () => (

4 |

Details Module

| ^
5 | );
6 |
7 | export default Details;`

??

[iamandrewluca]

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

[shadanan]

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.

[ovaixalee]

Does anybody have a solution? i have the same problem my images are in public/images folder and I am importing them to src/components/header/index.js file, but it is showing me the same error.

[annmarie-switzer]

@shadanan This is the exact same behavior I am experiencing, and the workaround you describe works. But I'm now curious if anyone knows why this is - why we can we import from a symlink in .js files but not .css files?

[loongluangkhot]

Having the same problem of not being to able to import css from a symlinked project into .css file. Wondering if anyone found a solution to this?

[MatheusAraruna]

I fixed this by installing react-rewired along with customize-cra

Create the file config-overrides.js, and inside file:

const { removeModuleScopePlugin } = require('customize-cra');
module.exports = removeModuleScopePlugin();