diff --git a/packages/docusaurus/src/commands/start.ts b/packages/docusaurus/src/commands/start.ts
index 481b6370f1..6cb989d715 100644
--- a/packages/docusaurus/src/commands/start.ts
+++ b/packages/docusaurus/src/commands/start.ts
@@ -15,6 +15,8 @@ import path from 'path';
 import portfinder from 'portfinder';
 import openBrowser from 'react-dev-utils/openBrowser';
 import {prepareUrls} from 'react-dev-utils/WebpackDevServerUtils';
+import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware';
+import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import merge from 'webpack-merge';
@@ -135,15 +137,20 @@ export async function start(
       rewrites: [{from: /\/*/, to: baseUrl}],
     },
     disableHostCheck: true,
-    // Enable overlay on browser. E.g: display errors
-    overlay: true,
+    // Disable overlay on browser since we use CRA's overlay error reporting
+    overlay: false,
     host,
-    before: app => {
+    before: (app, server) => {
       app.use(baseUrl, express.static(path.resolve(siteDir, STATIC_DIR_NAME)));
+
+      // This lets us fetch source contents from webpack for the error overlay
+      app.use(evalSourceMapMiddleware(server));
+      // This lets us open files from the runtime error overlay.
+      app.use(errorOverlayMiddleware());
+
       // TODO: add plugins beforeDevServer and afterDevServer hook
     },
   };
-  WebpackDevServer.addDevServerEntrypoints(config, devServerConfig);
   const compiler = webpack(config);
   const devServer = new WebpackDevServer(compiler, devServerConfig);
   devServer.listen(port, host, err => {
diff --git a/packages/docusaurus/src/webpack/client.ts b/packages/docusaurus/src/webpack/client.ts
index b849d040bb..67e3edf778 100644
--- a/packages/docusaurus/src/webpack/client.ts
+++ b/packages/docusaurus/src/webpack/client.ts
@@ -18,9 +18,12 @@ export function createClientConfig(props: Props): Configuration {
   const config = createBaseConfig(props, false);
 
   const clientConfig = merge(config, {
-    entry: {
-      main: path.resolve(__dirname, '../client/clientEntry.js'),
-    },
+    entry: [
+      // Instead of the default WebpackDevServer client, we use a custom one
+      // like CRA to bring better experience.
+      !isProd && require.resolve('react-dev-utils/webpackHotDevClient'),
+      path.resolve(__dirname, '../client/clientEntry.js'),
+    ].filter(Boolean) as string[],
     optimization: {
       // Keep the runtime chunk separated to enable long term caching
       // https://twitter.com/wSokra/status/969679223278505985