__dirname is not defined in Angular 6 app

[chrisbenseler]

I'm trying to use Sass.js, in the browser, in an angular app.
Reading the docs, there is in the getting started the section "Using Sass.js with a module loader" that says to load
var Sass = require('sass.js/dist/sass');

the browser outputs
"Uncaught ReferenceError: __dirname is not defined
at sass.js:28"

Is it possible to use the sass.js this way?

[rodneyrehm]

I don't quite understand why you're seeing that error, considering there's a guard for that:

if (typeof __dirname !== 'undefined') {
  return __dirname;
}

[joelfsreis]

I've tried to update my angular app from version 5 to version 6 and I'm having the exact same issue. It was working fine before.

I managed to track the issue to the above guard, but is returning __dirname even with undefined as a value

[rodneyrehm]

is it possible that the guard is broken by some build tool (e.g. transpiler)?

[joelfsreis]

@rodneyrehm it should be that. Sincerely I don't know what angular 6 changes in that matter from angular 5. I will do some more research on my spare time trying to figure it out

[klsweetwood]

I don't know if anyone has continued to look into this, but I was running into the same problem with a new Angular 6 project. It looks like it is being broken by webpack. When webpack bundles the file, it changes that guard to "if (true)". I'm guessing it broke between Angular 5 & 6 because of the webpack changes.

I fixed the error by modifying sass.js. I just set a variable to "typeof __dirname !== 'undefined'" before the if statement and used that as the condition. Kinda dumb, but webpack doesn't mess with it. I'm sure there's a better way, but I'm just doing this for an experimental side project and don't want to spend much time on it. I also haven't tried to use Sass yet.. just fixed the error, so I don't know if there are other issues as well.

[rodneyrehm]

@klbrisson interesting! would you like to send a PR for that?

[klsweetwood]

@rodneyrehm sure, I can do that. I'll see if there are other places where webpack changes it to true. I was still having trouble getting sass.js to work, but no errors were shown. So there may be other issues with Angular 6.
I ended up switching to use sass.sync.js even though it's not recommended. But my app needs everything synchronous anyways. So, having someone else verify that sass.js still works correctly in an existing project after I make those changes would probably be good to do.

[rodneyrehm]

@klbrisson please note that "sass.sync.js" does not actually execute libsass synchronously, but rather does it in the main browser thread.

[joelfsreis]

I have an angular app with Angular 5 using sass.js. Tomorrow is a bank holiday and I'll have some spare time and will try to update to Angular 6 with @klbrisson change on sass.js and see if that works. I'll let you know guys asap

[joelfsreis]

@rodneyrehm I've done the upgrade to Angular 6 and fixed the issue on sass.js with webpack. I've created a pull request for that, is needed to be done the npm build to create the newest dist folder.

Sorry for a long time since my last reply. Cheers

[starovoitovs]

Can you please reference the PR here, really curious how stuff like this could happen

[joelfsreis]

#105

[rodneyrehm]

fix released as 0.10.12. thank you :)