Running react app on nginx - error in chrome

Question

I am transitioning a react app from webpack-dev-server to nginx.

I am building the source bundle with webpack and outputting it to the wwwroot folder for nginx. This works.

When I access the root of the app localhost:8080/ with chrome, it stops loading after having loaded the initial html. When I look to nginx logs I see this:

my-nginx-container | 2017/05/12 20:52:42 [error] 6#6: *4 "/wwwroot/react-draggable.js.map/index.html" is not found (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /react-draggable.js.map// HTTP/1.1", host: "localhost:8080"
my-nginx-container | 172.20.0.1 - - [12/May/2017:20:52:42 +0000] "GET /react-draggable.js.map// HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-"
my-nginx-container | 172.20.0.1 - - [12/May/2017:20:52:43 +0000] "GET /react-image-lightbox.js.map// HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-"
my-nginx-container | 2017/05/12 20:52:43 [error] 6#6: *4 "/wwwroot/react-image-lightbox.js.map/index.html" is not found (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /react-image-lightbox.js.map// HTTP/1.1", host: "localhost:8080"

If I do the same thing in firefox it loads fine.

there is a long thread about this, and after trying to sort it out for hours i have given up!!

Does somebody have some wisdom here.

My webpack config:

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var BUILD_DIR = '/wwwroot' //path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  resolve: {
    extensions: ['.js', '.jsx', '.scss'],
    alias: {
      jquery: "jquery/src/jquery"
    }
  },
  entry: {
    main: APP_DIR + '/index.jsx',
  },
  output: {
    publicPath: './',
    path: BUILD_DIR,
    filename: '[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: APP_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0', 'stage-1'],
          plugins: [
            'react-html-attrs',
            'transform-class-properties',
            'transform-decorators-legacy',
          ],
        },
      },
      { test: /.(woff|woff2|eot|ttf)$/, loader: 'url-loader?prefix=font/&limit=5000', },
      { test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader'), },
    ],
  },
  devtool: 'eval-source-map',
  plugins: [
    new webpack.ProvidePlugin({
      'Promise': 'es6-promise',
      'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
    }),
    new ExtractTextPlugin("[name].css"),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new HtmlWebpackPlugin({
      title: 'PhotoTank',
      template: 'src/client/app/html-template.ejs',
      filename: '/wwwroot/index.html'
    })
  ],

  devServer: {
     contentBase: path.resolve(__dirname, 'src/client'),
     proxy: {
       "/api": {
          target: "http://192.168.2.189:3000",
          pathRewrite: {"^/api" : ""}
       }
     },
     historyApiFallback: true
   },

};

module.exports = config;

Change devtool: 'eval-source-map' to devtool: '#inline-source-map' — Jonathan Dion
Glad I helped! Umm, should I post and then accept the anwser? — Jonathan Dion

Jonathan Dion Jonathan Dion · Accepted Answer · 2017-05-13T15:23:24

1

votes

In the webpack config change:

devtool: 'eval-source-map'

to

devtool: '#inline-source-map'

Running react app on nginx - error in chrome

2 Answers