"Illegal character in path" when path has %2f in it

[adamdport]

I discovered this issue when building an Angular project. If I build my project from the path angular it builds fine. If I build it from angular%2f, I get an error:

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/load
er.js??ref--13-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Unsupported operation: Illegal character in path: angular/

I originally filed the issue in the Angular-cli project, but they said it's an issue with dart-sass and there's nothing they can do. Is this a bug or a configuration error?

I imagine the issue is fairly common as using standard git flow convention creates branches with names like release/2019.6, and when built with Jenkins, can result in encoded names like release%2f2019.6.

Thanks.

[ChrisCherryfarmer]

I have got the same issue,. Our feature branch build is not building anymore on jenkins.

[nex3]

I've tried a couple simple reproductions of this without any success. Can you provide minimal reproduction instructions, ideally that use Sass directly and don't require Angular?

[adamdport]

@nex3 It can be reproduced with angular pretty easily. I'll assume you're starting from nothing:

1. Install node/npm
2. Install Angular CLI (npm i @angular/cli)
3. Make a new project (ng new myNewProject, be sure to select scss in the prompts)
4. Build the project (cd into the myNewProject directory and run ng build), it should work fine
5. Rename the project's root folder to myNewProject%2f
6. Build the project again, it should fail

Unfortunately I know nothing about what ng build is doing behind the scenes. @alan-agius4 can you at least point us in the right direction here?

[nex3]

The problem is that the Angular invocation doesn't seem to produce a stack trace within Dart Sass, which means that we don't have anywhere to start when figuring out what the underlying issue is.

[alan-agius4]

@nex3 & @adamdport, I’ll try provide some more details on the coming days, I am current a bit short on time.

From your end @adamdport, you can probably provide a stackstrace if you console.log the err variable in sass-loader https://github.com/webpack-contrib/sass-loader/blob/e279f2a129eee0bd0b624b5acd498f23a81ee35e/lib/loader.js#L66

[adamdport]

It looks like you can attach a debugger to node with --inspect, so if you run

node --inspect --debug-brk ./node_modules/\@angular/cli/bin/ng build

it will launch and wait for a debugger to connect. Open chrome's inspector, you'll see a little green node icon in the top left:

Once you connect, you can set breakpoints wherever you want.

[nex3]

Just getting a stack trace from the released sass package is unlikely to be super helpful, since it's minified code. That's why I'd like a stand-alone reproduction: so I can easily run it with the unminified dev version of Sass (or ideally the Dart VM version).

[adamdport]

@nex3 if you install an angular project, couldn't you manually replace node-modules contents with unminified code? Would that help?

[nex3]

Yes, but it's more of a pain 😝. I'll probably be able to get to diving into the Node debugger within a week or so, but it would be a lot faster if I could just run an Angular-free script.

[nex3]

Okay, I've found some time to dive into this. It looks like the root cause is dart-lang/sdk#27979. I'll see if I can escalate that issue.

[nex3]

I believe mbullington/node_preamble.dart#16 should allow us to avoid this issue.

[ama1er]

hello, is there any news on this point? we have the same problem and can't build feature branches (because of the special characters in the folder name)
best thanks in advance

[nex3]

mbullington/node_preamble.dart#16 is still out for review. I've sent an email to @mbullington asking him to take a look.

[nex3]

This should be fixed as of 1.22.9.