Deploying app to Heroku with source-maps

Question

Everything works perfect locally. I enabled source-maps in my webpack config and .map file is created. Problem is when I push app to Heroku. If I inspect element I see that source maps are not enabled. I minimize my code so nothing is where it's supposed to be without source-maps.
How do I deploy to Heroku with source-maps?

EDIT:

webpack config

devtool: 'source-map',
module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules|dist|build/,
        options: {
          babelrc: true,
        },
      },
      {
        test: /\.local\.(css|scss)$/,
        use: ExtractLocal.extract({
          fallback: 'style-loader?sourceMap',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
                modules: true,
                importLoaders: 1,
                localIdentName: '[local]___[name]__[hash:base64:5]',
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'sass-resources-loader',
              options: {
                resources: [ path.resolve(__dirname, './src/client/styling/styles/variables.scss'), ],
              },
            },
          ],
        }),
      },
     ],
  },
   plugins: [
    // new BundleAnalyzerPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
   ]

package.json

"build-client": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"start": "cross-env NODE_ENV=production node ./src/build/bundle.js",

If I refresh my app on heroku and run heroku logs I get the below errors regarding source maps. H12 Request timeout. So Sourcemaps are there but are not being fetched by Heroku.

SOLUTION Ok, I found the problem. It was Nginx and not Heroku. I am using it between my Heroku app and server. The configuration was set up like this.

location ~* \.(js|css|gif|png|jpg|ico|svg|eot|ttf|otf|woff|woff2|json|xml)$ {
            root                 "/app/src/dist/";
            add_header         Pragma public;
            add_header         Cache-Control public;
      expires            1y;
      gzip_static        on;
      gzip               off;
      log_not_found      off;
      access_log         off;
 }

As you can see there is no map extension so it was not fetching it. After I added it, everything started working properly.

You need to post your webpack config so that we can see under what conditions you have sourcemap enabled. For example, if you have generation of sourcemap tied to process.env.NODE_ENV!== "production" then by default on Heroku you won't have a sourcemap, since NODE_ENV gets set to "production" on Heroku by default. — Yoni Rabinovitch, May 15 '18 at 07:56
Hy Yoni. I posted my webpack config. I have differnt webpack config file for production and development so it is not that. Source maps are generated and I think that they even go to Heroku when I deploy because if I open the chrome devtool and start refreshing the page it is much slower then when I deploy without source maps. That means it is downloading source maps but when I inspect element I see no right line number or location. — Igor-Vuk, May 15 '18 at 11:27

Deploying app to Heroku with source-maps

0 Answers0