Invalid Version: undefined

[kjones12345]

I'm having trouble running the code in the section "Building Out the Web Application," just prior to the section "Routing." When I execute "npm run dev" I get:

Server running at http://localhost:1234
🚨 /Users/kenjones/.../notedly/web/src/App.js: Invalid Version: undefined (<--- this line is in red)
...

And, on the web page at http://localhost:1234 I get the message "🚨 Build Error" followed by the same message about an Invalid Version.

I've looked online and found info about a problem with using certain versions of babel with parcel, but nothing I've read has helped me resolve this issue.

How do I get this code to run?

Thanks,
--Ken

[ascott1]

Hi @kjones12345! Sorry for the delayed response. Did you clone the GitHub repository for the application as instructed in the book or are you working from scratch?

[kjones12345]

Hi, Adam! Great to hear from you. I did clone the GitHub repository as instructed. Of course, because of the security measures GitHub put in place after you wrote the book, I had to use the syntax that requires the GitHub URL to do the cloning instead of the exact command you gave in the book (I assume you are well aware of this issue and you plan to add this to the book's errata, if you haven't done so already).

If memory serves (I hope my memory hasn't been polluted by the work I've been doing in the past few days!), I did run into one problem that I forgot to mention before I got the Invalid Version message. Running "npm run install" bombed, but, since I saw that some of the things installed during the cloning process were using yarn, I tried "yarn run install" instead and that command seemed to run fine. Other than that, everything seemed to work fine until I tried to execute "npm run dev". I tried "yarn run start" as well, but had no luck.

The stack trace I got made it look like semver was doing the complaining, possibly about a problem with the version of babel, so I'm wondering if the cloning process could be sucking in a newer version of babel or another package and that's what's causing the problem.

If you can run through the process from cloning through successfully displaying the web page at http://localhost:1234, then either I did something wrong or it's a "works on my machine" type of issue (ugh!). Otherwise, there's an issue that needs to be fixed and added to the errata.

BTW, kudos for creating a book that is truly OUTSTANDING in so many ways---the clarity of the code and explanations, the sequencing of the material, the bite-size chunks of material, the almost unheard of way you carefully avoid using mysterious concepts and code constructs prior to discussing them in the book (thereby avoiding the confusing "magic" that is sprinkled throughout most books in the genre)...the list goes on. A true gem of a book. I can't wait to get past my current impasse and get back to it!

[ascott1]

@kjones12345 thank you so much for your kind comments! My guess is that there may be some version issues that came along with the use of yarn. What version of Node and NPM are you using?

[ascott1]

And my sincere apologies again for the slow response! It seems that I need to change some sort of configuration here so that I get alerts (which I had done with the old community)

[kjones12345]

No problem with the slow response. To be honest, I've spent all my spare time these past 13 days learning HTML and CSS much more deeply than I needed to know them to read and understand your book (another compliment for your book!). I've been working through the freeCodeCamp HTML and CSS course and just minutes ago I finished the last project needed to earn their Responsive Web Design certification. So I'll be all the better prepared to get back to your book.

My version of Node is v14.17.3 and of npm is 7.21.0. I'd happy to change if either of them caused the problem.

[kjones12345]

Whoa! Ignore that last comment. I hadn't scrolled down and seen your newer comments!!

[ascott1]

@kjones12345 and anyone else who may run into this issue. I've created a branch that updates this project to use Parcel 2 and an updated version of Babel. I believe that this will resolve the issue that you are running into around downstream dependency errors. You can check out the branch here: https://github.com./javascripteverywhere/web/tree/parcel2

I've also made a pull request so that you can see the difference: javascripteverywhere/web#30

The summary of changes:

Update Parcel and Babel dev dependencies in your package.json file:

"@babel/core": "7.15.5",
"@babel/preset-env": "7.15.6",
"@babel/preset-react": "7.14.5",
"parcel": "^2.0.0-rc.0",

In .babelrc, update the presets:

"presets": ["@babel/preset-env", "@babel/preset-react"],

Migrating to Parcel 2 will require two very minor code changes when working through the book's code examples:

First, use absolute imports for local files in the App.js file (not the . ahead of the local path):

// import global styles
import GlobalStyle from './components/GlobalStyle';

// import our routes
import Pages from './pages';

Use the url syntax for importing the logo SVG:

import logo from 'url:../img/logo.svg';

I hope that helps!

[kjones12345]

Thanks, Adam. I'll give this a try.

[kjones12345]

Yup, Adam, you da man! No problems now! Thanks!

BTW, if you can spare the time, and the explanation is short, could you explain how you solved this problem. Problems with version mismatches like this drive me crazy. Any tips on how to solve these sorts of problems would be greatly appreciated.

[ascott1]

@kjones12345, I did a little digging through Stackoverflow and GitHub issues for Parcel and noticed that there others had encountered a similar issue. It seemed to be caused by Babel and unpinned sub-dependencies (iirc). Looking at resolutions for the issue, I could either do some hacky things to fix those sub-dependency problems or update to newer versions of Babel and Parcel. I read through the Parcel migration docs and this seemed pretty straightforward, so I went ahead with that, which seemed to be the most future friendly option!

The only issue is that others new to the book are likely to experience the same issue that you did. Ideally, I can fix this issue in the main branch of the repo while also offering this migration guide for anyone who is interested.

[kjones12345]

Thanks for the info!