SyntaxError: Unexpected identifier while deploying React application on Docker container

Question

I'm new to ReactJS world and helping one team with deployment of their React application to the Docker container. I have done following tasks.

Created Ubuntu machine in EC2 and installed Docker engine.
Copied the entire React code in one of the folder, added DockerFile and Docker-compose yml file. Team has few other applications to deploy together and that is why I've included docker-compose file. But, right now just deploying one React application.
After doing docker-compose up container is getting created and exiting immediately. I then checked the logs of exited container (shown below).

/usr/src/app/src/index.js:1 import React from 'react'; ^^^^^

SyntaxError: Unexpected identifier at Module._compile (internal/modules/cjs/loader.js:723:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

I researched on this error and looks like this is because of compiling, missing webpack or something in React application. I'm not sure what to fix in React and where.

Here is package.json file in case if you can help to figure out the problem.

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@rjsf/core": "^2.3.0",
    "@sentry/browser": "^5.23.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "FormData": "^0.10.1",
    "append-query": "^2.1.0",
    "axios": "^0.19.2",
    "babel-loader": "8.1.0",
    "bootstrap": "^4.5.2",
    "es6-promise": "^4.2.8",
    "install": "^0.13.0",
    "lodash": "^4.17.20",
    "log": "^6.0.0",
    "mdbreact": "^4.27.0",
    "node-sass": "^4.14.1",
    "npm": "^6.14.8",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-bootstrap-tabs": "^2.0.0",
    "react-confirm-alert": "^2.6.2",
    "react-data-table-component": "^6.11.0",
    "react-dom": "^16.13.1",
    "react-fontawesome": "^1.7.1",
    "react-jsonschema-form": "^1.8.1",
    "react-popup": "^0.10.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-stepzilla": "^6.0.2",
    "react-stepzilla-redux": "0.0.3",
    "react-toastify": "^6.0.8",
    "react-tooltip": "^4.2.8",
    "reactstrap": "^8.5.1",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "styled-components": "5.1.0",
    "validate": "^5.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.11.5"
  }
}

Here is the content of DockerFile

FROM node:10
# FROM alpine:latest
WORKDIR /usr/src/app

# add node_modules/.bin:$path
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# Install app dependencies
COPY package*.json ./

RUN npm install


# Bundle app source
COPY . .

#
EXPOSE 80
CMD npm start

And, docker-compose file looks like below.

version: "3"

services:
  web:
    build: ./pdf_web_frontend
    command: "node src/index.js"
    ports:
      - "800:80"

Do you see any problem in anything above? TIA.

Note: I have already seen this link SyntaxError: Unexpected identifier importing React (Javascript)

score 0 · Accepted Answer · answered Oct 04 '20 at 07:26

After a lot of research, I could deploy this react app. Here are the issues.

Issue was with the dockerfile and docker-compose file. I added completely new files with different content.
React app was deploying to some miserable port. So, I explicitly added PORT 8080 in package.json file. This is not a clean solution but this worked.

Below are the new files.

package.json

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@rjsf/core": "^2.3.0",
    "@sentry/browser": "^5.23.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "FormData": "^0.10.1",
    "append-query": "^2.1.0",
    "axios": "^0.19.2",
    "babel-loader": "8.1.0",
    "bootstrap": "^4.5.2",
    "es6-promise": "^4.2.8",
    "install": "^0.13.0",
    "lodash": "^4.17.20",
    "log": "^6.0.0",
    "mdbreact": "^4.27.0",
    "node-sass": "^4.14.1",
    "npm": "^6.14.8",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-bootstrap-tabs": "^2.0.0",
    "react-confirm-alert": "^2.6.2",
    "react-data-table-component": "^6.11.0",
    "react-dom": "^16.13.1",
    "react-fontawesome": "^1.7.1",
    "react-jsonschema-form": "^1.8.1",
    "react-popup": "^0.10.0",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-stepzilla": "^6.0.2",
    "react-stepzilla-redux": "0.0.3",
    "react-toastify": "^6.0.8",
    "react-tooltip": "^4.2.8",
    "reactstrap": "^8.5.1",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "styled-components": "5.1.0",
    "validate": "^5.1.0"
  },
  "scripts": {
    "start": "PORT=8080 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.11.5"
  }
}

Dockerfile

FROM node:alpine

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . /app

CMD ["yarn", "run", "start"]

docker-compose.yml

version: "3"

services:
  client:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"

SyntaxError: Unexpected identifier while deploying React application on Docker container

1 Answers1