search

jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.29k stars 507 forks source link

example start error with Invalid Version #1139

Open lishoulong opened 2 years ago

lishoulong commented 2 years ago

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

Suggested solution(s)

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
johann1301s commented 2 years ago

I am having this issue as well.

hirwablessing commented 2 years ago

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

MagnusBrzenk commented 2 years ago

@hirwablessing This did not fix it for me. Im very confused and disappointed that tsdx is no longer working out of the box.

hirwablessing commented 2 years ago

@MagnusBrzenk are you sure you installed that specific parcel version? Also make sure you don't have two versions of parcel in your project.

MagnusBrzenk commented 2 years ago

Edit: this worked at first, but subsequent attempts result in the same failure! It's really odd, but I have followed the following steps several times, and sometimes it works, and sometimes it doesn't. I have never seen a node setup to be so apparently non-deterministic.

❯ node --version
v18.6.0
❯ tsdx --version
tsdx, 0.14.1
❯ tsdx create temp
❯ react
❯ cd temp/example
❯ npm i 
❯ npm run start
...
🚨  /Users/.../temp/example/index.tsx: Invalid Version: undefined
❯ npm i --save-dev parcel-bundler@1.12.3
❯ npm run start
Server running at http://localhost:1234
✨  Built in 8.97s.

### IT WORKS SOMETIMES, BUT NOT ALWAYS!
hirwablessing commented 2 years ago

Edit: this worked at first, but subsequent attempts result in the same failure! It's really odd, but I have followed the following steps several times, and sometimes it works, and sometimes it doesn't. I have never seen a node setup to be so apparently non-deterministic.

❯ node --version
v18.6.0
❯ tsdx --version
tsdx, 0.14.1
❯ tsdx create temp
❯ react
❯ cd temp/example
❯ npm i 
❯ npm run start
...
🚨  /Users/.../temp/example/index.tsx: Invalid Version: undefined
❯ npm i --save-dev parcel-bundler@1.12.3
❯ npm run start
Server running at http://localhost:1234
✨  Built in 8.97s.

### IT WORKS SOMETIMES, BUT NOT ALWAYS!

I guess this is an issue related to tsdx than any other thing.

pvhieuit commented 2 years ago

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!

bushblade commented 2 years ago

I had this issue too @pvhieuit 's fix did get it running for me, but the example does not update when I change any library code. I have to restart tsdx and the example project to see any change in the browser.

yepyeel commented 2 years ago

I had this issue too @pvhieuit 's fix did get it running for me, but the example does not update when I change any library code. I have to restart tsdx and the example project to see any change in the browser.

try to add parcel-bundler

bushblade commented 2 years ago

I just switched to using Vite in library mode. Flawless experience.

chriszrc commented 1 year ago

I just switched to using Vite in library mode. Flawless experience.

Is Vite really easy to configure for libraries? Seems like it demands quite a bit of manual config:

https://articles.wesionary.team/react-component-library-with-vite-and-deploy-in-npm-579c2880d6ff

chriszrc commented 1 year ago

TloT

I had this issue too @pvhieuit 's fix did get it running for me, but the example does not update when I change any library code. I have to restart tsdx and the example project to see any change in the browser.

I'm experiencing the same problem. Then I found this post:

https://github.com/parcel-bundler/parcel/issues/4332#issuecomment-1311704659

Which appears to indicate that the current setup with example running from a subfolder will prevent parcel from watching the files in dist. Looks like you need to trigger parcel to watch the folder, I used watchman, seems to work now:

"watch-src": "watchman watch ../dist && watchman -- trigger ../dist buildme '*.*' -- touch ../example/package.json",
bushblade commented 1 year ago

Hi @chriszrc I honestly found it very little config and a very painless experience, I highly recommend it. Here is my little library if you fancy taking a look at the setup. It's literally a default Vite React set up with a lib directory where all the library code lives then the build option in vite.config.ts configured to bundle just the lib code. Hope that helps.