Freecodecamp: Bug in ES6: Create Strings using Template Literals with Err Msg: Invalid regular expression flags

[zrfrank]

Describe your problem and - if possible - how to reproduce it

The Challenge, ES6: Create Strings using Template Literals, return an error message Invalid regular expression flags.

My solution is,

arr.map(a=>`<li class="text-warning">${a}</li>`);

where the console log shows the correct solution,

["<li class="text-warning">no-var</li>", "<li class="text-warning">var-on-top</li>", "<li class="text-warning">linebreak</li>"]

And the full code is,

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";

  // change code below this line
  const resultDisplayArray = arr.map(a=>`<li class="text-warning">${a}</li>`);
  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ <li class="text-warning">no-var</li>,
 *   <li class="text-warning">var-on-top</li>, 
 *   <li class="text-warning">linebreak</li> ]
 **/
const resultDisplayArray = makeList(result.failure);
console.log(resultDisplayArray);

Add a Link to the page with the problem

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

Tell us about your browser and operating system

• Browser Name: Chrome
• Browser Version: Version 67.0.3396.99 (Official Build) (64-bit)
• Operating System: Win10

If possible, add a screenshot here

[ghost]

I can confirm that this and the related issue (https://github.com/freeCodeCamp/freeCodeCamp/issues/16358) has been preventing completion of this since December 2017.

[alhazen1]

This "Invalid regular expression flags" error appears to be a recent development. Solutions that did not use bracket notation were passing tests without problem as recently as 6/30/2018.

#16358 as mentioned by @zeb-stephen-downs has been an issue with that challenge for a while. The workaround for that - use map, forEach or for...of - is no longer an option though.

It appears that a newer regular expression is now being used in the test case.
In the regex for the test case possibly we need an escaping backslash (or two?maybe?) before the slash in closing tag.
this <\\s*\\/li\\s*>\\`/g) vs <\\s*/li\\s*>\\`/g)
This is all out of my league - I'll let you folks do your magic.
Thanks for all you do

[fr4p]

I'm a new learner and ran into this one about an hour ago, been driving me mad. Glad to see it's a bug! Looks like you guys are all over it.

[vonalogue]

I, too, have encountered this problem when using the map function exactly as people have shown.

[AndrewJBateman]

I have encountered this problem when using the map function just like everyone else.

[2series]

Invalid regular expression flags. Solution??????

[kevinsmithwebdev]

At the risk of putting my foot in my mouth (sorry, new to open source)...

This issue is a recent one. Many have had problems on this test, usually because they hard code the answer instead or loop/map. But for a few days now, answers that worked are no longer working. In the curriculum repo, I see this is the test:

    {
      "text": "Template strings were used",
      "testString":
        "getUserInput => assert(getUserInput('index').match(/`<li \\s*class\\s*=\\s*(\"\\s*text-warning\\s*\"|'\\s*text-warning\\s*')\\s*>\\s*\\$\\s*\\{(\\s*\\w+\\s*|\\s*\\w+\\s*\\[\\s*[\\w]+\\s*\\]\\s*)\\}\\s*<\\s*\\/li\\s*>`/g), 'Template strings were used');"
    }

That was changed a few days ago from this:

 "getUserInput => assert(getUserInput('index').match(/\\`<li class=\"text-warning\">\\$\\{\\w+\\}<\\/li>\\`/g), 'Template strings were used');"

Sorry, my regex isn't good enough to spot the issue.

[hbar1st]

I wonder if the problem is that the last backtick is not escaped in the new code?
(Noticed that the first backtick is escaped but not the last)
I also notice that the double quotes are escaped but not the single quotes. Not sure why.

I also wonder if all the extra (double) backslashes are needed. Once I removed them (and some space matchers that seemed too much) and tested the regex on an external regex test engine, it worked fine for me. That is this:

 /`<li \s*class\s*=\s*("\s*text-warning\s*"|'\s*text-warning\s*')\s*>\s*\$\{(\s*\w+\s*|\w+\s*\[\s*[\w]+\s*]\s*)\}\s*<\s*\/li\s*>`/g

matched for eg:
<li class="text-warning">${arr[i]}</li>
it also matched:
<li class="text-warning">${arr}</li>

Notice I didn't escape the back-ticks etc. but here's another version with some escaping (for backticks and quotes) that still works:

