SyntaxError: Unexpected identifier while deploying React application on Docker container - node.js

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)

Answer 1

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"