CODEWITHSUNDEEP
typescriptdockercreate-react-app
Maroš Beťko
Maroš Beťko

Reputation: 2329

react-scripts build fails when run through docker

I'm getting compilation errors when I run the react-scripts build command from docker container but it works without problems when I run it locally. The errors seem to be related exclusively to typescript but I'm not 100% sure about that. The errors I'm getting are Syntax error: Unexpected token, expected "," in code that definitely should not have them. Some examples:

#16 63.56 > 11 | type Props<T extends string> = {
#16 63.56      |              ^

#16 70.86    9 | export const ADDRESS_INIT_VALUE = {
#16 70.86 > 10 |        country: (null as unknown) as Country,
#16 70.86      |                       ^

Here is the dockerfile I'm using:

# syntax = docker/dockerfile:experimental

## BUILD image ##
FROM node:15.2.1-alpine3.12 AS builder
WORKDIR /web

# Copy package files
COPY ./web/package.json ./
COPY ./web/yarn.lock ./

# Install dependencies
RUN yarn install

# Copy and build app
COPY ./web ./
RUN yarn build

## RUN Image ##
FROM httpd:alpine

# Apache conf
COPY ./web/.docker/httpd.conf /usr/local/apache2/conf/httpd.conf

COPY --from=builder /web/build/ /usr/local/apache2/htdocs/

So far I've tried multiple node docker images, made no difference. I also made sure I have the exact same version of node and yarn as the docker image. I also deleted node_modules and yarn.lock that I'm using locally and did clean install and build which did not give any errors.

Any suggestions or ideas on why the build is giving these weird errors in docker would be very much appreciated.

Upvotes: 4

Views: 2481

Answers (2)

Maroš Beťko
Maroš Beťko

Reputation: 2329

It turns out I had .eslintrc.json ignored by Docker and was getting errors from default settings eslint rules during build.

Solution, I've whitelisted all the linter files in .dockerignore of this dockerfile.

*

!web/.docker
!web/public
!web/src
!web/package.json
!web/yarn.lock
!web/tsconfig.json
!web/.editorconfig
!web/.eslintrc.json
!web/.prettierrc
!web/.stylelintrc

Upvotes: 4

Alexander Dimitrov
Alexander Dimitrov

Reputation: 974

Look at some configuration files in the root directory and add them in the copy packages section.

Upvotes: 0

Related Questions