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!

javascriptexpresswebpackwebpack-dev-server

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

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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the proper way to specify a file destination in React?

After reading this article on downloading objects from GCP Cloud storage bucket, I'm curious about setting the file destination dynamically in React. Is there a way to achieve this? The article can be found at: https://cloud.google.com/storage/docs/do ...

javascriptnode.jsreactjsgoogle-cloud-platformreact-typescript

"Exploring the differences between request.body, request.params, and request.query

I am working with a client-side JS file that includes: agent = require('superagent'); request = agent.get(url); Afterwards, the code looks something like this: request.get(url) //or request.post(url) request.end( function( err, results ) { ...

javascriptajaxnode.jshttp

Generating Three.js canvases dynamically based on requirements (implemented with classes)

In my scenario, I have an asset inventory containing multiple assets. I am looking to implement a feature where whenever a user hovers over the assets, it triggers rendering with an OrbitController (Trackball is preferred but not feasible due to a bug). Th ...

javascriptthree.js

What is the recommended way to select a checkbox using JQuery?

I have exhausted all options and nothing seems to be working. This is the checkbox in question: <input type="checkbox" onchange="WriteFormSelections('SearchForm', 'AccommodationType', 'AccommodationTypeSelections', 'A ...

javascriptjqueryhtmlcheckbox

The Discord.js Avatar command does not support mentioning users

Everything seems to be working fine when I check my own avatar, but it doesn't work properly when I mention another user. Here's the code I'm using: client.on('message', message => { if (message.content === `${prefix}ava`) { ...

javascriptdiscord

Exploring the syntax of Vue's data function

I encountered a syntax error while compiling my assets: Syntax Error: SyntaxError: C:\xampp\htdocs\dtcburger.com\resources\js\components\stripe\STRIPEform3.vue: Unexpected token, expected ";" (51:12) 49 | { ...

javascriptfunctionobjectvue.jsecmascript-6

Encountering a problem while trying to launch the development server for a React application using the npm-start

I followed the steps to create a react application using npx create-react-app myapp, but when I use npm start, it fails to start a developer server. Even after trying to reinstall the node_modules, the issue persists. I am using the latest versions of Reac ...

javascriptreactjsnpmnpm-start

Guide on setting up haproxy as a reverse proxy for socket.io with SSL to avoid mixed content warnings

Over time, I've incorporated this configuration to integrate haproxy with node.js and socket.io. Highlighted sections from the haproxy setup: frontend wwws bind 0.0.0.0:443 ssl crt /etc/haproxy/ovee.pem timeout client 1h default_backend ...

javascriptnode.jssocketssslhaproxy

Angular's minimum date validation is not accurate for dates prior to the year 1901

Any assistance or clarification on this matter would be greatly appreciated. It appears that there may be an issue with my implementation, as otherwise it seems like a significant bug within Angular. Setup Create a form with a minimum date of 0001-01-01 ...

javascriptangularjsvalidationdate

Tips for displaying real-time data and potentially selecting alternative options from the dropdown menu

Is there a way to display the currently selected option from a dropdown list, and then have the rest of the options appear when the list is expanded? Currently, my dropdown list only shows the available elements that I can choose from. HTML: < ...

javascriptangulartypescriptangular5asp.net-core-webapi

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

javascripthtmljquerycssradio-button

Integrate Angular 2 into the current layout of Express framework

After generating an express structure with express-generator, I ended up with the standard setup: bin bld node_modules public routes views app.js package.json Now, I want to enhance the views and routes directories by organizing them as follows: v ...

javascriptnode.jsexpressangulartypescript

What could be causing this template to malfunction?

Every time I try to start my Express server and access the page, I encounter an error. Can anyone pinpoint what might be wrong with the syntax? The "startzeit" property is a Date() Object. <tbody> <% for (let seminar in seminare){ %> ...

javascriptnode.jsexpressejs

Show just a single error message if there are two validation errors present

In my AngularJS timepicker, users can choose multiple time segments for each day. The code has validation to detect duplicates and overlapping time segments. For example, entering 11:00am - 12:00am twice will trigger two error messages: 'Overlapping t ...

javascriptangularjstypescript

Remove buttons from carousel elements in React Multi-Carousel

Is there a way to hide the arrows in the react-multi-carousel component? https://i.stack.imgur.com/V1nix.png ...

javascriptreactjsnext.jsreact-multi-carousel

When using `console.log`, the object is displayed correctly. However, an error occurs when

Here is the code I've been working on: function parseJSONData(jsonData){ var property, type, name, identifier, comment, content; for(property in jsonData){ switch(property){ case "type": type = jsonData[ ...

javascriptjsonrecursion

Can someone explain to me the meaning of "var vm = $scope.vm = {}" in AngularJS?

While reading through the angularJS api, I came across some code that looked like this: myApp.controller('MyController', ['$scope', function($scope) { var vm = $scope.vm = {name:'savo'}; } ]); Initially, this mul ...

javascriptangularjsangularjs-scope

Is there a counterpart to ES6 "Sets" in TypeScript?

I am looking to extract all the distinct properties from an array of objects. This can be done efficiently in ES6 using the spread operator along with the Set object, as shown below: var arr = [ {foo:1, bar:2}, {foo:2, bar:3}, {foo:3, bar:3} ] const un ...

javascripttypescriptecmascript-6set

Switching out text when hovering with Jquery or JavaScript

Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read ...

javascriptjqueryhtmlcss

When traversing across different child elements, the MouseEvent.offsetX/Y values get reset to 0

Check out this interactive example. The demonstration includes a main div with 3 child divs. A click event is triggered on the main div, but instead of displaying alerts with the mouse position relative to the parent div as expected, it shows the position ...

javascripteventsdom-events