Facing an issue with webpack-dev-server where it displays a blank screen

Question

Facing an issue with webpack-dev-server where it displays a blank screen

Hello! I am currently in the process of creating my first MERN stack application, using Webpack as the build tool. The main objective is to have Express serving the APIs for the app and webpack-dev-server handling the static content (from my static directory) and bundles.

Below is a summary of my build:
Project running at http://localhost:8000/
webpack output served from /
Content not from webpack served from 'static'
Hash: 0f82642b68722fddb0c7
Version: webpack 3.1.0
Time: 3941ms
           Asset     Size  Chunks                    Chunk Names
   app.bundle.js  15.4 kB       0  [emitted]         app
vendor.bundle.js  1.35 MB       1  [emitted]  [big]  vendor
  [10] (webpack)/buildin/global.js 509 bytes {1} [built]
  ...
    + 556 hidden modules
webpack: Compiled successfully.

My dependencies include:
"dependencies": {
    "body-parser": "^1.17.2",
    ...
  },
"devDependencies": {
    "babel-cli": "^6.24.1",
    ...
  }

Here is a glimpse of my webpack.config.js settings:

const webpack = require('webpack');
...

Module exports...

Although all network traffic appears to be functioning correctly, when I access port 8000 a blank screen is displayed. Can anyone offer any guidance or suggestions? Thank you!

javascript express webpack webpack-dev-server

Answer 1

Answer №1

To ensure seamless integration with your webpack setup, consider including an index.html file in your configuration. Utilizing tools like html-webpack-plugin and/or html-loader can help streamline this process.

Answer 2

To ensure seamless integration with your webpack setup, consider including an index.html file in your configuration. Utilizing tools like html-webpack-plugin and/or html-loader can help streamline this process.

Answer 3

Answer №2

Shoutout to @robbieprevost for the helpful guidance. Following this new setup, everything is running smoothly for me:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    app: './src/App.jsx',
    vendor: ['react', 'react-dom', 'whatwg-fetch', 'babel-polyfill', 'react-router'],
  },
  output: {
    path: path.join(__dirname, './static'),
    filename: '[name].bundle.js',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['app', 'vendor'],
      minChunks: Infinity,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
          },
        },
      },
    ],
  },
  devServer: {
    port: 8000,
    contentBase: 'static',
    proxy: {
      '/api/*': {
        target: 'http://localhost:3000',
      },
    },
    historyApiFallback: true,
  },
  devtool: 'source-map',
};

Answer 4

Shoutout to @robbieprevost for the helpful guidance. Following this new setup, everything is running smoothly for me:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    app: './src/App.jsx',
    vendor: ['react', 'react-dom', 'whatwg-fetch', 'babel-polyfill', 'react-router'],
  },
  output: {
    path: path.join(__dirname, './static'),
    filename: '[name].bundle.js',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['app', 'vendor'],
      minChunks: Infinity,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
          },
        },
      },
    ],
  },
  devServer: {
    port: 8000,
    contentBase: 'static',
    proxy: {
      '/api/*': {
        target: 'http://localhost:3000',
      },
    },
    historyApiFallback: true,
  },
  devtool: 'source-map',
};

Answer 5

Answer №3

Ensure that your bundles are properly constructed by inspecting them manually or running the command $ webpack. If there are errors or warnings in the console, you may encounter a blank page due to build errors causing the JavaScript to fail to load, parse, or execute. Additionally, review the proxy settings and consider removing them if necessary. Test the settings by adding HTML directly to your index.html.

Answer 6

Ensure that your bundles are properly constructed by inspecting them manually or running the command $ webpack. If there are errors or warnings in the console, you may encounter a blank page due to build errors causing the JavaScript to fail to load, parse, or execute. Additionally, review the proxy settings and consider removing them if necessary. Test the settings by adding HTML directly to your index.html.

Facing an issue with webpack-dev-server where it displays a blank screen

Answer №1

Answer №2

Answer №3

Similar questions

Change the value of the material slide toggle according to the user's response to the JavaScript 'confirm' dialogue

Passing the app variable from Express.js to routes

Transform pixel padding into percentage ratios

Concealing and revealing information with jQuery and AJAX

Using Selenium and Python to showcase the source of an image within an iframe

How come running `npm install <folder>` results in installing different dependencies compared to `npm install lib`?

Executing a file function from another within a module function in ReactJS

What is the best way to showcase a singular item from response.data?

Angular's ng-submit directive does not use the most up-to-date scope available

Incorporating a .json file into res.render to pass data

When attempting to render a base64 string in an <img> tag using ReactJS, an error message ERR_INVALID_URL is displayed

Failure to showcase AJAX JSON data on DataTable

Retrieve information from a JavaScript file to incorporate into an HTML file

Issue encountered while serializing the `.product` object retrieved from the `getStaticProps` function in NextJS, in conjunction with

When a specific condition is met, Jquery can automatically execute a function contained

Transitioning away from bower in the latest 2.15.1 ember-cli update

Reaching the maximum request threshold

Invoking an *.aspx method from an external HTML file

Leveraging Selenium for extracting data from a webpage containing JavaScript

Talebook: Unable to modify UI theming color