SASS_PATH not respected after updating CRA from v2.1.8 to v3.0.1

[arkn98]

Is this a bug report?

yes

Did you try recovering your dependencies?

$ npm --version
6.9.0

Which terms did you search for in User Guide?

Irrelevant.

Environment

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: x64 Intel(R) Core(TM) i3 CPU       M 370  @ 2.40GHz
  Binaries:
    Node: 11.10.1 - ~/.nvm/versions/node/v11.10.1/bin/node
    Yarn: 1.15.2 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v11.10.1/bin/npm
  Browsers:
    Chrome: 74.0.3729.131
    Firefox: 66.0.4
  npmPackages:
    react: ^16.8.6 => 16.8.6 
    react-dom: ^16.8.6 => 16.8.6 
    react-scripts: 3.0.1 => 3.0.1 
  npmGlobalPackages:
    create-react-app: 2.1.8

Steps to Reproduce

1. create a fresh new create-react-app project

2. install node-sass

3. create .env file in the root of the directory and add SASS_PATH=node_modules:src as mentioned in the docs (here)

4. create an assets folder in src and add a sample svg file, say mysvg.svg, into assets

5. rename App.css to App.scss and change import in App.js

6. move the App.js and App.scss file inside some directory inside src, say components like so

   src
   | - assets
   | | - mysvg.svg
   | - components
   | | - App.js
   | | - App.scss

7. import svg in App.scss in some class, say myclass, like so
   background: url('assets/mysvg.svg') 99% / 24px no-repeat rgba(0, 0, 0, 0.1);
   and apply that class to some DOM element in App.js, like so
   <div className="myclass">abcd</div>

Expected Behavior

Compilation successful. mysvg.svg is visible on the page. This was working without any problems in my application with [email protected]. After I upgraded react-scripts to v3.0.1, as mentioned in the releases tab, I'm finding this.

Also this happens only if App.js and App.scss are nested inside some folder inside src. If they are in the src folder, the problem is not seen. (This makes sense actually because it is trying to resolve modules relative to the current working directory, without respecting the SASS_PATH in .env file)

Actual Behavior

Failed to compile.

./src/components/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/App.scss)
Module not found: Can't resolve './assets/mysvg.svg' in '/home/user/code/js-projects/test-sass/src/components'

[stephanbaker]

I just ran into the same issue while trying to use the material-components-web-react module. Based on what I read in the CRA documentation, it appears that your environment variables are required to begin with the REACT_APP_ prefix.

I understand the goal, but this does seem pretty limiting.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

[arkn98]

Unfortunately adding REACT_APP_ before SASS_PATH is not doing anything and the same behavior is seen. Also it is documented to use just SASS_PATH here.

node-sass also supports the SASS_PATH variable.

To use imports relative to a path you specify, and from node_modules without adding the ~ prefix, you can add a .env file at the project root with the variable SASS_PATH=node_modules:src. To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3.

I believe SASS_PATH has nothing to do with React (not actually required anywhere in the app, except during the build process); I think it is just used to resolve modules when node-sass compiles the .scss files into .css files. I maybe wrong.

[stephanbaker]

Right, I think node-sass is expecting SASS_PATH. But I think that Create React App is ignoring your SASS_PATH entry in the .env file because it does not start with REACT_APP_.

What happens if you add both entries to your .env file (SASS_PATH and REACT_APP_SASS_PATH) and then console log process.env.SASS_PATH and process.env.REACT_APP_SASS_PATH?

I suspect SASS_PATH will be undefined but REACT_APP_SASS_PATH will be the value you set it to in the .env file. This doesn't help make node-sass work, but could explain what's happening at least.

[stephanbaker]

Just to update, I confirmed this in one of my own CRA projects.

With the following .env file

REACT_APP_SASS_PATH=myvalue
SASS_PATH=myvalue

After adding these console logs

console.log("REACT_APP_SASS_PATH", process.env.REACT_APP_SASS_PATH);
console.log("SASS_PATH", process.env.SASS_PATH);

I see the following in my console.

REACT_APP_SASS_PATH myvalue
SASS_PATH undefined

If I'm understanding this correctly, this means your SASS_PATH entry in your .env file is being ignored by CRA, and node-sass is likely receiving the undefined value, which is why it isn't working as expected.

