Webpack/Babel-transformed .js file has wrong MIME type ('text/html' not 'text/javascript')

Question

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:

Chrome Developer Tools feedback:

"Refused to execute script from 'https://example.com/dev/test-app/transformed.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."

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

app/index_template.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test App</title>
    <script type="text/babel" src="index.js"></script>
  </head>
  <body>
    <div id="app"></div>    
  </body>
</html>

app/index.js:

import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld.js';

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('app')
);

app/components/HelloWorld.js:

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <h1>Testing....</h1>;
  }
}    

export default HelloWorld;

package.json:

{
  "name": "test-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "webpack",
    "start": "node server.js",
    "dev": "webpack && 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"
  }
}

webpack.config.js:

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 => ['.bin'].indexOf(x) === -1)
    .forEach(mod => { 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]
  }
];

[Edit:]

The problem was on the Node.js level; edited my server.js to explicitly pass MIME type for .js files:

[....]

var app = express();
[....]

app.get('*', function (req, res) {
  var p = req.path.replace(/^\//, '').replace(/\/$/, '');
  if (p && 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'));
});

(This strikes me as kind of klugey; I may try to come up with a more elegant solution later.)

score 0 · Answer 1 · answered Jan 04 '18 at 16:30

0

I may be wrong in assuming this, but the error relates to the request to "example.com" - are you just using this here to illustrate the request? If not then you need to replace with your current domain, e.g. "http://localhost:3000/dev/test-app/transformed.js". Example.com will only return HTML content as a demonstration.

answered Jan 04 '18 at 16:30

JSC0d3r

1
1

No, I don't believe so. I substituted "example.com" for my domain for privacy reasons. Thanks, though. – x77x Jan 05 '18 at 13:58
The mime type would be being set by the server - are you using Nginx or similar to proxy to nodejs? Can you show the server config/script you are using to host the transformed.js? – JSC0d3r Jan 05 '18 at 16:25
Thank you for pointing me in the right direction and getting me to re-examine my Node.js code; see edit above for my fix. Thanks again! – x77x Jan 08 '18 at 13:39

Webpack/Babel-transformed .js file has wrong MIME type ('text/html' not 'text/javascript')

1 Answers1