In this really short article I would like to discuss a problem I came across during one of my react projects. I was working on building a simple chart using D3. I fired it up my project and ran npm build ( just in case I forgot to do so the day prior).
Then I started getting all these weird errors, like the image below:
What? JavaScript doesn’t like the “react” code I’ve been using for the past few days now? How is this even possible???? WTF?!
So decided to break the project down to a single component ( commenting out the import statements that import other child components) and ran it again, attempting to rendor a single component:
WTF!?!?
So I sat there and rechecked my packages, my webpack configuration file, and saw that everything I needed was there; entry files and my babel-loader was there as well.
Turned out that I was missing my .babelrc file with all my presets…
redeeye@jmci:~/Desktop/reactpro1$ ls -a .babelrc
ls: cannot access '.babelrc': No such file or directory
Granted, you don’t need a .babelrc file to get babel to work, you can configure it within your webpack.config file; I personally like the .babelrc-file-method.
Till this day I have no idea how it deleted, I might have ran something along the lines of rm .ba* , I dunno…
So once re-created my .babelrc file with the presets, I was good to go! (My anger instantly vanished). Right after that, I decided to write a short post with the title above.
[./src/index.js] 243 bytes {main} [built]
+ 29 hidden modules
ℹ ｢wdm｣: Compiled successfully. < --Thats what I want to see.
In conclusion, make sure your transpiler is fully in-check before you run your react projects, otherwise, JS will complain, all the time, every time. — No i Transpiler? No Website.
I hope this helps.