Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

example start error with Invalid Version

See original GitHub issue

Current Behavior

tsdx cli project,

// in the root directory
yarn start 
// cd example
yarn start

xx/xx/example/index.tsx: Invalid Version: undefined at new SemVer (/tsdx/mylib/example/node_modules/semver/semver.js:314:11) at compare (/tsdx/mylib/example/node_modules/semver/semver.js:647:10) at lt (/tsdx/mylib/example/node_modules/semver/semver.js:688:10)

Expected behavior

show start local server success

Additional context

Your environment

System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.22 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.10.0/bin/yarn
    npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
  Browsers:
    Safari: 14.1.2
  npmPackages:
    typescript: ^3.4.5 => 3.9.10

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:10

Top GitHub Comments

3reactions

hirwablessingcommented, Jun 5, 2022

I also had this issue and I had to go back to parcel version 1 like this:

npm i --save-dev parcel-bundler@1.12.3

1reaction

pvhieuitcommented, Sep 11, 2022

Hi guy,

It works for me.

Step 1: Update parcel to new version and change react-dom to ../node_modules/react-dom if you use react 18, like this example/package.json

{
  "name": "example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react-app-polyfill": "^1.0.0"
  },
  "alias": {
    "react": "../node_modules/react",
    "react-dom": "../node_modules/react-dom",
    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
  },
  "devDependencies": {
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.8.4",
    "parcel": "^2.7.0",
    "typescript": "^3.4.5"
  }
}

Step 2: Change example/index.html like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Playground</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="./index.tsx"></script>
  </body>
</html>

Step 3 (option): If you use react 18, change example/index.tsx like this

import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Thing } from '../.';

const App = () => {
  return <div><Thing /></div>;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

hope it will be useful!