Cannot GET / in simple React example

gipcu 0
Viewed 32

I am doing some React book examples.
I get following error with below config after running npm run start:

Cannot GET /

package.json

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "zadanie1.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.0"
  },
  "devDependencies": {
    "ts-loader": "^9.3.1",
    "typescript": "^4.8.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "sourceMap": true,
    "removeComments": true
  },
}

webpack.config.js

const path = require('path');
module.exports = {
    entry: {
    main: path.join(__dirname, 'zadanie1.ts'),
    },
    output: {
        filename: "zadanie1.js",
        path: __dirname,
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="zadanie1.js" type="text/javascript"></script>
</body>
</html>

zadanie1.ts

document.write("Hello World!");

I have added publicPath: "/" to webpack.config.js but nothing changed.
This example seems pretty easy but somehow this does not work. Book is from 2021 (it might be outdated in some places as React is changing alot)

webpack-dev-server webpack reactjs typescript
1 Answers

I had to add following section into webpack.config.js

[...]

devServer: {
      static: {
          directory: path.join(__dirname, '/')
      }
    },

[...]
gipcu0
Related