Parcel error: example\index.tsx: Invalid Version: undefined

[jgentes]

I ran npx tsdx create mixpoint and chose the react option, then went into /example and ran npm install then npm start and ran into this:

PS C:\dev\mixpoint\example> npm start

> example@1.0.0 start C:\dev\mixpoint\example
> parcel index.html

Server running at http://localhost:1234 
×  C:\dev\mixpoint\example\index.tsx: Invalid Version: undefined
    at new SemVer (C:\dev\mixpoint\example\node_modules\@babel\preset-env\node_modules\semver\semver.js:314:11)
    at compare (C:\dev\mixpoint\example\node_modules\@babel\preset-env\node_modules\semver\semver.js:647:10)  
    at lt (C:\dev\mixpoint\example\node_modules\@babel\preset-env\node_modules\semver\semver.js:688:10)       
    at C:\dev\mixpoint\example\node_modules\@babel\preset-env\lib\index.js:276:22
    at Object.default (C:\dev\mixpoint\example\node_modules\@babel\helper-plugin-utils\lib\index.js:22:12)    
    at getEnvPlugins (C:\dev\mixpoint\example\node_modules\parcel\src\transforms\babel\env.js:62:34)
    at getEnvConfig (C:\dev\mixpoint\example\node_modules\parcel\src\transforms\babel\env.js:12:25)
    at async getBabelConfig (C:\dev\mixpoint\example\node_modules\parcel\src\transforms\babel\config.js:32:19)
    at async babelTransform (C:\dev\mixpoint\example\node_modules\parcel\src\transforms\babel\transform.js:6:16)
    at async JSAsset.pretransform (C:\dev\mixpoint\example\node_modules\parcel\src\assets\JSAsset.js:83:5) 

Your environment

PLEASE RUN THIS COMMAND INSIDE YOUR PROJECT:

npx envinfo --system OS --browsers --binaries --npmPackages tsdx,typescript --npmGlobalPackages tsdx,typescript

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz 
    Memory: 6.39 GB / 15.92 GB
  Binaries:
    Node: 12.20.2 - C:\Program Files\nodejs\node.EXE      
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.74)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    typescript: ^3.4.5 => 3.9.9

[phamhieu]

I got the same issue.

Manually update parcel package under example app to the latest version fix the bug "parcel": "^2.0.0-beta.1"

[agilgur5]

So this is caused by Parcel, not TSDX. It's caused by the very recent and the only pinned issue from Parcel: https://github.com/parcel-bundler/parcel/issues/5943 . That, in turn, is caused by a recent change in Babel: https://github.com/babel/babel/issues/12945 .

It seems like the Babel folks have deemed this a Parcel bug of using the API the wrong way (even though it only broke now after a few years), and the Parcel folks are currently not maintaining Parcel v1 despite v2 not being ready yet...

There's not really much TSDX can do here because Parcel v2 isn't fully ready (upgrading the example deps to a beta generally means asking for more bug reports) and Babel and Parcel aren't fixing this as of now 😕

You're welcome to workaround by upgrading to the beta yourself at your own risk as @phamhieu suggests and working through any bugs there with the Parcel team. Although, based on the Parcel and Babel threads, v2 also has this bug in it, but doesn't always hit it.

There is also a workaround by pinning @babel/preset-env to 7.13.8 via resolutions, as provided by the Babel team in https://github.com/parcel-bundler/parcel/issues/5943#issuecomment-788928442 :

"resolutions": {
  "@babel/preset-env": "7.13.8"
}

---

Also, with regard to the issue template:

Your environment

The comment below this line should stay commented out and, importantly, you're missing the version of TSDX in your output; you probably ran this outside of your project directory -- the directions say to run inside of it.

[agilgur5]

So there's been a fix pending upstream in https://github.com/parcel-bundler/parcel/pull/5946 for almost as long as the issue has existed, but unfortunately it has not gotten much attention despite the wide impact of this across the JS community

[phamhieu]

You're welcome to workaround by upgrading to the beta yourself

Sadly, this will break hot module reloading. I couldn't find any solution so I gave up.

Right now, I use parcel v1.12.3 which doesn't have the above issue.

// on example/package.json
// From
"parcel": "^1.12.3",

// To
"parcel": "1.12.3",

[agilgur5]

Right now, I use parcel v1.12.3 which doesn't have the above issue.

I'm not sure why folks are saying this; this might be a coincidence of yarn.lock getting resolved to a lower version of @babel/preset-env, but v1.12.3 has the same bug and similarly does not pin preset-env. So I would not recommend that and would recommend the resolution I listed above and upvoting the upstream issue and PR.

[phamhieu]

I'm not sure why folks are saying this; this might be a coincidence of yarn.lock getting resolved to a lower version of @babel/preset-env, but v1.12.3 has the same bug and similarly does not pin preset-env.

on v1.12.3

"@babel/preset-env": "^7.0.0 <7.4.0",

on v1.12.4

"@babel/preset-env": "^7.4.4",

[agilgur5]

ah thanks for correcting me @phamhieu ! I posted a link to that line too on the same commit (tagged specifically to v1.12.3) but maybe I was looking at the wrong commit before changing the URL because I didn't see that until now.

Those Babel versions are pretty old, but for the example app they're probably fine. (would not recommend for a library itself though).

[nikhilag]

It seems parcel-bundler 1.12.5 has the fix. See https://github.com/parcel-bundler/parcel/issues/5943#issuecomment-799899064

[kintz09]

It seems parcel-bundler 1.12.5 has the fix. See parcel-bundler/parcel#5943 (comment)

I experienced this issue today. I added "parcel-bundler": "1.12.5", as a devDependency in the example's package.json file. After installing the error was quickly resolved. I'd recommend this approach until a more permanent fix is available from Parcel.

EDIT: Today I was working in a fresh TSDX React Storybook project, and it took some trial and error to get this error fixed. If I npm installed with parcel-bundler already in package.json, the error always persisted. I was able to get it to work by installing packages, running npm start to confirm it failed, then npm i -D parcel-bunder@1.12.3. Then an npm start worked as expected. Other note, I'm using Node 14 with NPM 7.

[phamhieu]

I tried "parcel-bundler": "1.12.5" the example can compile and run but hot-reload stops working. Not sure why!!!

[nfl404]

I got the same issue.

Manually update parcel package under example app to the latest version fix the bug "parcel": "^2.0.0-beta.1"

It's ok. Or try yarn add parcel

[AnshVM]

@nfl404 this works. But every time I make a change in my library I have to delete .parcel-cache in my example folder and npm start (example folder) to see the changes. Any fixes??

[abhinav-anshul]

I don't think there is a permanent fix to this as of now until babel resolves the error.

[hariscs]

encountered the same issue, i just updated the parcel manually to the latest version and it worked.