TypeScript-Getting-Started
TypeScript-Getting-Started copied to clipboard
Unable to run
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?
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.
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.
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" },
I believe this PR will resolve the errors folks are seeing https://github.com/bricewilson/TypeScript-Getting-Started/pull/39