Node-sass: Found orphan CR, try removeCR option with Create-React-App

[CrispyBacon1999]

• NPM version (npm -v): 6.12.0
• Node version (node -v): v12.12.0
• Node Process (node -p process.versions): { node: '12.12.0', v8: '7.7.299.13-node.12', uv: '1.32.0', zlib: '1.2.11', brotli: '1.0.7', ares: '1.15.0', modules: '72', nghttp2: '1.39.2', napi: '5', llhttp: '1.1.4', http_parser: '2.8.0', openssl: '1.1.1d', cldr: '35.1', icu: '64.2', tz: '2019a', unicode: '12.1' }
• Node Platform (node -p process.platform): win32
• Node architecture (node -p process.arch): x64
• node-sass version (node -p "require('node-sass').info"): node-sass 4.12.0 (Wrapper) [JavaScript] libsass 3.5.4 (Sass Compiler) [C/C++]
• npm node-sass versions (npm ls node-sass): -- [email protected]

Getting the following error when running a create-react-app program. It works fine on another computer, but when cloned from git to this computer, I'm getting this error. The problem goes away if I comment out a url() to an image. The issue doesn't look like it's coming directly from node-sass, but it's the only library I have installed for styling.

./src/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-4!./src/styles/index.scss) Error: resolve-url-loader: CSS error source-map information is not available at url() declaration (found orphan CR, try removeCR option)

[saper]

Looks like you have a problem with line endings. Make sure all your files have consistent line endings, preferably just LF.

More explanation why source maps should not have their line endings edited https://github.com/sass/libsass/issues/2820#issuecomment-482675671

There is not enough information to troubleshoot this, you might want to reduce that to a smallest case that involves node-sass.

[CrispyBacon1999]

I had CRLF for both computers, but apparently reducing it to just LF worked. Thanks!

[raul-diego]

What is LF ? please explain.

LF just means new line ("\n", insead of CRLF, ie "\r\n")

(BTW, replacing CRLF by LF in all scss files worked like a charm in my case)

Cheers!

[emilpalsson]

@saper I also got this error. While replacing CRLF with LF worked, I did not settle for that solution since I did not have inconsistent EOL (I had only CRLF, using git core.autocrlf=true) so it should work.

I narrowed down what scss files caused the error and after wading through a couple of thousand lines I found that this diff solved the problem:

-  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
-    Helvetica, sans-serif;
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;

-  animation: fill 0.4s ease-in-out 0.4s forwards,
-    scale 0.3s ease-in-out 0.9s both;
+  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;

So, this bug is probably an issue related to CRLF "inside a value". I thought that would be useful to you.

[emilpalsson]

@Ziaul53 👆 probably also useful to you if you currently have this issue.

[Messiahhh]

Ok, I changed CRLF TO LF and the problem is gone

[VirtualBlackWhale]

For future readers since this post helped but didn't enable me to correct problem by itself. Getting it to run on Windows :

1. node_modules/resolve-url-loader/index.js => removeCR: false >> removeCR: true

1. package.json => "build": "GENERATE_SOURCEMAP=false react-scripts build" >> "build": "set "GENERATE_SOURCEMAP=false" && react-scripts build"

Edit: see comment below for solution that does not tamper with node modules which is probably a better idea on the long run

[loedeman]

In addition to comments from @emilpalsson and @VirtualBlackWhale:

Also using Windows. I narrowed down the problem to just font imports at my place. When I manually remove all line endings "inside values", the build continues flawlessly. I hope this is helping enough for most devs, changing node_modules is not really an option for most devs, especially when using CI/CD environments...

[Azayzel]

In addition to comments from @emilpalsson and @VirtualBlackWhale:

Also using Windows. I narrowed down the problem to just font imports at my place. When I manually remove all line endings "inside values", the build continues flawlessly. I hope this is helping enough for most devs, changing node_modules is not really an option for most devs, especially when using CI/CD environments...

This did it for me, thanks!

[olegs7771]

When I manually remove all line endings "inside values"
Can you please elaborate?

[VirtualBlackWhale]

In addition to comments from @emilpalsson and @VirtualBlackWhale:

Also using Windows. I narrowed down the problem to just font imports at my place. When I manually remove all line endings "inside values", the build continues flawlessly. I hope this is helping enough for most devs, changing node_modules is not really an option for most devs, especially when using CI/CD environments...

Could you please define line ending inside values ? I'm not sure what you mean by that. Thanks !

[emilpalsson]

Could you please define line ending inside values ? I'm not sure what you mean by that. Thanks !

@VirtualBlackWhale You can see what I mean in the diffs I posted earlier. I removed the line breaks in the values of font-family and animation in my scss. When they wrapped over two lines I got the error, when I removed the line break it worked.

Error:

font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
  Helvetica, sans-serif;

Works:

font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;

[IsaacBukunmi]

@saper I also got this error. While replacing CRLF with LF worked, I did not settle for that solution since I did not have inconsistent EOL (I had only CRLF, using git core.autocrlf=true) so it should work.

I narrowed down what scss files caused the error and after wading through a couple of thousand lines I found that this diff solved the problem:

-  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
-    Helvetica, sans-serif;
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;

-  animation: fill 0.4s ease-in-out 0.4s forwards,
-    scale 0.3s ease-in-out 0.9s both;
+  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;

So, this bug is probably an issue related to CRLF "inside a value". I thought that would be useful to you.

This worked for me. Thanks

[FinnGu]

Has this been fixed in the meantime? The issue was simply closed, before @emilpalsson correctly narrowed the bug down and made it reproducable.

[silvericedan]

Could you please define line ending inside values ? I'm not sure what you mean by that. Thanks !

@VirtualBlackWhale You can see what I mean in the diffs I posted earlier. I removed the line breaks in the values of font-family and animation in my scss. When they wrapped over two lines I got the error, when I removed the line break it worked.

Error:

font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue',
  Helvetica, sans-serif;

Works:

font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;

this solution worked for me too!!!

[pldvd]

I also ran into this same issue, and I had no clue how to fix it at first, these answers were helpful, but there was no way I could manually check thousands of lines of existing css code and I also knew that I don't want to temper with node_modules because even though it works, it is not maintainable on the long run, once the project is deployed somewhere from git node_modules will be created again and so this felt too hacky. So what I did was:

• used stylelint and to automatically locate and fix CRLF line ending (https://stylelint.io/user-guide/rules/linebreaks)

• changed git config to avoid automatically changing these new LF line endings back to CRLF automatically - which is default behaviour - by setting autocrlf = false in the git config file

I hope this helps some people out there.