Blank page with React, TypeScript, and Webpack

Question

I created a React app using create-react-app and added TypeScript to it. I added Webpack because I want it to run my local server to serve all my assets, and eventually, build my production assets. When I run react-scripts start, I get the default React welcome page without any problems. But when I run webpack-dev-server, I just see a blank page with no HTML.

What could be wrong? I've included my configuration below. Thanks in advance.

webpack.config.js

const path = require('path');

const mode = process.env.NODE_ENV || 'development';

module.exports = {
  mode: mode,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'ts-loader'],
      },
      {
        test: /\.s[ac]ss$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpe?g|svg|gif|ico)$/i,
        use: ["file-loader"],
      }
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
  },
};

babel.config.js

module.exports = {
  presets: [
    '@babel/preset-typescript',
    '@babel/preset-env'
  ],
  plugins: [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "sourceMap": true
  },
  "include": [
    "src"
  ]
}

App.tsx

import React from 'react';
import { Routes, Route } from "react-router-dom";

import About from "./About";
import logo from './logo.svg';
import './App.scss';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

score 0 · Accepted Answer · answered Dec 21 '21 at 23:23

I know there were many similar questions, but none of them solved my issue after hours of searching. Finally, I came across this SO post, and it solved the issue for me. Here's what I did:

Add index.html to /src/index.html:

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

Install html-webpack-plugin to render React on an HTML page: yarn add html-webpack-plugin --dev
Update my Webpack config to load my app on the HTML file I just created:

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
  ...
}

Then it worked!

Blank page with React, TypeScript, and Webpack

1 Answers1