To be clear, I don't think setting REACT_APP_SASS_PATH is going to make node-sass work, since node-sass is not looking for an environment variable with that REACT_APP_ prefix. I'm simply pointing out why I think it isn't working, not what should be done to resolve it.

Hope that at least helps a bit. I'll let you know if I discover a proper workaround on my own project.

[petetnt]

@stephanbaker thanks for investigating! The REACT_APP requirement should not be relevant in this case, as the SASS_PATH is being consumed by underlying tools instead of being build in the bundle.

@arkn98, does this still work with eg. SASS_PATH=node_modules:src yarn start?

[arkn98]

@petetnt Sorry for the late reply. No, it shows the same behavior with SASS_PATH=node_modules:src yarn start as well.

[kdmadej]

I'm experiencing the same problem.

I have a src/assets dir in the project's root where I place any assets that are shared between different components. It makes it tedious to reference those assets in .scss files with relative paths (../../../../assets/...) so I was relying on other methods (like SASS_PATH) to reference them using assets/... paths but as already mentioned – this no longer works.

Although I agree with the remark from the docs:

Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name.

I also agree with @stephanbaker that it is very limiting. The reason I'm using create-react-app is so that I don't have to worry about all the configuration – but if env vars used by the encapsulated tools are ignored then I'm forced to eject for the simplest of use-cases.

At the very least it would be nice if in the case of Sass files the baseUrl from jsconfig.json was respected as a valid SASS_PATH.

[pacxiu]

Not only images imports like absolute imports in background urls are broken after migrating to 3.0.1. Also importing values from module files with @value like:
@value accent from 'assets/styles/variables.module.sass'
is producing same error - Module not found.

Unfortunately setting any of SASS_PATH or/and baseUrl is not resolving the issue. It does work for @import but unfortunately not for the rest.

[dylanjmcdonald]

Also this happens only if App.js and App.scss are nested inside some folder inside src. If they are in the src folder, the problem is not seen. (This makes sense actually because it is trying to resolve modules relative to the current working directory, without respecting the SASS_PATH in .env file)

After setting up a new project via CRA I have this issue regardless of where App.js and App.scss are located.

[malamoney]

I am also seeing this issue. Has there been any progress in resolving this?

[randycoulman]

I've run into this issue as well. I've tried both with the SASS_PATH environment variable and by using craco to override the includePaths loader option to sass-loader. The behavior is the same both ways.

The problem appears to have been introduced in 3.1.0, as my configuration works fine in 3.0.1, but not 3.1.0. I suspect the culprit might be #5829. After reading the README for resolve-url-loader, it seems like it might be necessary to use the root option on that loader to make this work, but I haven't tried it to be sure.

I'm out of time to dig into this further right now, so I'm going to stay on 3.0.1 for now.

[atlanteh]

After digging into the code and docs, I've figured it out. I'm sending a PR with the fix

[loganaaaflag]

Has there been any movement on this? Believe I'm experiencing the same issue.

[atlanteh]

Initially this was scheduled for 3.4, but then it was pushed to 3.5
If you guys want this merged. Go to the PR and comment in there that this PR is important for you. If they see it affects many people they will release it sooner

[arkn98]

It is now pushed to 4.1.

[RichieRock]

The change is not present in webpack.config.js file that @atlanteh made, so I believe it is not pushed to 3.4.1.

So will this be fixed in 3.5 or sooner? I need this too :)

I couldn't find your PR, did you create one?

[atlanteh]

What @arkn98 means is that they pushed reviewing the pr to 4.1 milestone. PR is not yet merged. If it's important to you guys, please comment on the pr to raise attention

[RichieRock]

Ah ok, thanks for clarifying this. Can I get a link to PR that you're referring to?

[arkn98]

Ah ok, thanks for clarifying this. Can I get a link to PR that you're referring to?

#7937

[arwagner]

I really appreciate seeing this merged! Do we know when it might be released?

[krist-jin]

I saw that the #7937 was added to 4.0 milestone and fix was merged. But in the release note I don't see it's mentioned. So is the fix in the 4.0.3 which is the latest version?

[arkn98]

@krist-jin The fix has been available from v4.0.0

[BrodaNoel]

Seems like got fixed in v5.
I just added REACT_APP_ and now it works