Freecodecamp: ES6 Import/Export Challenges Broken

[Ethan-Arrowood]

Identified in issue #16207 and PR #16201
The final 6 challenges in the ES6 section teach the user about using import and export.
Challenges 23, 25, 27 produce: require is not defined
Challenges 24, 26 produce: exports is not defined

Not sure where to start with this issue; however, we need to figure this out before launching Beta.

[theoutlander]

I'm going through this, but not sure where to start in terms of the function that executes the challenge. It appears that the code is minified as well, so I can't catch it in the browser when an exception occurs. Any pointers @QuincyLarson ?

This is where the exception occurs:

The _createFlow function is where this exception occurs, but code under that is minified:

_createFlow is lodash, so I need to go higher up.

Ok, I figured the problem around the above error. It was caused because I used single quotes instead of double for

import {capitalizeString} from "string_functions";

[Ethan-Arrowood]

@theoutlander I believe the precompiled code is available under the getUserInput variable. This is what I used for writing tests.

[BerkeleyTrue]

These challenges will need to be disabled as the framework has no way of resolving import/export statements.

[QuincyLarson]

@BerkeleyTrue Could there be a way we could fake this for the purpose of teaching it?

Are we planning to support import/export statements in the near future? Will campers be able to build projects codepen-style on freeCodeCamp without using these?

[theoutlander]

If we break the normal event flow and introduce a special case, it should be easy to fake it. The validator passes. I’m not sure what tries to do the actual require. Another option is to add a faked window.require which can respond with mock data. I can try that as an option.

Sent from my iPhone

On Dec 22, 2017, at 8:22 PM, Quincy Larson <[email protected][e-mail]> wrote:

@BerkeleyTruehttps://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fberkeleytrue&data=02%7C01%7C%7Ce25533207c5c453e2c1608d549bcce58%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636495997614563275&sdata=xlw4GtMvXsdZ8SBCQUayG4ctVP0q17WQ4AlD%2Fmohmi0%3D&reserved=0 Could there be a way we could fake this for the purpose of teaching it?

Are we planning to support import/export statements in the near future? Will campers be able to build projects codepen-style on freeCodeCamp without using these?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FfreeCodeCamp%2FfreeCodeCamp%2Fissues%2F16235%23issuecomment-353705991&data=02%7C01%7C%7Ce25533207c5c453e2c1608d549bcce58%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636495997614563275&sdata=M%2BoK4FUmknj%2BJs4QtOEFXbKszusfTFAf6UW2DAVy3kc%3D&reserved=0, or mute the threadhttps://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAAtuHPidsEdB5ZZPacLTYeCHfJbYQwJ9ks5tDIAPgaJpZM4RJRfz&data=02%7C01%7C%7Ce25533207c5c453e2c1608d549bcce58%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636495997614563275&sdata=rHocqYDmr4MTvtwa00xdsWdRnZhAwfpf4Y9MFeSYwf4%3D&reserved=0.

[QuincyLarson]

@theoutlander That would be great! If you can develop a reliable technique for doing this, we may be able to use this when we teach other tools client-side, such as Git and Bash.

[theoutlander]

I can take this item ... @BerkeleyTrue are you working on it too?

I need to understand how the code execution engine works. Does anyone know that enough to walk me through it quickly? Or, I can dabble in it.

[QuincyLarson]

@theoutlander Yes - if you want to take a crack at it. @BerkeleyTrue will eventually get to it if you don't figure it out first. He's juggling a lot of other issues at the moment.

[theoutlander]

I spent a lot of time on this and need some direction from @BerkeleyTrue.

There's this error that I can't track down:

assert(code.match(/import\s+{\s?capitalizeString\s?}\s+from\s+"string_functions"/ig)

resulting in

assert(code.match(/import\s+{\s?capitalizeString\s?}\s+from\s+"string_functions"/ig)

Notice the missing ')' at the end. I might need to setup REDUX_DEV_TOOLS to trace where this populates from. It seems okay in the es6.json file. Searching globally or adding breakpoints hasn't revealed anything else yet.

On the other hand, I managed to build a small code segment that allows us to mock objects. That can be extended to do a lot more once I can fix this specific issue.

[Ethan-Arrowood]

That looks like a regex pattern from the ES6 tests.
https://github.com/freeCodeCamp/freeCodeCamp/blob/f792a4380a894ba294873b69d4eca747b8564fef/seed/challenges/02-javascript-algorithms-and-data-structures/es6.json#L835

So few things:

1. Looks like your branch isn't up to date as that was the old ES6 test. New one is linked above.
2. That method is not missing a ) because the assert method has a second parameter you seem to have omitted ( ,'message: Test message'); would be what continues after the lines you posted above ).

Nice work so far keep it up!

[theoutlander]

Thanks @Ethan-Arrowood. I realized I pasted the same line twice above, instead of the error code.

Anyway, I re-synced, dropped db and started over and it seems like that issue has gone!

My fix is passing this test. I need to try the other tests.

Finally, I need to think about a good design for mocking and where these things should go. I suppose, for now, I could check in my changes and then work on a better approach for the future.

Thanks for your help!

[Ethan-Arrowood]

You're welcome! Sounds like you are doing incredible work, keep it up and make sure to tag me on your PR when its time I'd love to review what you do 😄

[theoutlander]

So, this stuff is a bit flaky. For http://localhost:3000/en/challenges/es6/use-export-to-reuse-a-code-block, it mentions that export {foo, bar} is acceptable, but the regex is set up to only validate:

export const foo = "bar"

Anyway, we can tighten up the regex later.

I think what's worse is that the error messages are so obfuscated!

[theoutlander]

Another flaky part of the regex is that it looks for double quotes only.

[IsaacAbrahamson]

@QuincyLarson, Since this is closed and merged, should it be removed from the TODO list?