search

preactjs / preact-cli

😺 Your next Preact PWA starts in 30 seconds.
MIT License
4.69k stars 375 forks source link

TypeScript version is old ^3.4.5 #1529

Closed osdiab closed 3 years ago

osdiab commented 3 years ago

Do you want to request a feature or report a bug? Feature? But feels like a bug to me

What is the current behaviour? can't use the latest version of typescript, which is suggested in the preact docs themselves, because preact-cli specifies an old typescript version of ^3.4.5

If the current behaviour is a bug, please provide the steps to reproduce.

What is the expected behaviour?

It works and uses the newer version of typescript

If this is a feature request, what is motivation or use case for changing the behaviour?

I want to use modern features

Please mention other relevant information.

Environment Info:
  System:
    OS: macOS 11.2
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
  Binaries:
    Node: 14.3.0 - /var/folders/ct/hs211d3n09nb3d6nkmv7j7g80000gn/T/yarn--1612505637634-0.13322901752400163/node
    Yarn: 1.22.5 - /var/folders/ct/hs211d3n09nb3d6nkmv7j7g80000gn/T/yarn--1612505637634-0.13322901752400163/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.146
    Firefox: 80.0.1
    Safari: 14.0.3
rschristian commented 3 years ago

If you're using preact-cli you shouldn't be compiling with tsc.

Here's a demo app: https://github.com/rschristian/preact-cli-ts-demo

Runs TS 4.1.3 and uses "jsx": "react-jsx" + "jsxImportSource": "preact". It builds correctly.

rschristian commented 3 years ago

I'm not even sure how you come across that. Are you trying to run the TS dep that gets installed with Preact-CLI rather than installing TS as a dependency of your project?

osdiab commented 3 years ago

Ah yeah, I wanted to see what the errors in my project were so I ran tsc directly. Guess it's a surprise to me that the actual typescript command doesn't work if you install preact-cli.

rschristian commented 3 years ago

It definitely should work. Are you sure you actually installed TS as a dependency? If you did, the newer version would've been written over the binary of the older with both NPM and Yarn. Not sure how PNP handles it, but probably similarly.

How are you actually running tsc? yarn tsc/npm run tsc? You might be using an outdated global.

Besides, ^3.4.5 will resolve to 3.9.7, so it's not that outdated by any means.

osdiab commented 3 years ago

my project uses yarn workspaces, so it's like this:

package.json
  - packages
    - packageA
      - package.json // this one has typescript@4.1.3 installed
    - packageB
      - package.json // this one has typescript@4.1.3 and preact-cli installed

i have no globally installed typescript. Run yarn tsc in packageB and then it tries to use the version installed by preact-cli typescript@3.9.7, and then fails, even though that subpackage specifies a newer version of typescript.

