React Mixed content error while loading bundle.js (Http/ Https)

Question

Trying my hands with React but getting error while serving it on heroku . while its been working on my local.

//error

Mixed Content: The page at ' https://reactshoppingapp.herokuapp.com/ ' was loaded over HTTPS, but requested an insecure script ' http://localhost:3000/bundle.js '. This request has been blocked; the content must be served over HTTPS.

My github profile if you can clone it and solve my error. https://github.com/tanmoysarkar/shoppingApp.git

My Package.json

{
  "name": "website",
  "version": "1.0.0",
  "engines": {
    "node": "7.2.1"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.18.2",
    "bootstrap": "^3.3.7",
    "chai": "^4.1.2",
    "connect": "^3.6.5",
    "connect-flash": "^0.1.1",
    "connect-mongo": "^2.0.1",
    "cookie-parser": "^1.4.3",
    "cookieparser": "^0.1.0",
    "cors": "^2.8.4",
    "css-loader": "^0.28.8",
    "es2015": "0.0.0",
    "express": "^4.16.2",
    "express-session": "^1.15.6",
    "express-validator": "^4.3.0",
    "file-loader": "^1.1.6",
    "font-awesome": "^4.7.0",
    "mongoose": "^4.13.9",
    "morgan": "^1.9.0",
    "nodemon": "^1.14.7",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-hot-loader": "^3.1.3",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.0",
    "serve-favicon": "^2.4.5",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0",
    "webpack-hot-middleware": "^2.21.0"
  },
  "scripts": {
    "start": "node server.js",
    "dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --history-api-fallback --host 0.0.0.0 --port 3000",
    "build": "react-scripts build",
    "test2": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "postinstall": "npm run build",
    "webpack": "webpack"
  }
}

My Index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8">
    <meta name="description" content="My First Website">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


    <title>Shopping Cart</title>

  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

      <script type="text/javascript" src = "http://localhost:3000/bundle.js"></script>
      <script src="js/jquery.js"></script>
      <!-- End -->

      <!-- Plugin JS -->
      <script src="js/bootstrap.js"></script><!--bootstrap-->      

  </body>
</html>

webpack.config.js

var webpack = require('webpack');
module.exports = {
  devtool: 'source-map',
  entry:  [  
       'webpack-dev-server/client?http://0.0.0.0:3000',
    'webpack-hot-middleware/client','./src/index.js'
  ],

  output: {
   path: __dirname + "/build",
   filename: 'bundle.js',
  },


  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader", 
        query:
          {
            presets:['es2015', 'stage-0','react']
          }
      },
      {
        test: ['./src/css/bootstrap.min.css'],
        use: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        // Transform our own .css files with PostCSS and CSS-modules
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],

      }, {

        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
       {
          test: /\.html$/,
          loader: "file-loader",
        },
        {
          test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: "url-loader"
        },
        {
          test: /\.(ttf|eot|svg|jpg|png)(\?[\s\S]+)?$/,
          use: 'file-loader'
        }
    ],

  },

//This config only to be used when components interact with models directly
 devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
  },

    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
  ]
};

Any help over this would be great . Waste already 2 day to solve it. :(

Answer 1

Have you tried changing your javascript src path to a relative path?

<body>
...
    <script type="text/javascript" src = "/bundle.js"></script>
...
</body>

For this to work you have to add a script to your package.json

"scripts": {
    "heroku-postbuild": "webpack -p --config ./webpack.config.js --progress"
}

See also this question: How to deploy node that uses Webpack to heroku

And the corresponding docs: https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps

Update:

we made a couple of changes to his files:

Add the following line in webpack.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

change src to /bundle.js as shown above

add this script instead of postinstall

"scripts": {
    "heroku-postbuild": "webpack"
}

now it works as expected

corresponding merge ( https://github.com/tanmoysarkar/shoppingApp/commit/99b7d5a58928a87b79aa8f3e73d77f0ca6e0aa49 )

React Mixed content error while loading bundle.js (Http/ Https)

Question

1 answers

solution1
1 ACCPTED 2018-01-19 08:29:17

Update:

React Mixed content error while loading bundle.js (Http/ Https)

Question

1 answers

solution1 1 ACCPTED 2018-01-19 08:29:17

Update:

solution1
1 ACCPTED 2018-01-19 08:29:17