\`<li \s*class\s*=\s*(\"\s*text-warning\s*\"|\'\s*text-warning\s*\')\s*>\s*\$\{(\s*\w+\s*|\w+\s*\[\s*[\w]+\s*]\s*)\}\s*<\s*\/li\s*>\`

I would also say that it looks like this change was not adequately unit-tested. It seems a simple unit-test would have caught a few of these issues.

[alhazen1]

@kevinsmithwebdev @hbar1st I think this is just the latest of a couple changes in past day or so.
They seem to be having problems with escaping the last few characters.

This is what I saw recently (yesterday?) with / before li not escaped
<\\s*/li\\s*>\\`/g)

Now you are seeing with last backtick not escaped
<\\s*\\/li\\s*>`/g

I would think that
<\\s*\\/li\\s*>\\`/g
might fix things

@hbar1st The reason for the doubly escaped characters is that in addition to the normal escaping for regex the test is wrapped in quotes too. It is delivered as a very long string.

[ghost]

Yeah, if you remove the double backslashes and insert a backslash to escape that forward slash on the last li, it matches; I checked it with a regexp matcher online against the code I had written for the exercise. This is the last obstacle preventing me from completing my certificate.

<li \s*class\s*=\s*(\"\s*text-warning\s*\"|\'\s*text-warning\s*\')\s*>\s*\$\s*\{(\s*\w+\s*|\s*\w+\s*\[\s*[\w]+\s*\]\s*)\}\s*<\s*\/li\s*>

[scissorsneedfoodtoo]

Hi all, thank you for reporting this and coming up with different solutions. You're right, this is a recent problem that was caused by updating the regex to account for different solutions, but unfortunately we didn't escape that last forward slash. This was fixed recently and will hopefully be on the production site soon.

I'm going to close this for now, but please comment if you still have this issue after the fix rolls out.

[davidsimoes]

@scissorsneedfoodtoo When will the fix roll out? Just to let you know it keeps showing the same error for my solution too:
const resultDisplayArray = arr.map(el => `<li class="text-warning">${el}</li>`);

[scissorsneedfoodtoo]

@davidsimoes, I'm sorry, I can't say for sure. I'm not able to do it myself, so we'll have to wait for one of the main team members to trigger the build of a new NPM package, then update the learn platform to use that rather than the current curriculum package.

Another member is working to further improve the challenge. You can follow his progress here: https://github.com/freeCodeCamp/curriculum/issues/135

[KDCinfo]

Just hit this as well. First with .map(), then tried a normal for loop while .push()ing the literals.

Error: Invalid regular expression flags

  // Try #1
  const resultDisplayArray = arr.map(err => `<li class="text-warning">${err}</li>`);

  // Try #2
  const resultDisplayArray = [];
  for (let i = 0; i < arr.length; i++) {
    resultDisplayArray.push(`<li class="text-warning">${arr[i]}</li>`);
  }

  // Try #3 (same as #2, but... figured it was worth a shot.)
  const resultDisplayArray = [`<li class="text-warning">${arr[0]}</li>`, `<li class="text-warning">${arr[1]}</li>`, `<li class="text-warning">${arr[2]}</li>`];

[nuel-ikwuoma]

I also encountered the same problem, even tho my browser is up-to-date, chrome actually!
Thanks...

[cj-sv]

Can confirm, still having the issue as well using map(). Hopefully gets pushed soon.

[markallen01666]

Same problem

[Johnny2136]

Still buggy... My solution, (though I tried the looping solution and some listed above)
No luck

// change code below this line
  const resultDisplayArray = arr.map(obj => `<li class="text-warning">${obj}</li>`);
// change code above this line

yeilds:
```
// running test
Invalid regular expression flags
// tests completed
````
I hate leaving assignments undone, does anyone have a workaround? 🐞

[salva73]

Same here

[mrvkv]

Still getting the same error while my code is right. Kindly fix the bug.

[blazk0]

this was driving me mad even tho my solution was correct
i even copied one of solutions and still no hope lol

[Szlavicsek]

problem still up, super annoying

[walmello24]

there is no way to get past from this exercise?

[nuel-ikwuoma]

Yah, I hope so too.

On Jul 28, 2018 12:27 AM, "walmello24" [e-mail] wrote:

there is no way to get past from this exercise?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/17788#issuecomment-408562182,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AdUErmWJgQy7_p4S4hF7L57VQZfx-KGNks5uK6HVgaJpZM4U-a7D
.

[eklavyus]

This works for me for today: 21-08-2018
No Bugs for: template strings were used
const resultDisplayArray = arr.map(err => <li class="text-warning">${err}</li>);

[Johnny2136]

Worked for me as well! Way to go FCC! ✨

[mrvkv]

passed the test case. Now I think issue is solved. Thanks