the preact docs say to include in tsconfig.json the "jsxImportSource" field, and `typescript@3.9.7" reports that that config is invalid, so yeah it's not that old but it doesn't work with what the preact docs tells you to do for latest typescript, which I thought I could use because I installed the latest typescript version.

https://preactjs.com/guide/v10/typescript/

rschristian commented 3 years ago

Are you hoisting your dependencies up? That's probably the problem.

Have a repo by any chance I can take a look at?

osdiab commented 3 years ago

ah i think i understand it now. here's a simple repro: https://github.com/osdiab/preact-tsc-yarn-workspace-issue

so if you cd into either of the packages and run yarn tsc --version it shows 3.9.7; but if you actually make a script in package.json that calls tsc --version it uses the correct 4.1.3. Guess this is a quirk with how yarn resolves which dependency to use if you call it directly from the command line instead of via a script.

osdiab commented 3 years ago

we can close this, but yeah that was confusing.

rschristian commented 3 years ago

Yeah, yarna and NPM will both look in ./node_modules/.bin for executables. In a workspace you need to use that top level TSC, and there's a few ways to do that, mostly using the yarn workspace ... commands. The other option is disabling hoisting.

Glad you have that working.

osdiab commented 3 years ago

fyi I upgraded my repo to Yarn Berry (v2) (still using node_modules) and this started happening again, so I just gave up and ran yarn set resolution typescript@^3.4.5 4.1.3 to just hard override the old version of TypeScript that preact-cli uses, and everything seems to still work.

cdog commented 2 years ago

Current typescript version is giving trouble with constructors:

"version": "4.2.4",

Sample code to reproduce:

new URL(new URL('https://preactjs.com/'));

Resulting in:

TS2345: Argument of type 'URL' is not assignable to parameter of type 'string'.

For some reason typings are not correct. Can be reproduced live in TypeScript Playground: https://www.typescriptlang.org/play

v4.5.4

Screenshot 2022-02-14 at 16 56 26

v4.2.3

Screenshot 2022-02-14 at 16 56 15
rschristian commented 2 years ago

If this can be reproduced in the Typescript playground it's a TS language issue. Not anything we can do about it.

cdog commented 2 years ago

If this can be reproduced in the Typescript playground it's a TS language issue. Not anything we can do about it.

Hi @rschristian, thanks for the fast reply. Both preact and preact-cli come with outdated dependencies. Suggestion is to bump to more recent versions.

preact@10.6.5

@types/mocha                 5.2.7     5.2.7    9.1.0  node_modules/@types/mocha              preact
@types/node               14.18.11  14.18.11  17.0.17  node_modules/@types/node               preact
esbuild                    0.12.29   0.12.29  0.14.21  node_modules/esbuild                   preact
eslint                      5.15.1    5.15.1    8.9.0  node_modules/eslint                    preact
eslint-config-prettier      6.15.0    6.15.0    8.3.0  node_modules/eslint-config-prettier    preact
eslint-plugin-react         7.12.4    7.12.4   7.28.0  node_modules/eslint-plugin-react       preact
husky                        4.3.8     4.3.8    7.0.4  node_modules/husky                     preact
lint-staged                 10.5.4    10.5.4   12.3.4  node_modules/lint-staged               preact
microbundle                 0.11.0    0.11.0   0.14.2  node_modules/microbundle               preact
mocha                        8.4.0     8.4.0    9.2.0  node_modules/mocha                     preact
npm-merge-driver-install     1.1.1     1.1.1    3.0.0  node_modules/npm-merge-driver-install  preact
prettier                    1.19.1    1.19.1    2.5.1  node_modules/prettier                  preact
sinon                        9.2.4     9.2.4   13.0.1  node_modules/sinon                     preact
typescript                   4.4.2     4.4.2    4.5.5  node_modules/typescript                preact

preact-cli@3.3.5

@types/webpack                  4.41.32  4.41.32      5.28.0  node_modules/@types/webpack                  preact-cli
compression-webpack-plugin        6.1.1    6.1.1       9.2.0  node_modules/compression-webpack-plugin      preact-cli
copy-webpack-plugin               6.4.1    6.4.1      10.2.4  node_modules/copy-webpack-plugin             preact-cli
critters-webpack-plugin           2.5.0    2.5.0       3.0.2  node_modules/critters-webpack-plugin         preact-cli
css-loader                        5.2.7    5.2.7       6.6.0  node_modules/css-loader                      preact-cli
fork-ts-checker-webpack-plugin    4.1.6    4.1.6       7.2.1  node_modules/fork-ts-checker-webpack-plugin  preact-cli
get-port                          5.1.1    5.1.1       6.0.0  node_modules/get-port                        preact-cli
html-webpack-plugin               3.2.0    3.2.0       5.5.0  node_modules/html-webpack-plugin             preact-cli
less-loader                       7.3.0    7.3.0      10.2.0  node_modules/less-loader                     preact-cli
loader-utils                      2.0.2    2.0.2       3.2.0  node_modules/loader-utils                    preact-cli
mini-css-extract-plugin           1.6.2    1.6.2       2.5.3  node_modules/mini-css-extract-plugin         preact-cli
minimatch                         3.1.1    3.1.1       4.1.1  node_modules/minimatch                       preact-cli
ora                               5.4.1    5.4.1       6.0.1  node_modules/ora                             preact-cli
p-retry                           4.6.1    4.6.1       5.0.0  node_modules/p-retry                         preact-cli
postcss-loader                    4.3.0    4.3.0       6.2.1  node_modules/postcss-loader                  preact-cli
preact-router                     3.2.1    3.2.1       4.0.1  node_modules/preact-router                   preact-cli
puppeteer                         9.1.1    9.1.1      13.3.2  node_modules/puppeteer                       preact-cli
react-refresh                    0.10.0   0.10.0      0.11.0  node_modules/react-refresh                   preact-cli
sass-loader                      10.2.1   10.2.1      12.5.0  node_modules/sass-loader                     preact-cli
sirv                             1.0.19   1.0.19       2.0.2  node_modules/sirv                            preact-cli
stack-trace                      0.0.10   0.0.10  1.0.0-pre1  node_modules/stack-trace                     preact-cli
style-loader                      2.0.0    2.0.0       3.3.1  node_modules/style-loader                    preact-cli
stylus                           0.54.8   0.54.8      0.56.0  node_modules/stylus                          preact-cli
stylus-loader                     4.3.3    4.3.3       6.2.0  node_modules/stylus-loader                   preact-cli
terser-webpack-plugin             4.2.3    4.2.3       5.3.1  node_modules/terser-webpack-plugin           preact-cli
typescript                        4.2.4    4.2.4       4.5.5  node_modules/typescript                      preact-cli
webpack                          4.46.0   4.46.0      5.68.0  node_modules/webpack                         preact-cli

Mainly typescript@4.2.4 (-> 4.5.5 or at least 4.4.x) and sass-loader@10.2.1 (-> 12.5.0) in preact-cli. Is this a possibility?

rschristian commented 2 years ago

Preact itself has no dependencies. Those are all devDeps.

Some of those dependencies cannot be touched in Preact-CLI, no. We're on Webpack 4 still, though a PR is open for 5 (see #1645)

Upgrading TS in CLI would do nothing. You should be providing your own install of TS.

cdog commented 2 years ago

Managed to pin typescript version as you suggested. Next issue with bumping sass-loader from 10 to 12:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @my/project@5.0.0
npm WARN Found: node-sass@6.0.1
npm WARN node_modules/node-sass
npm WARN   peerOptional node-sass@"^4.0.0 || ^5.0.0 || ^6.0.0" from sass-loader@10.2.1
npm WARN   node_modules/sass-loader
npm WARN     peerOptional sass-loader@"^10.2.0" from preact-cli@3.3.5
npm WARN     node_modules/preact-cli
npm WARN     1 more (the root project)
npm WARN   1 more (the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peerOptional node-sass@"^4.0.0 || ^5.0.0 || ^6.0.0" from sass-loader@10.2.1
npm WARN node_modules/sass-loader
npm WARN   peerOptional sass-loader@"^10.2.0" from preact-cli@3.3.5
npm WARN   node_modules/preact-cli
npm WARN   1 more (the root project)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @my/project@5.0.0
npm ERR! Found: sass-loader@10.2.1
npm ERR! node_modules/sass-loader
npm ERR!   peerOptional sass-loader@"^10.2.0" from preact-cli@3.3.5
npm ERR!   node_modules/preact-cli
npm ERR!     dev preact-cli@"^3.3.5" from the root project
npm ERR!   dev sass-loader@"12" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"12" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: webpack@5.68.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from sass-loader@12.5.0
npm ERR!   node_modules/sass-loader
npm ERR!     dev sass-loader@"12" from the root project

Looking forward for webpack@5 changes. Thanks!

rschristian commented 2 years ago

In general, you shouldn't be using a dependency of a dependency directly. If you need to access/run/whatever it, it should be listed as a dependency in your project.

TS 4.2.4 fits our needs in the CLI just fine. If you have different needs, rather than overriding that as listed above (this is very hacky and could break things), you should have a separate install.

Edited the above, some can be touched but they're minor version bumps, so it really doesn't matter if they're slightly outdated. It's not going to cause anyone problems.

cdog commented 2 years ago

Hey Ryan, all clear. I have listed it in my package now. Using a multi-package repository setup with Lerna, where one of the packages is a Preact app. Already had specific versions in root package, however seems not to resolve correctly. After being specific within module it started working.

Root package has: "typescript": "~4.4.4", Preact app module was supposed to share dependency from root, however was building with 4.2.4 instead.

Perhaps is a Lerna issue. Thanks again.

On Mon, Feb 14, 2022, 20:27 Ryan Christian @.***> wrote:

In general, you shouldn't be using a dependency of a dependency directly. If you need to access/run/whatever it, it should be listed as a dependency in your project.

TS 4.2.4 fits our needs in the CLI just fine. If you have different needs, rather than overriding that as listed above (this is very hacky and could break things), you should have a separate install.

Edited the above, some can be touched but they're minor version bumps, so it really doesn't matter if they're slightly outdated. It's not going to cause anyone problems.

— Reply to this email directly, view it on GitHub https://github.com/preactjs/preact-cli/issues/1529#issuecomment-1039468432, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFITV2QQCJIPMAYHG6FVL3U3FJQ3ANCNFSM4XEFWSRQ . You are receiving this because you commented.Message ID: @.***>