Uncaught SyntaxError: Unexpected token ‘<‘ bundle.js line 1 Docker container error

  docker, javascript, nginx, node.js, webpack

I’m learning Docker online using a tutorial. The only thing I was asked to build was the Dockerfile, so I’m sure the problem lies there, but I’m unable yet to figure out an effective way to debug the problem.

The problem is when I run the container with the built docker image index.html renders in localhost but bundle.js does not render and gives the error from the title in the console. When I webpack bundle on my local machine and open the index.html the webpage renders correctly.

Dockerfile:

FROM node:8.15-alpine as build-stage
COPY . /app
RUN npm install
CMD ["npm", "start"]

FROM nginx:1.15
EXPOSE  80
COPY --from=build-stage /app /usr/share/nginx/html
COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo App</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <link rel="stylesheet" href="./styles/main.css" >
  </head>
  <body>
    <div id="content"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

package.json:

{
  "name": "todos",
  "version": "1.0.0",
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.2.2",
    "lodash": "^4.17.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "devDependencies": {}
}

webpack.config.js:

const path = require('path');

module.exports = {
  context: __dirname,
  entry: './frontend/todo_redux.jsx',
  output: {
    path: path.resolve(__dirname),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/env', '@babel/react']
          }
        },
      }
    ]
  },
  devtool: 'source-map',
  resolve: {
    extensions: [".js", ".jsx", "*"]
  }
};

nginx.conf

# This will tell our nginx server what path
# we want it to use for the html it renders
server {
  # list on port 80
  listen 80;
  location / {
    # to learn more about location blocks check out this resouce:
    # https://www.linode.com/docs/web-servers/nginx/how-to-configure-nginx/#location-blocks
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

Source: Docker Questions

LEAVE A COMMENT