0
votes

Hello I'm new to react and I'm trying to attach express framework with react, I followed this tutorial: https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade but when I run the server I'm getting the following error:

Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:1

Refused to execute script from 'http://localhost:3000/dist/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I have been searching this error for two days now and I haven't find a solution. I think the problem is that the bundle.js is not being created by webpack, I would like to now why is this happening

My project directory is the following:

root

My config webpack file:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './client/index.js',
    output: {
      path: __dirname,
      filename: 'bundle.js',
      publicPath: '/client/assets/'
    },
    module: {
        loaders: [
          {
            test: /\.(js|jsx)$/,
              loader: 'babel-loader',
              include: path.join(__dirname, 'client'),
              exclude: /node_modules/,
              query: {
                presets: ['es2015', 'react', 'stage-0']
              }
            },
            {
              test: /\.css$/,
              loader: 'css-loader'
            }
        ]
    },
};

server.js, where I create the express instance:

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

module.exports = {
  app: function () {
    const app = express();
    const indexPath = path.join(__dirname, 'indexDep.html');
    const publicPath = express.static(path.join(__dirname, '../dist'));

    app.use('/dist', publicPath);
    app.get('/', function (_, res) { res.sendFile(indexPath) });

    return app;
  }
}

And app.js, where I'm running the server:

const Server = require('./server.js')
const port = (process.env.PORT || 3000)
const app = Server.app()

if (process.env.NODE_ENV !== 'production') {
  const webpack = require('webpack')
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware')
  const config = require('../webpack.dev.config.js')
  const compiler = webpack(config)

  app.use(webpackHotMiddleware(compiler))
  app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPathdist
  }))
}

app.listen(port)
console.log(`Listening at http://localhost:${port}`)
1
Look for a bundle.js somewhere within your project. If necessary, you can do Ctrl+T/Cmd+T to find files using Atom's fuzzy-finder (yes, I recognized the editor). Do you see it anywhere?Isiah Meadows
/node_modules/ajv/scripts/bundle.jsCesar
does this mean something?Cesar
Nope, not there. Excluding node_modules.Isiah Meadows
Then nope, i can not see it anywhereCesar

1 Answers

0
votes

Try this:

// server.js
"use strict"

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

module.exports = {
  app(init) {
    const app = express()
    const indexPath = path.join(__dirname, 'indexDep.html')
    const publicPath = express.static(path.join(__dirname, '../dist'))

    if (init != null) init(app)
    app.use('/dist', publicPath)
    app.get('/', function (_, res) { res.sendFile(indexPath) })

    return app
  },
}

// app.js
const Server = require('./server.js')
const port = (process.env.PORT || 3000)

Server.app(app => {
  if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack')
    const webpackDevMiddleware = require('webpack-dev-middleware')
    const webpackHotMiddleware = require('webpack-hot-middleware')
    const config = require('../webpack.dev.config.js')
    const compiler = webpack(config)

    app.use(webpackHotMiddleware(compiler))
    app.use(webpackDevMiddleware(compiler, {
      noInfo: true,
      publicPath: config.output.publicPathdist
    }))
  }
})
.listen(port)
console.log(`Listening at http://localhost:${port}`)

Specifically, what this does is two-fold:

  1. It punts your initialization to before Express finally reads its catch-all routes for /dist and /. If you add the middleware after, you'll never see it set up in the first place.

  2. It retains most of your other logic, without moving a lot of code. Closures are useful for that kind of thing, keeping logic where it belongs while still allowing others to let you hook into their logic.