FAQ: Browser Compatibility and Transpilation - .babelrc

This community-built FAQ covers the “.babelrc” exercise from the lesson “Browser Compatibility and Transpilation”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction To JavaScript

FAQs on the exercise .babelrc

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

"Open .babelrc using the file explorer in the code editor.

Add the following object to the file:

{
“presets”: [“env”]
}"

I am at a complete loss. I have been searching the directory in the code editor for over an hour and can find nothing like “.babelrc” listed. Where do I find it?

23 Likes

" Your project directory contains the following folders and files:

project
|_ node_modules
|___ .bin
|___ ...
|_ src
|___ main.js
|_ .babelrc
|_ package.json

No it doesn’t. I have followed along with all the prompts from this section correctly (at least, I assume that I have since the tutorial has allowed me to progress as far as section 8 of this chapter). But I do not have have a layout akin to this in my root directory. I have the “node modules” and package.json" and “Main.js” but not “.babelrc” or “bin” or “…” Where am I going wrong?

8 Likes

You could create it.

$ touch .babelrc

Just make sure it goes into the right directory, whichever that is. (the directory structure you posted shows how the project dir relates to the other dirs)

I don’t know about your files, but there’s a .babelrc in my home directory. It could be old, and I don’t know if babel would look there. Maybe. Might want to create it in your project directory like they suggest is where it should exist anyway.

4 Likes

It took me a second to figure this out, but there’s a tiny little folder icon just to the right of the main.js tab in the middle of your screen. If you click that, after you run the $touch .babelrc, you should see the file browser they mention in the reading portion, and you’ll see .babelrc in there. If you do an ls on the directory, .babelrc will not show up. I hope this helps!

131 Likes

I’m having the exact same problem. I’ve followed every instruction but when I go to the file directory the only file there is main.js. Out of curiosity I clicked the ‘show me solution’ button and checked the file directory again but it’s still just main.js; it allows me to move on to the next step but I’m at a loss as to why it isn’t working.

Happened to me too. The solution is to create file .babelrc manually. Click on the folder icon next to the main.js. Next click on the files ..., create the New File called .babelrc and add an object shown in the code snippet. Voila! Problem solved.

6 Likes

But first of all be sure that you disabled all blocking extensions (if you have any) and content blocking features of your browser, to be able to finish all lessons successfully.

2 Likes

I’ve read all of these posts and experienced the same problem. Since I don’t have a computer background, I don’t know how to “disable all blocking extensions” or any other potential “fixes”.

I deleted my browsing history and cache, reset the exercise multiple times, and continued to input the commands taught in the lesson. None of those things worked. Finally, I clicked “Reset Exercise” and, when it did, the “.babelrc” file magically appeared (without me even having to type “touch .babelrc” into the terminal window). Once that file appeared, I was finally able to finish the lesson.

My frustration is in the lack of response from CC moderators and staff in this forum. As you can see above, there are a myriad of frustrated students (myself included) who have paid a membership fee and should be getting some help from CC.

Is there another forum where CC moderators and staff might assist in resolving issues such as this? If anyone would point me in the right direction, it would be greatly appreciated. Thank you.

5 Likes

Awesome - thanks so much!

1 Like

If it wasn’t for this I wouldn’t have figured it out, Thanks a lot!!! <3

1 Like

mine was to the left of the main.js tab.

my two cents

2 Likes

please bump this post - it makes everything make sense and is the most useful reply - thanks kymberlicodes

1 Like

I did it the old school bash way of inserting text into a file by typing in the terminal
echo “{ \“presets\”: [\“env\”] }” >> .babelrc
The \" escapes the quotation marks so quotations are literally part of the text. Then I could use another code editor to place the brackets on an individual line.

1 Like

I created the file with “touch” and then edited it with nano, not thinking to use the web interface to find the file.

My problem was with the instruction “run the code” and I was thinking “How do I run the babel command?” not “Oh, just click ‘Run’ with .babelrc open”

4 Likes

If you type “ls -lah”, .babelrc will show up. It doesnt show up with ls becaus it is a hidden file. To edit it you can do “vi .babelrc” which opens the legendary command line editor. Editing through that method is a whole new challenge. I doubt that is how the makers of the exercise intended for it to be done, else they would have given a hint in the hint section.

3 Likes

Why is it that
{ "presets": ["env"] }
designates the version of JavaScript to transpile from? What exactly do the words presets and env mean?

1 Like

I would have never spotted that folder icon without this comment, thank you!!

2 Likes

After you type touch . babelrc to the right side of the screen you must click on the small folder icon next to where it says main.js on the left. You will see a drop down menu where one of the options is your .babelrc . Click on it and then type
{
“presets”: [“env”]
}
to the code editor

7 Likes

I had this question as well. From what I can gather in the babel documentation, the env preset takes your javascript code and passes it to babel plugins that will transpile. Still not 100% sure on what exactly is going on but this page reads:

Sidenote, if no targets are specified, @babel/preset-env will transform all ECMAScript 2015+ code by default.

Any further clarification would be great!

1 Like