React整合Express遇bundle.js加载错误：404及MIME类型问题求助

Hey there! As someone who’s stumbled through this exact setup snag before, let’s break down what’s causing those errors and how to fix them fast.

First, let’s decode what the errors mean:

• The 404 (Not Found) tells us your Express server can’t locate the bundle.js file when your browser requests it.
• The MIME type error happens because when Express can’t find a requested file, it defaults to sending your index.html (which has a text/html MIME type) instead of a JavaScript file—so the browser throws a fit trying to execute HTML as code.

Here are the most common fixes to try:

1. Confirm Webpack is generating bundle.js #

First things first: did you run the Webpack build command? For development mode, you’ll usually run:

webpack --watch

Or if you have a script in package.json like "build": "webpack", run:

npm run build

Head to your project folder and check if the dist/bundle.js file exists. If it’s missing, double-check your Webpack config’s output section to ensure it’s set to output to the dist folder:

module.exports = {
  // ... other config settings
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  }
};

2. Configure Express to serve static files #

Express doesn’t automatically serve files from your dist folder—you have to explicitly tell it to. Add this line to your Express server file (like server.js):

const path = require('path');
const express = require('express');
const app = express();

// Serve files from the dist folder
app.use('/dist', express.static(path.join(__dirname, 'dist')));

// ... rest of your server code (like routing to index.html)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html')); // Adjust this path to match your actual HTML file location
});

app.listen(3000, () => console.log('Server running on port 3000'));

Make sure path.join(__dirname, 'dist') points to the correct location of your dist folder. For example, if your server.js lives inside a src subfolder, you’d need to use path.join(__dirname, '../dist') instead.

3. Check the script path in your HTML file #

Verify your index.html uses the correct absolute path for bundle.js—it needs to match both your Webpack publicPath and Express static setup:

<script src="/dist/bundle.js"></script>

Using a relative path like dist/bundle.js can break depending on which route your app is on, so always use the absolute path starting with /.

4. Rule out port conflicts or server misconfiguration #

Make sure your Express server is actually running on port 3000 (the error points to localhost:3000). If you’re using Webpack Dev Server alongside Express, ensure they’re on different ports (like Express on 3000 and Webpack Dev Server on 8080) to avoid conflicts.

Once you’ve tried these steps, restart your Express server and Webpack watcher (if you’re using it), then refresh the browser—those errors should be gone!

内容的提问来源于stack exchange，提问作者Cesar