React应用报错：MIME类型('text/html')不可执行，严格检查已启用

Hey there, let's dig into this MIME type issue you're facing with your React app's bundle.js—I've run into this exact problem a few times before, so here are some targeted fixes that might get you back on track:

1. Server Routing Order is Mixed Up #

If you're using a custom server (like Express) or tools with fallback routing (for React Router), the most common culprit is your server prioritizing the catch-all route over static assets.

For example, in Express, you must handle static files first before your fallback to index.html:

// Correct order: static assets first, then fallback
app.use(express.static('dist')); // Points to your build/output folder

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

If you reverse this, the server will send index.html for every request—including bundle.js—which is why you're seeing the text/html MIME type error.

For Webpack Dev Server, double-check your devServer config to ensure static assets are mapped correctly:

devServer: {
  static: './dist', // Path to your bundled files
  historyApiFallback: true, // Safe for React Router, but only if static assets work first
}

2. Incorrect bundle.js Path in index.html #

Take a close look at how you're importing bundle.js in your HTML. A wrong path will make the server return index.html instead of the actual script.

• If bundle.js lives in your root build folder: use <script src="/bundle.js"></script> (absolute path).
• If it's in a subfolder like dist/: use <script src="/dist/bundle.js"></script>.
• Avoid relative paths like ./bundle.js unless you're sure your HTML file is in the same directory as the bundle.

3. Webpack output Configuration Issues #

Your Webpack config's output settings might be misaligned, causing the bundle to be served from the wrong location:

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'), // Make sure this matches your server's static folder
  publicPath: '/', // Critical—this tells Webpack where to serve assets from
}

A wrong publicPath (like ./ instead of /) can lead the browser to request bundle.js from the wrong URL, triggering the fallback to index.html.

4. Cache & Server Restart #

Sometimes the simplest fixes work:

• Force-refresh your browser with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) to clear cached responses.
• Fully restart your development server—sometimes config changes don't apply until you do this.

5. Typos or Case Sensitivity #

Don't overlook small mistakes:

• Did you spell bundle.js correctly in your HTML or Webpack config? (e.g., bundel.js is a common typo)
• Are folder/filenames case-matched? (e.g., Dist instead of dist can break things on case-sensitive systems like Linux)

If you've tried all these and still hit the wall, sharing snippets of your Webpack config and server setup would help narrow things down further.

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