TypeScript-Getting-Started icon indicating copy to clipboard operation
TypeScript-Getting-Started copied to clipboard

Unable to run

Open S3j5b0 opened this issue 2 years ago • 4 comments

Hi, I've been trying to run the program as shown in the course.

I first ran it with the dependencies in the versions they are here on this repo. But When time came to run the application, this error showed up:

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (C:\Git\TypeScript-Getting-Started\node_modules\webpack-cli\lib\webpack-cli.js:108:21)

I did'nt know what this meant, but the dependencies were quite old, so I figured updating them could make sense.And they now look like this:

  "devDependencies": {
    "ts-loader": "9.4.1",
    "typescript": "4.8.4",
    "webpack": "5.74.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.11.1"
  }

I then ran npm install, tsc app\app.ts and npm start. This does start the application like this:

> npm start   

> [email protected] start
> webpack serve

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.10.110.162:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Git\TypeScript-Getting-Started\public' directory
asset bundle.js 568 KiB [emitted] (name: main)
runtime modules 27.3 KiB 12 modules
modules by path ./node_modules/ 159 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 55.8 KiB 12 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB
    ./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
    + 2 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB
    ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated]
    + 2 modules
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 13.8 KiB [built] [code generated]
./app/app.ts 243 bytes [built] [code generated]
webpack 5.74.0 compiled successfully in 1490 ms

But, when I now try to access http://localhost:8080/ in the browser, this is the only thing I get:

Cannot GET /

Wat is wrong?

S3j5b0 avatar Oct 26 '22 10:10 S3j5b0

It might be because you updated webpack-dev-server and ts-loader to new major versions, which likely have breaking changes.

This is the output of npm outdated with the repo in its current state:

Package             Current  Wanted  Latest  Location                         Depended by
ts-loader            8.0.17  8.0.17   9.4.1  node_modules/ts-loader           TypeScript-Getting-Started
typescript            4.2.2   4.2.2   4.8.4  node_modules/typescript          TypeScript-Getting-Started
webpack              5.22.0  5.22.0  5.74.0  node_modules/webpack             TypeScript-Getting-Started
webpack-cli           4.5.0   4.5.0  4.10.0  node_modules/webpack-cli         TypeScript-Getting-Started
webpack-dev-server   3.11.2  3.11.2  4.11.1  node_modules/webpack-dev-server  TypeScript-Getting-Started

I was able to clone the repo, npm install and npm start to see the app running at localhost:8080 without modifications.

jrtitus avatar Nov 01 '22 22:11 jrtitus

After battling with this for a couple of hours this morning, I found the solution which is to only update webpack-cli to 4.10.0 and leave the rest the same. My devDependencies config looks like this now:

  "devDependencies": {
    "ts-loader": "8.0.17",
    "typescript": "4.2.2",
    "webpack": "5.22.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "3.11.2"
  }

Hope this helps anyone else stumbling on this issue.

dsbibby avatar Dec 19 '22 14:12 dsbibby

When running I was having this webpack error: { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }

This solved the issue: "scripts": { "start": "SET NODE_OPTIONS=--openssl-legacy-provider && webpack serve" },

Gibranhiko avatar Oct 05 '23 14:10 Gibranhiko

I believe this PR will resolve the errors folks are seeing https://github.com/bricewilson/TypeScript-Getting-Started/pull/39

gfarb avatar Mar 15 '24 20:03 gfarb