typescript - react-scripts build fails when run through docker

Question

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.

标签： typescriptdockercreate-react-app

Answer 1

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