title: Webpack/Babel-transformed .js file has wrong MIME type ('text/html' not 'text/javascript')
body: <p>When running webpack/babel and node.js for a simple "Hello World" react.js component, the transformed .js file apparently isn't returned as the correct MIME type:</p>
  
  <p><strong>Chrome Developer Tools feedback:</strong></p>
  
  <p>"Refused to execute script from '<a href="https://example.com/dev/test-app/transformed.js" rel="nofollow noreferrer">https://example.com/dev/test-app/transformed.js</a>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."</p>
  
  <p>Having pared down and corrected configuration files and pored through documentation and StackOverflow answers, I still can't resolve this problem or find this particular problem resolved anywhere.  (Any insights are valued and appreciated; I'm new at Node.js, Webpack, Babel, and React.js.)</p>
  
  <p><strong>app/index_template.html:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Test App&lt;/title&gt;
      &lt;script type="text/babel" src="index.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;    
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app/index.js:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import HelloWorld from './components/HelloWorld.js';
  
  ReactDOM.render(
    &lt;HelloWorld /&gt;,
    document.getElementById('app')
  );
  </code></pre>
  
  <p><strong>app/components/HelloWorld.js:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class HelloWorld extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return &lt;h1&gt;Testing....&lt;/h1&gt;;
    }
  }    
  
  export default HelloWorld;
  </code></pre>
  
  <p><strong>package.json:</strong></p>
  
  <pre><code>{
    "name": "test-app",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "build": "webpack",
      "start": "node server.js",
      "dev": "webpack &amp;&amp; npm start"
    },
    "dependencies": {
      "axios": "^0.17.1",
      "body-parser": "~1.18.2",
      "cookie-parser": "~1.4.3",
      "debug": "~2.6.9",
      "express": "~4.15.5",
      "morgan": "~1.9.0",
      "pg": "^7.4.0",
      "pug": "2.0.0-beta11",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "serve-favicon": "~2.4.5"
    },
    "devDependencies": {
      "@babel/preset-env": "^7.0.0-beta.35",
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-preset-env": "^1.6.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "html-webpack-plugin": "^2.30.1",
      "nodemon": "^1.12.5",
      "webpack": "^3.10.0",
      "webpack-dev-server": "^2.9.7"
    }
  }
  </code></pre>
  
  <p><strong>webpack.config.js:</strong></p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  
  const HTMLWebpackPlugin = require('html-webpack-plugin');
  const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: path.join(__dirname, 'app/index_template.html'),
    filename: path.join(__dirname, 'app/index.html'),
    inject:   'body'
  });
  
  
  var fs = require('fs');
  var nodeModules = {};
  
  fs.readdirSync(path.resolve(__dirname, 'node_modules'))
      .filter(x =&gt; ['.bin'].indexOf(x) === -1)
      .forEach(mod =&gt; { nodeModules[mod] = `commonjs ${mod}`; });
  
  // Ref: https://stackoverflow.com/questions/31102035/how-can-i-use-webpack-with-express
  
  
  module.exports = [
    {
      name: 'server',
      entry: path.join(__dirname, 'server.js'),
      target: 'node',
      output: {
        path: path.join(__dirname, 'dist/server'),
        filename: 'server.js'
      },
      externals: nodeModules
    },
    {
      name: 'client',
      entry: path.join(__dirname, 'app/index.js'),
      output: {
        path: path.join(__dirname, 'app'),
        filename: 'transformed.js'
      },
      module: {
        loaders: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
              presets: ['react', 'env']
            }
          }
        ]
      },
      plugins: [HTMLWebpackPluginConfig]
    }
  ];
  </code></pre>
  
  <p><strong>[Edit:]</strong></p>
  
  <p>The problem was on the Node.js level; edited my server.js to explicitly pass MIME type for .js files:</p>
  
  <pre><code>[....]
  
  var app = express();
  [....]
  
  app.get('*', function (req, res) {
    var p = req.path.replace(/^\//, '').replace(/\/$/, '');
    if (p &amp;&amp; p.endsWith('.js')) {
      var options = { headers: {'content-type': 'application/javascript'} };
      res.sendFile(path.join(__dirname, 'app', p), options);
    } else
      res.sendFile(path.join(__dirname, 'app', 'index.html'));
  });
  </code></pre>
  
  <p>(This strikes me as kind of klugey; I may try to come up with a more elegant solution later.)</p>